html {
            background-color: #000;
            scroll-behavior: smooth;
}
body {
            font-weight: 700;
            color: #e0e0e0;
            line-height: 1.6;
            font-family: 'Rubik', sans-serif;
}
        


/* Header */
    
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    backdrop-filter: blur(20px); /* Blur effect */
    -webkit-backdrop-filter: blur(20px); /* Safari support */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 1000;
}
        
.logo {
    height: 50px;
}
.menu-icon {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}
.menu-icon div {
    width: 30px;
    height: 4px;
    background-color: #a8a8a8;
}
        
/* Dropdown Menu */
.nav {
            display: flex;
            gap: 15px;
        }
        .nav a {
            color: #e0e0e0;
            text-decoration: none;
            font-size: 1rem;
            cursor: pointer;
        }
        .nav a:hover {
            color: #ecc55a;
        }
        
        @media (max-width: 768px) {
            .menu-icon {
                display: flex;
            }
            .nav {
                display: none;
                position: absolute;
                top: 60px;
                right: 0;
                background-color: #171717;
                border: 1px solid rgba(255, 255, 255, 0.2);
                border-radius: 5px;
                width: 100%;
                flex-direction: column;
                z-index: 1000;
            }
            .nav.show {
                display: flex;
            }
            .nav a {
                padding: 15px;
                text-align: center;
                display: block;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            }
        }


.parisienne-regular {
            font-family: "Parisienne", cursive;
            font-weight: 400;
            font-style: normal;
        }

        
        .league-gothic-title {
            font-family: "League Gothic", sans-serif;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
            font-variation-settings: "wdth" 100;
        }


        .merriweather-about {
            font-family: "Merriweather", serif;
            font-optical-sizing: auto;
            font-weight: 600;
            font-style: normal;
            font-variation-settings:"wdth" 100;
        }