:root{
    --clr1: white;
    --clr2: rgb(197, 192, 192);
    --gold: #ffcc00;
    --yellow: #ffeb3b;
    --grad0: black;
    --grad40: #241c00;
    --grad100: #332a00;
}

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    border: none;
    text-decoration: none;
}

html{
    font-size: 62.5%; /* Eqeuates to 10px, Useful when dealing with rem sizes */
}

body{
    width:100%;
    min-height:100vh;
    color: var(--clr1);
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(180deg, var(--grad0) 0%, var(--grad40) 40%, var(--grad100) 100%);
    background-repeat: no-repeat;
    background-size:cover;
}

header{
    width: 100%;
    padding: 5rem 7%;
    justify-content: space-between;
    align-items: center;
    display: flex;
    z-index: 100;
    top:0;
}

#MenuImg{
    width:4rem;
}

.logo{
    color: var(--gold);
    font-size: 3.5rem;
    display: flex;
}
.logo img{
    width:4rem;
}

.navigation{
    list-style-type: none;
    display: flex;
    gap: 4rem;
}

#activeTab{
    color: var(--gold);
    border-bottom: 2px solid var(--gold);
}
.navigation a{
    color: var(--clr1);
    font-size: 2.2rem;
    transition: 0.1s;
    font-weight: 600;
}
.navigation a:hover{
    color: var(--gold);
    border-bottom: 2px solid var(--gold);
}

.menu-toggle {
    display: none; 
}

.menu-icon {
    display: none;
    font-size: 3.5rem;
    color: var(--gold);
}

@media (max-width: 900px) {
    header {
        padding: 2rem 5%;
        position: relative;
        background-color: var(--grad0);
    }

    .menu-icon{
        display: block;
    }

    .navigation{
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--grad0);
        flex-direction: column;
        align-items: center;
        gap: 2rem;

        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
    }

    .menu-toggle:checked ~ .navigation{
        max-height: 350px;
        padding: 2rem;
        border-bottom: 2px solid var(--gold);
    }
}