nav {
    top: 0;
    right: 0;

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

    background-color: white;

    height: 100%;
    position: sticky;
    width: 20%;

}

nav::before {
    content: "";
    position: absolute;
    top: 15%;
    bottom: 15%;
    left: 0;
    width: 3px;
    background: #ababab;
    border-radius: 30px;
}

@media (width >= 1920px) {
    ul {
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: center;
    }
    
    ul li {
        display: flex;
        justify-content: left;
        list-style: none;
        padding-left: 25%;
        align-items: center;
    }
    
    .option, a {
        text-decoration: none;
        font-size: 20px;
        color: rgb(57, 57, 57);
        transition: font-size 1s;
    }
    
    .option:hover, a:hover {
        font-size: 22.5px;
    }
    
    .div_logo {
        display: flex;
        justify-content: center;
    }
    
    .logo {
        width: 300px;
        cursor: pointer;
        object-fit: cover;
    }
    
    .icons {
        width: 30px;
        margin-left: 15px;
    }
    
    .settings_icon {
        width: 30px;
        margin-left: 15px;
        transition: transform 1s;
        transform-origin: center;
    }
    
    .settings_icon.active {
        transform: rotate(180deg);
    }
    
    .settings_text.active {
        font-size: 22.5px;
    }
    
    .formLogout {
        display: flex;
        justify-content: flex-start;
        padding:0;
        margin:0;
    }

    .logoutButton {
        font-size: 20px;
        border: none;
        background-color: transparent;
        color: rgb(57, 57, 57);
        transition: font-size 1s;
    }

    .logoutButton:hover {
        font-size: 22.5px;
        cursor: pointer;
    }
}


/* Pequeño (zoom alto o pantalla pequeña 
   Pantallas de 1920x1080 o menos

*/
@media (width <= 1920px) {
    
    ul {
        display: flex;
        flex-direction: column;
        gap: 15px;
        justify-content: center;
    }
    
    ul li {
        display: flex;
        justify-content: left;
        list-style: none;
        padding-left: 25%;
        align-items: center;
    }
    
    .option, a {
        text-decoration: none;
        font-size: 15px;
        color: rgb(57, 57, 57);
        transition: font-size 1s;
    }
    
    .option:hover, a:hover {
        font-size: 18.5px;
    }
    
    .div_logo {
        display: flex;
        justify-content: center;
    }
    
    .logo {
        width: 250px;
        cursor: pointer;
    }
    
    .icons {
        width: 22.5px;
        margin-left: 12.5px;
    }
    
    .settings_icon {
        width: 25px;
        margin-left: 13px;
        transition: transform 1s;
        transform-origin: center;
    }
    
    .settings_icon.active {
        transform: rotate(180deg);
    }

    .settings_text.active {
        font-size: 18.5px;
    }

    .formLogout {
        display: flex;
        justify-content: flex-start;
        padding:0;
        margin:0;
    }

    .logoutButton {
        font-size: 15px;
        border: none;
        background-color: transparent;
        color: rgb(57, 57, 57);
        transition: font-size 1s;
    }

    .logoutButton:hover {
        font-size: 18.5px;
        cursor: pointer;
    }
}