html, body { color: var(--default-color); background-color: var(--background-color); font-family: var(--default-font); overflow-x: hidden; width: 100%; margin: 0; padding: 0; } main { margin-top: 11.3rem; } @media (max-width: 1199px) { main { margin-top: 5rem; } } 
h1, h2, h3, h4, h5, h6 { color: var(--default-color); font-family: var(--heading-font); } article, article p, article h1, article h2, article h3, article h4, article h5, article h6 { font-family: var(--heading-font); } 
 :root { --default-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Montserrat, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --heading-font: "Montserrat", sans-serif; --nav-font: "Montserrat", sans-serif; --background-color: rgba( 80, 97, 91, 0.1 ); --default-color: #50615b; --heading-color: #384142; --accent-color: #384142; --contrast-color: #e5dede; --nav-color: #ffffff; --nav-hover-weight: 600; --nav-mobile-background-color: #50615b; --nav-hover-border: box-shadow; --nav-dropdown-background-color: #50615b; --nav-dropdown-color: #ffffff; --nav-dropdown-hover-weight: 550; --nav-dropdown-hover-border: box-shadow; scroll-behavior: smooth; } .light-background { --background-color: #50615b; --surface-color: #e5dede; } .dark-background { --background-color: #060606; --default-color: #ffffff; --heading-color: #ffffff; --surface-color: #252525; --contrast-color: #ffffff; } 
 .scroll-top { position: fixed; visibility: hidden; opacity: 0; right: 15px; bottom: 15px; z-index: 99999; background-color: var(--accent-color); width: 40px; height: 40px; border-radius: 4px; transition: all 0.4s; } .scroll-top i { font-size: 24px; color: var(--contrast-color); line-height: 0; } .scroll-top:hover { background-color: color-mix(in srgb, var(--accent-color), transparent 20%); color: var(--contrast-color); } .scroll-top.active { visibility: visible; opacity: 1; } 
 .recent-posts { max-width: 96vw !important; width: 96vw !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } .posts-container > * { flex: 1 1 calc(33.333% - 1.25rem); } .recent-posts .post-item { background-color: white; transition: box-shadow 0.3s ease; border: 0.0625rem solid #ccc; padding-top: 4rem; border-radius: 0.7rem; } .recent-posts .post-item .post-title { font-weight: 700; transition: 0.3s; } .recent-posts .post-item:hover { box-shadow: 0 0 0.6875rem rgba(139, 155, 147, 1); transform: scale(1); border-left: 0.5rem solid rgba(80, 97, 91, 0.5); border-right: 0.5rem solid rgba(80, 97, 91, 0.5); } #post-text { color: var(--default-color); padding: 0 1.875rem; text-align: center; } .posts-container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.25rem; padding: 0.625rem; margin-top: 1.25rem; } @media (min-width: 1200px){ .posts-container > * { flex: 1 1 calc(33.333% - 1.25rem); box-sizing: border-box; } .recent-posts .post-item { height: auto; padding: 1rem; } } @media (max-width: 991px) { .recent-posts .post-item:hover { box-shadow: none; transform: none; border-left: none; border-right: none; } }
 .banner { display: flex; align-items: center; justify-content: flex-end !important; background-size: cover; background-position: center; background-repeat: no-repeat; height: 25rem; position: relative; overflow: hidden; padding: 0; } .banner-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( to right, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.6) 25%, rgba(0, 0, 0, 0.7) 65%, rgba(0, 0, 0, 0.8) 85%, rgba(0, 0, 0, 1) 100% ); z-index: 1; } .banner-text { position: relative; z-index: 2; color: white; text-align: right !important; max-width: auto; padding: 2rem; padding-left: 30rem; } .banner-text p { font-size: 1.5rem; line-height: 2rem; line-height: 2rem; margin: 0; color: #dcdcdc; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7); } @media (max-width: 1199px) { .icmc { height: auto; padding: 2rem 1.5rem; } .banner-text { max-width: 100%; text-align: center; padding: 1rem; } .banner-text p { font-size: 1.1rem; line-height: 1.5rem; text-align: left; } } 
 .footer { color: var(--contrast-color); background-color: var(--default-color); font-size: 20px; position: relative; } .footer .footer-top { padding: 50px 0 0 100px; color: white; } .footer h4 { font-size: 22px; font-weight: bold; position: relative; padding-bottom: 10px; color: white; } .footer .footer-about a { color: white; font-size: 25px; font-weight: 700; } .footer p { font-size: large; color: white; } .footer .footer-location .uni-location { display: inline-flex; gap: 15px; align-items: baseline; } .footer .footer-location .pin-location { height: 45px; } .footer .footer-contact p { margin-bottom: 5px; } .footer .copyright { padding: 45px 0 45px 0; border-top: 1px solid color-mix(in srgb, var(--contrast-color), transparent 45%); background-color: var(--accent-color); margin: 0; } .footer .credits { font-size: 14px; } @media (max-width: 1199px) { .footer .footer-top { padding-left: 20px; flex-wrap: wrap; } .footer .p .span { flex-direction: column; } .footer .footer-top p { font-size: medium; } .footer .footer-location { padding: 40px 0 40px 10px; } .footer .credits { font-size: 8px; } } 
 @media (min-width: 1200px) { .header{ position: fixed; z-index: 999; width: 100%; margin: 0; padding: 0; } .header-contents { display: flex; align-items: center; justify-content: space-around; background-color: white; height: 6.3rem; } .header .logo { display: flex; align-items: center; gap: 0.7rem; opacity: 85%; color: var(--accent-color); } .header h1, .header a { font-size: 1.9rem; font-weight: 700; color: var(--accent-color) !important; text-decoration: none; } .group-description { color: var(--accent-color); font-family: var(--default-font); font-size: 1rem; text-align: center; margin: 0; opacity: 85%; } .right-section { display: flex; gap: 1.25rem; } .logo-mobile { display: none; } .mobile-nav-toggle { display: none; } } @media (max-width: 1199px) { .header{ position: fixed; z-index: 999; width: 100%; margin: 0; padding: 0; } .header-contents { display: flex; align-items: center; justify-content: space-evenly; background-color: var(--default-color); height: 5rem; width: 100%; padding: 0 0.625rem; } .text-container { display: flex; flex-direction: column; align-items: flex-start; gap: 0.125rem; } .mobile-nav-toggle { font-size: 1.5rem; cursor: pointer; } .header .logo-mobile h1 { font-size: 1.125rem; font-weight: 700; color: var(--contrast-color); margin: 0; } .group-description-mobile { font-size: 0.75rem; color: var(--contrast-color); margin: 0; text-align: left; line-height: 1.2; width: 10.625rem; } .search-icon { font-size: 1.5rem; position: static; cursor: pointer; } .dropdown-button { border: 0.0625rem solid var(--contrast-color); background-color: var(--default-color); cursor: pointer; padding: 4px 4px 4px 4px; display: flex; align-items: center; justify-content: center; border-radius: 20px; width: 65px; height: auto; } .dropdown-button img { border-radius: 50%; width: 30px; height: 30px; margin-right: auto; object-fit: cover; transition: transform 0.2s, box-shadow 0.2s; } #search-box { display: none; } .logo { display: none; } .group-description { display: none; } } @media (max-width: 991px) { .header .header-contents .right-section { gap: 1.2rem !important; } .header h1, .header a, .group-description-mobile { color: white !important; text-decoration: none; } .mobile-nav-toggle { font-size: 30px !important; color: #ffffff !important; } .mod-languages img { width: 22px !important; } .search-container input[type="text"], .search-container input[type="search"], .search-container .form-control { height: 34px !important; font-size: 12px !important; padding: 4px 10px !important; line-height: 1.2 !important; } .search-container { max-width: 85px !important; } .search-container button, .search-container input[type="submit"] { display: none !important; } .right-section .search-container { flex: 0 0 auto !important; } .mod-language { width: min-content; } .mod-languages li, .language-switcher li { margin: 0 4px !important; padding: 0 !important; } .mod-languages li { margin: 0 2px !important; } }
 .navmenu { width: 100%; position: fixed; top: 6.25rem; z-index: 998; background-color: var(--default-color); box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.7); opacity: 0.95; margin-bottom: 0; } .navmenu ul { display: flex; justify-content: center; align-items: center; margin: 0; padding: 0.3125rem 0; list-style: none; } .navmenu a { color: var(--nav-color); font-family: var(--nav-font); font-weight: 500; display: flex; align-items: center; padding: 0.5rem 1.25rem; border-radius: 0.3125rem; transition: all 0.2s ease; font-size: 1.25rem; text-decoration: none; } .navmenu a span, .navmenu .dropdown-menu li a { position: relative; display: inline-block; padding: 0.3125rem; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; } .navmenu .dropdown { position: relative; } .navmenu .dropdown-menu { display: none; position: absolute; background: var(--nav-dropdown-background-color); border-radius: 0.25rem; min-width: 12.5rem; top: 100%; left: 50%; transform: translateX(-50%); padding: 0.5rem 0; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .navmenu .dropdown:hover > .dropdown-menu { display: block; } .navmenu a span { position: relative; display: inline-block; max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .navmenu a span::before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #fff; transform: scaleX(0); transform-origin: center; transition: transform 0.2s ease-in-out; } .navmenu a span:hover::before, .navmenu a.active span::before { transform: scaleX(1); } .navmenu a span::after { content: attr(title); position: absolute; left: 50%; bottom: 120%; transform: translateX(-50%); white-space: nowrap; background: rgba(0,0,0,0.85); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 0.9rem; z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 0.2s ease-in-out; } .navmenu a span:hover::after { opacity: 1; } .navmenu .icon { width: 25px; height: 25px; vertical-align: middle; margin: 15px; } .bi-chevron-down { margin-left: 0.5rem; color: white; } @media (max-width: 991px) { .navmenu { display: none; padding-top: 0.5rem !important; } .navmenu, .navmenu * { box-sizing: border-box !important; } .navmenu ul li a { padding: 0.5rem 0.75rem !important; } body.mobile-nav-active .navmenu { display: block; position: fixed; top: 0; right: 0; width: 80%; height: 100vh; background-color: var(--default-color); padding-top: 6rem; overflow-y: auto; z-index: 9999; opacity: 95%; } body.mobile-nav-active .navmenu ul { flex-direction: column; align-items: flex-start; padding-left: 1rem; } body.mobile-nav-active .navmenu a { padding: 1rem; font-size: 1.2rem; width: 100%; } .navmenu .dropdown-menu { position: static !important; display: block !important; padding: 0.25rem 0 0.5rem 0 !important; margin: 0 !important; min-width: 0 !important; left: auto !important; transform: none !important; } .navmenu .dropdown-menu li, .navmenu .dropdown-menu > li { display: block !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } .navmenu .dropdown-menu li a, .navmenu .dropdown-menu li a span { display: block !important; width: 100% !important; padding: 0.35rem 0.75rem !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; max-width: none !important; box-sizing: border-box !important; text-align: left !important; } .navmenu a span { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; max-width: none !important; } .navmenu a, .navmenu .dropdown-menu a { -webkit-tap-highlight-color: transparent; outline: none !important; background: transparent !important; box-shadow: none !important; } .navmenu a:hover, .navmenu .dropdown-menu a:hover { background: none !important; color: inherit !important; } .navmenu a:active, .navmenu .dropdown-menu a:active, .dropdown-item:active { background: transparent !important; color: inherit !important; border: none !important; box-shadow: none !important; } .navmenu ul { padding-left: 0 !important; } .navmenu a, .navmenu a * { -webkit-tap-highlight-color: transparent !important; } .mobile-nav a, .mobile-nav li { outline: none !important; } .mobile-nav a:active, .mobile-nav li:active { background: transparent !important; } .navmenu a:active, .navmenu a:focus, .navmenu .dropdown-menu a:active, .navmenu .dropdown-menu a:focus { color: var(--nav-color) !important; } .navmenu a span::before, .navmenu a:active span::before, .navmenu a:focus span::before { transform: scaleX(0) !important; display: none !important; } .navmenu a, .navmenu a:active, .navmenu a:focus, .navmenu li, .navmenu li:active, .navmenu li:focus, .navmenu .dropdown-item:active, .navmenu .dropdown-item:focus { background-color: transparent !important; outline: none !important; } .navmenu a span::after, .navmenu a:active span::after, .navmenu a:focus span::after, .navmenu a:hover span::after, .navmenu li a span::after, .navmenu .dropdown-menu a span::after { display: none; opacity: 0; content: none; height: 0; width: 0; background: transparent; border: none; visibility: hidden; pointer-events: none; } body.mobile-nav-active::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9998; animation: fadeIn 0.3s ease-in-out; pointer-events: auto; } body.mobile-nav-active .navmenu { z-index: 9999; box-shadow: -5px 0 15px rgba(0, 0, 0, 0.6); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } body.mobile-nav-active .navmenu { transform: translateX(0); transition: transform 0.3s ease-out; } .navmenu { transform: translateX(100%); transition: transform 0.3s ease-out; } .navmenu.slide-out { transform: translateX(100%) !important; transition: transform 0.3s ease-out !important; } } 
 section, .section { padding: 1rem 0; scroll-margin-top: 98px; overflow: clip; } .section-title { text-align: center; position: relative; color: var(--default-color); } .section-title p { color: var(--default-color); margin: 10px 0 0 0; font-size: 32px; font-weight: 700; font-family: var(--heading-font); } .section-title p .description-title { color: var(--default-color); } @media (max-width: 1199px) { section, .section { scroll-margin-top: 56px; } } 
 .sidebar-left { background-color: rgba(80, 97, 91, 0.1); border-radius: 0.5rem; padding: 1rem; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); margin-bottom: 1.5rem; } .sidebar-left h3 { color: var(--default-color); border-bottom: 2px solid var(--default-color); padding-bottom: 0.5rem; margin-bottom: 1.25rem; font-size: 1.25rem; } .sidebar-left ul { list-style: none; padding: 0; margin: 0; } .sidebar-left li { margin-bottom: 0.5rem; } .sidebar-left a { display: block; padding: 0.75rem 1rem; color: var(--default-color); text-decoration: none; border-radius: 0.25rem; transition: all 0.2s; border-left: 3px solid transparent; font: var(--default-font); font-size: 1rem; } .sidebar-left a:hover, .sidebar-left a:focus { background-color: rgba(80, 97, 91, 0.1); border-left-color: var(--default-color); padding-left: 1.25rem; } .sidebar-left li.current a, .sidebar-left li.active a, .sidebar-left a[aria-current="page"] { background-color: var(--default-color); color: white; font-weight: 500; border-left-color: var(--accent-color); } @media (min-width: 992px) { .sidebar-left { position: sticky; top: 120px; } }