/* Estilos para modo oscuro */

.dark-mode {
    background-color: #232323;
    color: #F5F4F4;
}

.dark-mode .header__nav {
    animation: enganchar_nav_dark linear both;
    animation-timeline: scroll(root);
    animation-range: 0 100px;
}

.dark-mode .proyectos{
    background-color: #383838;
}

.dark-mode .proyectos__contenido{
    background-color: #232323;
}

.dark-mode .conocimientos__card{
    background-color: #383838;
}

.dark-mode .conocimientos__card h2{
    border-bottom: 1px solid #F5F4F4;
}

.dark-mode .sobremi h2{
    border-bottom: 1px solid #F5F4F4;
}

.dark-mode footer{
    background-color: #050505;
}

.dark-mode .contacto__info{
    background-color: #050505;
}

.dark-mode .form{
    background-color: #050505;
}

.dark-mode .form__input{
    background-color: #232323;
    border: 1px solid #6b6b6b;
}

.dark-mode .form__input:focus{
    border-color: #6b6b6b;
}

.dark-mode .ola{
    background: url(./img/wave-dark.png);
    width: 100%;
    height: 100px;
    background-size: 1000px 100px;
}

.dark-mode .tooltip-container button{
    background-color: #050505;
}

.dark-mode .tooltip-container button:hover {
    background-color: #bc9ae956;
}

.dark-mode .inicio h3{
    background-color: #000000c0;
    text-shadow: 1px 1px 3.5px rgb(97, 95, 95);
    background-image: linear-gradient(45deg, #000000, #000000);
}

.dark-mode .switch-container{
    animation: enganchar_nav_dark linear both;
    animation-timeline: scroll(root);
    animation-range: 0 100px;
}

.dark-mode .video_card{
    background-color: #232323;
    border: 2px solid #aa74ec;
}

.dark-mode .video_card footer{
    background-color: transparent;
}

@keyframes enganchar_nav_dark {
    to {
        background-color: #232323;
    }
}