/* =====================================================
   CAPACITA ENFERMERÍA
   COMPONENTES GLOBALES
===================================================== */

/* =====================================================
   RESET
===================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* =====================================================
   HTML
===================================================== */

html{
    scroll-behavior:smooth;
}

/* =====================================================
   BODY
===================================================== */

body{

    font-family:var(--font-family);

    color:var(--color-text);

    background:var(--color-background);

    min-height:100vh;

    overflow-x:hidden;

}

/* =====================================================
   IMÁGENES
===================================================== */

img{

    display:block;

    max-width:100%;

}

/* =====================================================
   ENLACES
===================================================== */

a{

    text-decoration:none;

    color:inherit;

}

/* =====================================================
   INPUTS
===================================================== */

input{

    width:100%;

    font-family:inherit;

    font-size:var(--font-text);

    border:none;

    outline:none;

    background:none;

    color:var(--color-text);

}

/* =====================================================
   BOTONES
===================================================== */

button{

    font-family:inherit;

    border:none;

    cursor:pointer;

}

/* =====================================================
   LISTAS
===================================================== */

ul{

    list-style:none;

}

/* =====================================================
   SELECCIÓN DE TEXTO
===================================================== */

::selection{

    background:var(--color-primary);

    color:white;

}

/* =====================================================
   SCROLLBAR
===================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--color-background);

}

::-webkit-scrollbar-thumb{

    background:var(--color-primary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--color-primary-hover);

}

/* =====================================================
   ANIMACIONES
===================================================== */

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(30px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes fade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:768px){

    html{

        font-size:95%;

    }

}

@media(max-width:480px){

    html{

        font-size:92%;

    }

}