@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,800);
@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url(https://fonts.googleapis.com/css?family=Montserrat);
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,200);
@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&display=swap);

body {
    font-family: 'Roboto', sans-serif;
}

.text-zise-5 {
    font-size: 20px;
    border: 2px solid blue;
    padding: 10px;
}

.fondo_gris {
    background-color: #E1E4E6;
}

.fondo_negro {
    background-color: #000000;
}

.fondo_gris_opaco {
    background-color: #EEF0F1;
}

.hover_fondo_blanco:hover {
    background-color: #f2f2f2;
    border-radius: 8px;
}

.loader {
    width: 45px;
    aspect-ratio: .75;
    --c: no-repeat linear-gradient(#000 0 0);
    background:
        var(--c) 0% 100%,
        var(--c) 50% 100%,
        var(--c) 100% 100%;
    background-size: 20% 65%;
    animation: l5 1s infinite linear;
}

@keyframes l5 {
    20% {
        background-position: 0% 50%, 50% 100%, 100% 100%
    }

    40% {
        background-position: 0% 0%, 50% 50%, 100% 100%
    }

    60% {
        background-position: 0% 100%, 50% 0%, 100% 50%
    }

    80% {
        background-position: 0% 100%, 50% 100%, 100% 0%
    }
}

/*hacer grande alguno cuando hace hover*/
.grow:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

/*hacer estilo escribir como maquina de escribir*/
.typewrite {
    border-right: 2px solid;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
}

/*animar estilo suave*/
.divAnimado {
    opacity: 0;
    /* Inicialmente el div está invisible */
    animation: fadeIn 2s ease-out forwards;
    /* Nombre de la animación, duración, cómo se acelera/desacelera y cómo termina */
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}