header {
    height: auto;

    position: relative;
}
.nav-top {
    position: relative;
    width: 100%;
    height: 60px;
}

.nav-logo {
    position: absolute;
    left: 3%;
    height: 100%;
}

.nav-logo img{
    height: 100%;
}

.nav-burger-menu {
    position: absolute;
    right: 3%;
    height: 50%;
    cursor: pointer;

    top: 50%;
    transform: translate(0%, -50%);
}

.nav-burger-menu img {
    height: 100%;

}

.nav-buttons {
    /* background-color: #800000; */
    background: linear-gradient(135deg, #0e0e10 0%, #1c1c22 100%);
    border-right: 4px solid #D4AF37; /* Pulls the gold from your top logo */
    backdrop-filter: blur(10px);

    overflow: hidden;
    max-height: 0;
    display: flexbox;
    flex-direction: column;

    font-family: Oswald;
    font-size: 2vw;
    text-align: right;
    padding-right: 40px;

    transition: max-height 0.5s ease;
}
.nav-buttons li {
    margin: 20px 0;
}

.nav-buttons a {
    color:  white;
}

/* 3. Desktop Only Configs */
@media (min-width: 721px) { 
}

/* 3. Mobile / Small Screens (600px and below) */
@media (max-width: 720px) { 
    .nav-buttons {
        font-size: 4vw;
    }
    .nav-logo {
        top: 50%;
        transform: translate(0%, -50%);
        width: 70%;
        height: auto;
    }

    .nav-logo img{
        width: 70%;
        height: auto;
    }

}