.container-list {

    margin-top:20px;
    background: var(--nav-color);
    height: 35px;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.list {
    width: fit-content;
    height: fit-content;
    display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns: repeat(6, 200px);
}

.list a, .list div {
    text-align: center;
    font-size: 30px;
    color: var(--nav-text-color);
}

.list a:hover {
    animation: var(--animation-umfla) 1s ease-out;
    font-size: 30px;
    background-color:var(--nav-hover);
}
.to-drop a:hover {
    animation: var(--animation-umfla) 1s ease-out;
    font-size: 30px;
    background-color:var(--nav-hover);
}

.drop-down:hover {
    animation: var(--animation-umfla) 1s ease-out;
    background-color:var(--nav-hover);
}
.drop-down{
    cursor: pointer;
    height: fit-content;
}
.to-drop {
    z-index: 1;
    margin-top:-6px;
    width: fit-content;
    text-align: center;
    background: var(--bg-drop-down);
    display: var(--display);
    position: absolute;
}
.show{
    --display:grid;
    justify-content: center;
    align-items:center;
}

.to-drop a {
    width: 200px;
}