:root {
    --text: #ffffff;
    --background: #232323;
    --primary: #490386;
    --secondary: #dedcff;
    --accent: #7712ca;
}


.wrapper {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 15px;
}

#nav-wrapper {
    background-color: rgb(87, 31, 145);
    height: 125px;
}

#nav-primary ul {
    display: flex; /* make the list items flex */
    margin-top: 0;
}

#nav-primary li {
    list-style: none; /* remove default browser bullet styles */
    flex-grow: 1; /* This will evenly distribute each list item */
    text-align: center; /* center align text */
    height: 125px; /* make the height of each list item 125px */
    font-size: 16px; /* make the font 16px in size */
}

#nav-primary a {
    display: block; /* Expand anchor area to fill space to the parent list item's area (making hover area larger) */
    height: 100%; /* Make the anchor element 100% in height of its parent, or 125px in height */
    text-decoration: none; /* remove default browser underline styling for anchor elements */
    color: #fff; /* make text white */
    position: relative; /* Inner elements will be absolute positioned to this relative element */
    overflow: hidden;
}

.li-name {
    position: absolute; /* position absolute of parent element */
    left: 0; /* position text to the very left of parent */
    bottom: 30px; /* position text 30px from bottom of parent element */
    width: 100%; /* make text 100% of parent (as we are already centering text in a parent #nav-primary li, this title will be nicely centered  */
}

.feh-icon {
    opacity: 0.3; /* make icon less prominent */
    transition: all 0.3s ease; /* as we will be animating this, we need to add a transition declaration */
    font-size: 32px; /* increase the icon */
    position: absolute; /* position the icon absolutely to the parent element */
    transform: translateX(-50%); /* center align icon, horizontally */
    left: 50%; /* center align icon, used in conjunction with the translateX(-50%) value  */
    top: 30px; /* align icon 30px from the top of the parent element */
}

.feh-icon-bg {
    position: absolute; /* position the icon absolutely to the parent element */
    transform: translate(-50%, -50%) scale(0); /* first we center align the icon, then we scale it down to 0, making it invisible */
    top: 50%; /* center align icon (vertically), used in conjunction with the translate(-50%, -50%) value */
    left: 50%; /* center align icon (horizontally), used in conjunction with the translate(-50%, -50%) value */
    font-size: 70px; /* Make the icon larger */
    opacity: 0.2; /* bring the white icon down in opacity as it will only be used for the background aesthetic */
}

#indicator {
    position: absolute; /* position the icon absolutely to the parent element */
    width: 100%; /* to see how this element will look, I'm setting the width as 100% for illustrative purposes - please change this back to 0 */
    height: 100%; /* 100% height of our parent element */
    background: rgb(35, 35, 35); /* pink background */
    top: 0; /* aligning to the top of parent element */
    left: 0; /* aligning to the left of parent element */
    transition: all 0.3s ease; /* as we will be animating this, we need to add a transition declaration */
}

@keyframes navIconHoverIn {
    0% {
        top: 30px;
    }
    50% {
        top: -50px;
    }
    100% {
        top: 30px;
        opacity: 1;
    }
}

@keyframes navIconHoverOut {
    0% {
        top: 30px;
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
    
    }
}

#nav-primary li:hover .feh-icon {
    animation-name: navIconHoverIn;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-duration: 275ms;
    animation-delay: 155ms;
}

#nav-primary li:not(:hover) .feh-icon {
    animation-name: navIconHoverOut;
    animation-timing-function: ease-in-out;
    animation-fill-mode: backwards;
    animation-duration: 225ms;
    animation-delay: 100ms;
}

@keyframes navIconBGHoverIn {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(2) rotate(45deg);
        opacity: 0.2;
    }
}

@keyframes navIconBGHoverOut {
    0% {
        transform: translate(-50%, -50%) scale(2) rotate(45deg);
        opacity: 0.2;
    }
    100% {
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
        opacity: 0;
    }
}

#nav-primary li:hover .feh-icon-bg {
    animation-name: navIconBGHoverIn;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-duration: 225ms;
    animation-delay: 175ms;
}

#nav-primary li:not(:hover) .feh-icon-bg {
    animation-name: navIconBGHoverOut;
    animation-timing-function: ease-in-out;
    animation-fill-mode: backwards;
    animation-duration: 150ms;
    animation-delay: 125ms;
}

.fade-out {
    opacity: 0;
}

.fade-in {
    opacity: 1;
}