body {
    margin: 0%;
    width: 100%;
    font-family: 'Source Sans Pro', sans-serif;
    background-color: rgb(255, 69, 0);
    cursor: url(img/curscon.svg), auto;
}

header {
    display: flex;
    width: 100%;
    min-width: 10rem;
    justify-content: space-around;
    flex-wrap: wrap;

}


.cabeza {
    margin-top: 0.8rem;
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
    width: 80%;
    border: 0.2rem;
    border-color: black;
    border-style: solid;
    border-radius: 0.5vw;

}



.icono {
    width: 10%;
}

i.fa-solid {
    font-size: 3.5vw;
}


.titulo {
    border-left: 0.2rem;
    border-bottom: 0px;
    border-right: 0px;
    border-top: 0px;
    border-color: black;
    border-style: solid;
    width: 80%;

}

h1 {
    font-weight: 100;
    font-family: 'terminal grotesque';
    padding-bottom: 0.4vh;
    font-size: 5vw;
    /* font-size: 1vmin; */
    margin: 0;
}

.espheader {
    width: 100%;
    /* padding-bottom: 0.8rem; */
    border-top: 0.2rem;
    border-bottom: 0px;
    border-left: 0px;
    border-right: 0px;
    border-color: black;
    border-style: solid;


}

main {
    display: flex;
    width: 96%;
    margin-left: auto;
    margin-right: auto;
    min-width: 10rem;
    justify-content: space-around;
    flex-wrap: wrap;
    /* padding-bottom: 0.8rem; */
    border-top: 0px;
    border-bottom: 0.2rem;
    border-left: 0.2rem;
    border-right: 0.2rem;
    border-color: black;
    border-style: solid;
}


.cuadrito {
    width: 100%;
    /* padding-bottom: 0.8rem; */
    border-top: 0.2rem;
    border-bottom: 0px;
    border-left: 0px;
    border-right: 0px;
    border-color: black;
    border-style: solid;

}

.cuadro {
    margin-bottom: 0.8rem;
    margin-top: 0.8rem;
    min-width: 20vw;
    /* min-height: 10vh;
    height: 100%; */
    width: 90%;
    /* padding-bottom: 0.8rem; */
    border: 0.2rem;
    border-color: black;
    border-style: solid;
    border-radius: 1vw;
    /* overflow: auto; */
    white-space: nowrap;
    overflow: hidden;
    /* restaurar quitar lo de abajo */
    text-overflow: clip;
    /* restaurar quitar lo de arriba */
    /* overflow-y: hidden; */
    display: flex;
    align-items: center;
    padding-bottom: 0.3rem;
    padding-top: 0.3rem;
    /* cursor: url(../img/illus.svg), auto; */


}

.cuadro p {
    font-size: 15vmin;
    line-height: 120%;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    margin: 0;
    cursor:  url(img/curstris.svg), auto;


}

.cuadro p:hover {
    position: relative;
    animation-name: dere;
    animation-duration: 100s;
    animation-iteration-count: infinite;
    color: rgba(255, 255, 255, 0.302);
}



@keyframes dere {
    0% {
        right: 0%;
        top: 0px;
    }

    25% {
        right: 100%;

        top: 0px;
    }

    50% {
        right: 0%;
        top: 0px;
    }

    75% {
        right: 100%;
        top: 0px;
    }

    100% {
        right: 0%;
        /* left: 0px; */
        top: 0px;
    }
}


/* hori
 .cuadro {
    margin-top: 1.5rem;
    min-width: 20rem;
    width: 30%;
    max-height: 20rem;
    border: 0.2rem;
    border-color: black;
    border-style: solid;
    border-radius: 12px;
    overflow: scroll;
    overflow-x: hidden;
  
} */

/* hori
 .cuadro p {
    font-size:1.5rem;
    line-height: 120%;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    margin-top: 0;
} */


/* h1 {
    margin-bottom: 0.1rem;
    margin-left: 0.8rem;
    margin-right: 0.8rem;
} */

/* Tirador */

/* width */


::-webkit-scrollbar {
    width: 0.8rem;
}


/* Track */
::-webkit-scrollbar-track {
    /* box-shadow: inset 0 0 20px black;  */
    border-radius: 10px;
    border-right: 0;
    border-top: 0;
    border-bottom: 0;
    border-style: solid;
    border-color: black;



}

/* Handle */
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    border-right: 1.1pt;
    border-top: 2pt;
    border-bottom: 2pt;
    border-left: 2pt;
    border-style: solid;
    border-color: black;



}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgb(0, 0, 0);
    border-radius: 10px;
    border-right: 0;
    border-top: 0;
    border-bottom: 0;
    border-style: solid;
    border-color: black;

}

/* Tirador */

/* Tipos */

@font-face {
    font-family: 'build';
    src: local('build'),
        url('fonts/build.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

#uno {

    font-family: 'build';

}

@font-face {
    font-family: 'Galgo';
    src: url('fonts/Galgo.ttf');
}

#dos {
    font-family: 'Galgo';

}


@font-face {
    font-family: 'Mostera Regular';
    src: url('fonts/MosteraRegular.ttf');
}


#bicho {
    font-family: 'Mostera Regular';

}




@font-face {
    font-family: 'Solide Mirage Mono';
    src: url('fonts/SolideMirage-Mono.otf');
}

#cuatro {
    font-family: 'Solide Mirage Mono';

}

@font-face {
    font-family: 'PicNic Regular';
    src: url('fonts/PicNic-Regular.woff');
}

#cinco {
    font-family: 'PicNic Regular';

}

@font-face {
    font-family: 'terminal grotesque';
    src: url('fonts/terminal-grotesque.ttf');

}

#seis {
    font-family: 'terminal grotesque';


}