/* This page contains the CSS styling for the default page. * Header * MBP Logo * Menu Navbar * Body * Footer * Social Media Icons */ .bg-maryland-red { background-color: #9D2235; } .text-bg-maryland-red { text-decoration-color: #FFFFFF; background-color: #9D2235; } .bg-maryland-white { background-color: #FFFFFF; } .text-bg-maryland-white { text-decoration-color: #000000; background-color: #FFFFFF; } .bg-maryland-black { background-color: #000000; } .text-bg-maryland-black { text-decoration-color: #FFFFFF; background-color: #000000; } .bg-maryland-gold { background-color: #EAAA00; } .text-bg-maryland-gold { text-decoration-color: #FFFFFF; background-color: #EAAA00; } /********** * Header * **********/ /* Controls the background color of the menu navbar. */ .bg-menu { background-color: #e3f2fd; } /* Size of the header used on mobile (xs) screens. */ .default-header { height: 75px; } /* Size of the logo used on mobile (xs) screens. */ .logo-mini { height: 45px; } /* Body */ /* Controls the height of the body. Makes the fill the screen when used in conjunction with "flex-fill" class. */ .min-100 { min-height: 100vh; } /* Controls the background color of the page's main content. */ .bg-content { background-color: #f0f7ff; } /********** * Footer * **********/ /* Style all Font Awesome icons. */ .fa { font-size: 30px; width: 50px; text-align: center; text-decoration: none; color: #353935; } /* Hover effect. */ .fa:hover { opacity: 0.5; } /* Controls background color of the footer. Separated to make it easier to modify on individual pages. */ .bg-footer { background-color: #4e97e7; } /* Reverts link color to the same as body text color and no underline. */ footer a { color: white; text-decoration: none; } /* Changes h6 font-size to be the same as .small and makes bottom margin half as big. */ footer h6 { margin-bottom: 0.25rem; } /*********** * General * ***********/ .list-unbulleted { list-style: none; } .list-items-margin ul li { margin-top: 10px; margin-bottom: 10px; } /* Thumbnail images */ .thumbnail { aspect-ratio: 1 / 1; object-fit: cover; height: 50px; width: 50px; display: flex; } /* Photo link */ .link-photo { aspect-ratio: 16 / 9; object-fit: cover; display: block; width: 100%; } /* Profile photo */ .profile-photo { aspect-ratio: 1 / 1; object-fit: cover; display: block; width: 100%; } /* Carousel: The following are modified from bootstrap.min.css. */ .carousel-inner { overflow-x: clip; overflow-y: visible; } .carousel-caption { position: static; color: #fff; text-align: center; background-color: rgba(0, 0, 0, 1); padding-top: 0.25rem; padding-bottom: 0.25rem; } .carousel-item img { aspect-ratio: 16 / 9; object-fit: contain; display: block; width: 100%; text-align: center; } .carousel-indicators { margin-right: 0; margin-bottom: 0; margin-left: 0; } .carousel-indicators [data-bs-target] { height: 50px; width: 50px; margin: 0; border-top: 0; border-bottom: 0; } .carousel-control-next, .carousel-control-prev { position: absolute; top: 0; bottom: 50px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 15%; padding: 0; color: #fff; text-align: center; background: 0 0; border: 0; opacity: 0.5; transition: opacity 0.15s ease; }