/*======================================================
    OLIVER RIDLEY
    HEADER & NAVIGATION

======================================================*/


/*======================================================
    HEADER
======================================================*/

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    padding:22px 8%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:rgba(6,8,13,.82);

    backdrop-filter:blur(22px);

    border-bottom:1px solid rgba(255,255,255,.08);

    z-index:1000;

}


/*======================================================
    LOGO
======================================================*/

.logo-link{

    display:flex;

    align-items:center;

}

.logo{

    width:100px;

    border-radius:50%;

    transition:.35s ease;

}

.logo:hover{

    transform:scale(1.05);

}


/*======================================================
    NAVIGATION
======================================================*/

nav{

    display:flex;

    align-items:center;

    gap:36px;

}

nav a{

    position:relative;

    font-size:.95rem;

    font-weight:500;

    letter-spacing:.5px;

    color:white;

    transition:.3s;

}


/* underline animation */

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--blue);

    transition:.35s ease;

}

nav a:hover{

    color:var(--blue);

}

nav a:hover::after{

    width:100%;

}


/*======================================================
    ACTIVE PAGE
======================================================*/

nav a.active{

    color:var(--blue);

}

nav a.active::after{

    width:100%;

}


/*======================================================
    MOBILE
======================================================*/

@media (max-width:900px){

    header{

        flex-direction:column;

        gap:20px;

        padding:20px;

    }

    nav{

        flex-wrap:wrap;

        justify-content:center;

        gap:18px;

    }

}

@media (max-width:550px){

    .logo{

        width:65px;

    }

    nav{

        gap:15px;

    }

    nav a{

        font-size:.9rem;

    }

}