a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style-type: none;
}

.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}

nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: var(--ligther-color);
    margin: 0;
    display: flex;
    border-radius: 40px 40px 0px 0px;
    box-shadow: rgb(50 50 93 / 25%) 0 50px 100px 10px,
    rgb(0 0 0 / 30%) 0 30px 60px -30px;
}

nav ul {
    display: inline-flex;
    align-items: center;
    padding: 0;
    flex: 0 0 25%;
    justify-content: center;
}

nav :where(li a) {
    position: relative;
}

nav ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column-reverse;
    padding: 1em;
    line-height: 1.4;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

nav ul li a:hover {
    color: var(--primary-color);
}

nav ul li a i {
    font-size: 1.5rem;
}

nav ul li a span {
    font-size: 0.9rem;
}

/* animations */

nav li.active a::before, nav li.active a::after {
    content: "";
    position: absolute;
    background-color: var(--primary-color);
    z-index: -1;
}

nav li.active a::before {
    top: 5%;
    width: calc(100% - 0px);
    height: 100%;
    border-radius: 25px;
}

nav li.active a {
    color: var(--ligther-color);
}