/*This css file holds all of the styling for the navbar.*/
#color-bg {
    height: 100vh;
    width: 100vw;
    margin: 0px;
    background-color: rgb(134, 134, 134);

    /*background-image: linear-gradient(
        rgb(28, 13, 46, 1),
        rgb(187, 163, 25, 1)
      );*/
    background-size: cover;
    background-position: 0% center;
    position: relative;
    z-index: 2;

    transition: transform 500ms cubic-bezier(.13, .53, .38, .97);
}

body[data-nav="true"] > #color-bg{
    transform: translateX(25%);
}

#navToggle{
    height:3rem;
    width:3rem;
    position:fixed;
    z-index: 3;
    top: 2rem;
    left: 2rem;
    transform:translateX(-25%) translateY(-25%);
    background-color:  rgb(117, 59, 117);
    border: none;
    border-radius: 3rem;
    outline: none;
    box-shadow: 0rem 0rem 4rem rgba(0 0 0 / 35%);
    cursor: pointer;

    transition: transform, background-color;
    transition-timing-function: ease;
    transition-duration: 400ms;
}
#navToggle:hover{
    transform: translateX(1%) translateY(1%) scale(1.1);
}
#navToggle:active{
    transform: translateX(1%) translateY(1%) scale(0.9);
}
#navToggle > i{
    position:absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    color: rgb(246, 231, 224);
    font-size: 1.75rem;
    opacity: 0;

    transition: transform, opacity;
    transition-timing-function: ease;
    transition-duration: 400ms;
}

body:not([data-nav="true"]) > #navToggle:hover > .open{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
body[data-nav="true"] > #navToggle > .close{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

#nav-links{
    display: flex;
    flex-direction: column;
    
    margin-top: 5.5rem;
    margin-left: clamp(2rem, 1rem, 3vh);
    gap: 1rem;

    transform: translateX(70%) scale(0.8);
    transition: transform 500ms cubic-bezier(.13, .53, .38, .97), opacity 400ms;
}

body[data-nav="true"] > header > nav > #nav-links{
    transform: translateX(0%) scale(1);
}

.nav-link{
    transition: opacity 400ms, transform 400ms;
}

#nav-links:hover > .nav-link{
    transform: scale(0.9);
    opacity: 0.3;
}

#nav-links:hover > .nav-link:hover{
    transform: scale(1.1);
    opacity: 1;
}

#nav-links > .nav-link{
    text-decoration: none;
}

#nav-links > .nav-link > .nav-link-label{
    color: rgb(246, 231, 224);
    font-size: 1.25;
    margin: 0px;
    text-transform: uppercase;
}


#socials{
    display: flex;

    margin-top: 0rem;
    margin-left: clamp(2rem, 1rem, 3vh);
    gap: 1rem;

    transform: translateX(70%) scale(0.8);
    transition: transform 500ms cubic-bezier(.13, .53, .38, .97), opacity 400ms;
}

.social-link{
    transition: transform 400ms, opacity 400ms;
}

body[data-nav="true"] > header > nav > #socials{
    transform: translateX(0%) scale(1)
}

#socials:hover > .social-link{
    transform: scale(0.9);
    opacity: 0.3;
}

#socials:hover > .social-link:hover{
    transform: scale(1.1);
    opacity: 1;
}

#socials > .social-link{
    text-decoration: none;
}

#socials > .social-link .social-label{
    font-size: 1.25;
    text-transform: uppercase;
    margin: 0px;
}