/* 0. RESET and GLOBAL STYLES*/
*{
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}

/* 1. BACKGROUND BODY*/

body {
    background-color: #dcdcdc;
    font-family: 'Cascadia Code', Tahoma, Geneva, Verdana, sans-serif;
    color:#191919;
    min-height: 100vh;
    display:flex;
    flex-direction:column;
}

/* 2. NAVIGATION BAR (HEADER)*/


.landing-header {
    width: 100%;
    padding: 40px 0;
}

.landing-header nav {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.nav-link {
    color: #191919;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #f46653;
}

.index-home {
    font-size: 13px;
    color:#f46653;
    letter-spacing: 1px;
    font-weight: 600;
}

.index-home:hover {
    color: #191919;
}

/* 3.1. MAIN CONTAINER - HERO LAYOUT */

.main-container {
    flex: 1;
    display:flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
}

/* 3.2. SALMON GLOW EFFECT */

.bg-glow {
    position: absolute;
    width:  500px;
    height: 500px;
    background: radial-gradient(circle, rgba(244, 102, 83, .8) 0%, rgba(244, 102, 83, 0) 80%);
    filter: blur(50px);
    z-index: 1;
    pointer-events: none;

/* GLOW SCALING-POSITIONING-TRANSITION*/
    transform: scale(1);
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

/* GLOW HOVER*/
.main-container:hover .bg-glow {
    transform: scale(1.5);
}


/* 4. HERO CONTENT - TEXTS AND LOGO */

.hero-content {
    position:relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-content img {
    width: 140px;
    margin-bottom: 5px;
}

.main-title {
    color: #f46653;
    font-size: 50px;
    line-height: .1;
    font-weight: 500;
    letter-spacing: -1px;
    margin-bottom: 30px;
}

.email-link {
    color:#191919;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    border-bottom: 1px solid transparent;
    transition: all 0.35 ease;
}

.email-link:hover {
    color: #dcdcdc;
}

/* 5. FOOTER AND CREDITS */

.site-footer {
    width: 100%;
    padding: 30px 0;
    text-align: center;
}

.credits-text {
    font-size: 11px;
    color:#f46653;
    letter-spacing: 1px;
    font-weight: 600;
}

/* ==========================================================================
   PROJECT PAGE (MOBILE STYLES)
   ========================================================================== */
.highlight-projects {
    font-size: 13px;
    color:#f46653;
    letter-spacing: 1px;
    font-weight: 600;
}

.highlight-projects:hover {
    color: #191919;
}






















/* ==========================================================================
   X. RESPONSIVE DESIGN (MOBILE STYLES)
   ========================================================================== */

/* This rule applies ONLY to screens smaller than 768px (tablets and mobiles) */
@media (max-width: 768px) {
    
    /* 1. Give the header comfortable breathing room on mobile */
    .site-header {
        padding: 25px 0;
    }

    /* 2. Separate menu links slightly less so they don't wrap tightly */
    .nav-menu {
        gap: 20px; /* Reduced from 40px */
    }

    /* 3. Reduce the title size so it doesn't break into multiple lines awkwardly */
    .main-title {
        font-size: 32px; /* Reduced from 50px */
    }

    /* 4. Shrink the background glow so it fits perfectly inside a mobile screen */
    .bg-glow {
        width: 280px; /* Reduced from 500px */
        height: 280px; /* Reduced from 500px */
        filter: blur(40px); /* Slightly sharper blur for smaller size */
    }
}