* {margin: 0; padding: 0; line-height: 1.5; box-sizing: border-box;}
a {text-decoration: none; color: inherit;}

:root {--logo-shift: -80px;}

body {
    min-height:100vh;
    opacity: 0;
    transition: opacity 0.3s ease;
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('/img/bcg_phd.png');
    background-repeat:no-repeat;
    background-position:center top;
    background-size:cover;
    background-attachment:fixed;
    color:#e5e5e5;
    font-family:'Inter', 'system-ui', sans-serif;
    overflow-x:hidden;
    width: 100%;
}

nav {height: 75px; width: 70%; margin: 0 auto; padding: 1rem; border-bottom: 1px solid white;}
.logo-container {overflow:hidden; height:40px;}
.logo-slot {display:flex; flex-direction:column; transition: transform 0.5s ease; gap: 40px}
.nav-link-mask, .button-mask {overflow:hidden;}
.flex-center {display:flex; align-items:center; justify-content:space-between;}
header { transition: transform 0.3s ease; }
.header-links-container {display:flex; align-items:center; gap:2rem;}
.header-link {display:block; text-decoration:none; color:#e5e5e5; transition:transform 0.3s ease, opacity 0.3s ease;}
.header-link:hover {color:#dc2626;}
.header-link-button {
    display:flex; justify-content:center; padding:0.5rem 2rem; background-color:#dc2626;
    border-radius:0.25rem; text-align:center; transition: 0.5s ; text-decoration:none;
    white-space:nowrap; color:#e5e5e5;
}
#header-button-text {display:inline-block; opacity: 1; transition: opacity 0.2s;}
.header-link-button:hover {background-color:#c10007;}
.header-logo {display: inline-block; width: auto; height: auto; transition: 0.3s ease;}
.header-logo img {display: block; pointer-events: auto; height: 40px; width: auto;}

#app {padding:0px; min-height:400px; overflow-x: hidden; width: 100%;}
.view-title {font-size:2rem; font-weight:700; margin-bottom:20px;}
footer {background-color:black;}
.footer-div-main {width:60%;margin:0 auto;padding:2rem 1rem;}
.footer-div-primary {display:flex;justify-content:space-between;align-items:center;gap:1rem;}
.footer-div-logo {text-align:left;}
.footer-logo {display: inline-block; width: auto; height: auto;}
.footer-logo img {height: 20px; width: auto;}
.footer-subtext {font-size:0.875rem;color:grey;margin-top:0.5rem;}
.footer-div-socials {display:flex;gap:1.5rem;}
.footer-socials {color:grey;transition:color 0.3s ease;font-size:1.25rem;}
.footer-socials:hover {color:#dc2626;}
.footer-div-secondary {margin-top:2rem; padding-top:2rem; text-align:center}
.footer-trademark {font-size:0.875rem; color:grey}

.home-section {height:95dvh;display:flex;align-items:center;justify-content:center;}
.home-div-primary {width:60%;margin:0 auto;padding:1rem;}
.home-text-center {text-align:center;margin-bottom:4rem;}
.home-text-main {font-size:2rem; font-weight:700; color:white;}

.features-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:1.5rem;}
.feature-card {background-color:black;padding:1.5rem;border-radius:0.5rem;transition:transform 0.3s ease;text-align:left;}
.feature-card:hover {transform:scale(1.05);}
.feature-icon {width:3rem;height:3rem;background-color:#dc2626;border-radius:0.5rem;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;}
.feature-title {font-size:1.25rem;font-weight:600;margin-bottom:0.5rem;color:white;}
.feature-subtext {color:grey;}

.objectives-card {background-color:black;border-radius:0.5rem;padding:2rem;margin-top:1.5rem;}
.objectives-title {font-size:1.5rem;font-weight:700;margin-bottom:1.5rem;color:white;}
.objectives-grid {display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;}
.objectives-column {display:flex;flex-direction:column;gap:1rem;}
.objective-item {display:flex;align-items:flex-start;gap:0.75rem;}
.objective-icon {color:#dc2626;margin-top:0.25rem;}
.objective-title-text {font-weight:600;}
.objective-subtext {font-size:0.875rem;color:grey;}

.media-section {padding-top:5rem;padding-bottom:5rem;background-color:#1a1a1a;}
.media-div-primary {width:60%;margin:0 auto;padding:1rem;}
.media-text-center {text-align:center;margin-bottom:4rem;}
.media-text-main {font-size:2.25rem;font-weight:700;color:white;margin-bottom:1rem;}
.media-subtext {font-size:1.25rem;color:grey;}
.media-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.media-item {position:relative;overflow:hidden;border-radius:0.5rem;cursor:pointer;}
.media-img {width:100%;height:16rem;object-fit:cover;transition:transform 0.5s ease;}
.media-item:hover .media-img {transform:scale(1.1);}
.media-overlay {position:absolute;inset:0;background-color:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s ease;}
.media-item:hover .media-overlay {opacity:1;}
.media-overlay span {color:white;font-weight:600;}

.about-section {padding-top: 5rem; padding-bottom: 5rem; background: black;}
.about-div-container {align-items: center;  display: flex; flex-direction: column; width: 60%; margin-left: auto; margin-right: auto;}
.about-div-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center;}
.about-text-quote{width: 41%; font-size: 1.25rem; color: light-grey; font-style: italic; margin-bottom: .5rem; text-align: center;}
.about-text-subquote{font-size: 0.9rem; color: grey; margin-bottom: 3rem; text-align: center;}
.about-text-primary {font-size: 1.125rem; color: light-grey; margin-bottom: 1.5rem;}
.about-div-features-items {display: flex; align-items: center; gap: 0.75rem;}
.about-media {width:100%; border-radius: 3rem; display: block;}

.community-section {padding-top: 5rem; padding-bottom: 5rem; position: relative; background-color: #1a1a1a;}
.community-div-main {width: 60%; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem;}
.community-div-primary {text-align: center; margin-bottom: 4rem;}
.community-text-main {font-size: 2.25rem; font-weight: 700; margin-bottom: 1rem; color:white;}
.community-text-primary {font-size: 1.5rem; color:grey; max-width: 42rem; margin-left: auto; margin-right: auto;}
.community-div-secondary {display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin-bottom: 3rem;}
.community-socials {background-color: black; padding: 3rem; border-radius: 0.5rem; text-align: center; transition: background-color 0.3s ease; display: block;}
.community-socials:hover {background-color: #dc2626;}
.community-socials i {font-size: 2.25rem; margin-bottom: 1rem; transition: color 0.3s ease;}

.slide-right-enter {transform: translateX(100%); opacity: 0;}
.slide-right-enter-active {transform: translateX(0); opacity: 1; transition: transform 0.5s ease, opacity 0.5s ease;}
.slide-left-exit {transform: translateX(0); opacity: 1;}
.slide-left-exit-active {transform: translateX(-100%); opacity: 0;transition: transform 0.5s ease, opacity 0.5s ease;}

@media (max-width: 1024px) {nav, .home-div-primary, .footer-div-main, .media-div-primary, .about-div-container, .community-div-main {width: 90%;}}

@media (max-width: 768px) {
	:root {--logo-shift: -70px;}
    html, body { overflow-x: hidden; width: 100%; }
    nav { height: auto; padding: 1.2rem 0; width: 95%; margin: 0 auto; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .flex-center { flex-direction: column; gap: 1rem; align-items: center; }
    .logo-container { height: 30px; display: flex; justify-content: center; overflow: hidden; }
    .logo-slot { gap: 40px; align-items: center; }
    .header-logo img { height: 30px; width: auto; }
    .header-links-container { gap: 1rem; justify-content: center; width: 100%; }
    .header-link-button { padding: 0.5rem 1rem; font-size: 0.85rem; }
    .home-section { min-height: 100dvh; height: auto; padding: 40px 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
    .home-div-primary { width: 95%; }
    .home-text-main { font-size: 1.6rem; }
    .features-grid, .media-grid, .community-div-secondary, .objectives-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .about-div-grid { grid-template-columns: 1fr; text-align: center; }
    .about-media img { height: auto; width: 100%; }
    .footer-div-primary { flex-direction: column; text-align: center; gap: 1.5rem; }
    .footer-div-socials { justify-content: center; }
}