* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #ffffff;
    color: #333333;
    overflow-x: hidden;
    transition: background-color 0.5s ease, color 0.5s ease;
}

body.dark{
   background-color: #191c40 ; 
}


/* fonts */
h1, h2, h3 {
    letter-spacing: 2px;
}

h1{
    font-family: 'Libre Bodoni', 'Times New Roman', Times, serif;
}
h2, .navbar, button{
    font-family: 'Libre Baskerville', 'Times New Roman', Times, serif;
}
p {
    font-family: 'Libre Franklin', sans-serif;
}

/* nav */
.navbar {
    background-color: #2D3135;
    display: flex;
    justify-content: center;
    position: fixed;
    gap: 60px;
    padding: 20px 20px 20px 20px;
    top: 0;          
    left: 0;         
    width: 100%;     
    z-index: 100;   
}

.navbar a, .navbar button{
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1.5px;
    transition: color 0.3s ease;
    background: none;
    border: none;
}

.navbar a:hover {
    color: #C5A86B;
}
.navbar button:hover {
    color: #C5A86B;
    cursor: pointer;
}



/* hero */
.hero-section {
    background-color: #2D3135;
    text-align: center;
    padding: 240px 20px 240px 20px;
    position: relative;
    transition: background-color 0.5s ease, color 0.5s ease;
}

body.dark .hero-section {
    background-color: #1E1E1E;
}

.hero-title {
    color: #ffffff;
    font-size: 96px;
    font-weight: 700;
    margin-bottom: 12px;
}

.hero-subtitle {
    color: #ffffff;
    font-size: 48px;
    letter-spacing: 5px;
    font-weight: 500;
}

/* no photo pls */
.profile-avatar {
    width: 360px;
    height: 360px;
    background-color: #f7f7f7;
    border-radius: 40px;
    position: absolute;
    bottom: -200px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
    z-index: 10;
}

/* about me woohoo */
.about-section {
    padding: 520px 20px 360px 20px;
    text-align: center;
    background-color: #ffffff;
    max-width: 720px;
    margin: 0 auto;
    transition: background-color 0.5s ease, color 0.5s ease;
}

body.dark .about-section{
    background-color:#191c40;
}

.section-title {
    font-size: 72px;
    font-weight: 700;
    margin-bottom: 35px;
    text-align: center;
}

.gold-text {
    color: #BFA36A;
}

.about-text {
    color: #BFA36A;
    font-size: 24px;
    line-height: 1.8;
    font-weight: 400;
}

/* what do i do gang */
.hobbies-section {
    background-color: #F1E5CE;
    padding: 360px 0 0 0;
    position: relative;
    transition: background-color 0.5s ease, color 0.5s ease;
}

body.dark .hobbies-section {
    background-color: #1E1E1E;
}

.dark-blue-text {
    color: #131735;
    margin-bottom: 60px;
    transition: color 0.5s ease, color 0.5s ease;
}

body.dark .dark-blue-text {
    color: #F1E5CE;
}


/* call me */
.hobbies-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 160px;
    max-width: 80%;
    margin: 0 auto;
    align-items: start;
    padding: 40px 20px;
}

.left-column-group {
    display: flex;
    flex-direction: column;
    gap: 0px;

}

.right-column-group {
    height: 100%;
}

/* Cards Content Formatting */
.hobby-card {
    padding: 80px 64px;
    color: #ffffff;
}

.hobby-card h2, .fun-fact-card h2 {
    font-size: 48px;
    font-weight: 600;
    margin-bottom: 20px;
}

.hobby-card p, .fun-fact-card p {
    font-size: 24px;
    line-height: 1.7;
    font-weight: 300;

}

.space-top {
    margin-top: 240px;
}

/* Left Navy Blue Blocks */
.navy-card {
    background-color: #131735;
}

.main-left-card {
    border-top-left-radius: 48px;
    border-top-right-radius: 48px;
    padding-bottom: 240px;
    height: 150%;
    z-index: 2;
}

/* Custom asymmetric shape for Fun Fact Card */


.fun-fact-button {
    background-color: transparent; /* Removes background filling */
    color: #F1E5CE;                /* Text matches the border color */
    border: none;     /* Clean, defined outer border */
    font-size: 72px;
    cursor: pointer;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 36px;
    text-align: left;
    transition: all 0.3s ease;     /* Smooth hover state animation */
}

/* Hover state interaction */
.fun-fact-button:hover {
  background-color: #BFA36A;     /* Fills the background */
  color: #ffffff;                /* Flips the text color to contrast */
}

.fun-fact-text {
    text-align: left;
}
.fun-fact-card {
    padding: 480px 240px 540px 240px;
    margin-top: -64px;
    position: relative;
    color: #F2E7C9;
    z-index: 5;
}

#fun-fact {
    font-size: 32px;
    display: none;
}

/* Right Slate Purple Blocks */
.slate-card {
    background-color: #434871;
}

.main-right-card {
    border-top-left-radius: 48px;
    border-top-right-radius: 48px;
    padding-bottom: 160px;
    margin-bottom: -20px; /* Pulls column down to organically merge into Contacts */
    height: 150%;
    position: relative;
    z-index: 4;
}

/* Contacts Block */
.contacts-section {
    background-color: #434871;
    color: #ffffff;
    padding: 400px 20px 400px 20px;
    text-align: center;
    border-top-left-radius: 90px; /* Left shoulder curve transition */
    margin-top: -100px;
    position: relative;
    z-index: 6;
}

.cream-text {
    color: #F1E5CE;
    font-size: 72px;
    margin-bottom: 120px;
}

.contacts-grid {
    display: flex;
    justify-content: center;
    gap: 120px;
    max-width: 120px;
    margin: 0 auto;
}

.contact-item h2 {
    font-size: 48px;
    color: #ffffff;
    margin-bottom: 18px;
    font-weight: 600;
}

.contact-item p, .contact-item a {
    font-size: 32px;
    color: #ffffff;
    text-decoration: none;
    line-height: 1.7;
    font-weight: 300;
}

.contact-item a:hover {
    text-decoration: underline;
}

/* Bottom Footer Block */
.footer {
    background-color: #ffffff;
    text-align: left;
    padding: 35px 60px;
    transition: background-color 0.5s ease, color 0.5s ease; 
}
body.dark .footer{
    background-color: #2D3135;
}

.footer p {
    font-size: 24px;
    color: #2D3135;
    letter-spacing: 0.5px;
    font-weight: 500;
    transition: color 0.5s ease, color 0.5s ease;
}

body.dark p{
   color: #ffffff;
}

/* Responsive Adaptive Layout Rules */
@media (max-width: 850px) {
    .hobbies-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .fun-fact-card {
        margin-left: 0;
        border-radius: 18px;
    }
    .main-right-card {
        border-radius: 18px;
        padding-bottom: 55px;
        margin-bottom: 0;
    }
    .contacts-section {
        border-radius: 0;
        margin-top: 0;
    }
    .contacts-grid {
        flex-direction: column;
        gap: 50px;
    }
    .footer {
        padding: 35px 20px;
        text-align: center;
    }
}