@font-face {
    font-family: OptimusPrincepsSemiBold;
    src: url(../assets/fuentes/OptimusPrincepsSemiBold.ttf);
}

/* Estilos generales */
* {
    margin: 0;
    padding: 0;
}
h2, p{
    font-family: OptimusPrincepsSemiBold;
}
h2 {
    font-size: 20px;
}
p {
    font-size: 14px;
}
.tamañoLetra {
    font-size: 22px;
}
.colorBlanco {
    color: white;
}
.colorNaranja {
    color: orangered;
}
.colorRojo {
    color: red;
}

/* Estilos para la pantalla de carga */
*,*:After, *:before {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#contenedor_carga {
    background-image: none;
    background-color: rgb(250, 240, 245, 0.9);
    width: 100%;
    height: 100%;
    position: fixed;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    z-index: 10000;
}
#carga {
    border: 10px solid rgb(0, 0, 0);
    border-top-color:  #f80000;
    border-top-style: double;
    width: 75px;
    height: 75px;
    border-radius: 100%;


    -webkit-animation: girar 1.5s linear infinite;
    -o-animation: girar 1.5s linear infinite;
    animation: girar 1.5s linear infinite;
}
@keyframes girar {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.bannerCarga {
    width: 100%;
    height: 100vh;
    background-image: url(../assets/img/banners/bannerCarga.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.bannerCargaDos {
    width: 100%;
    height: 100vh;
    background-image: url(../assets/img/banners/bannerCargaDos.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.bannerCargaTres {
    width: 100%;
    height: 100vh;
    background-image: url(../assets/img/banners/bannerCargaTres.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.bannerCargaCuatro {
    width: 100%;
    height: 100vh;
    background-image: url(../assets/img/banners/bannerCargaCuatro.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Estilos para la primera pantalla */
.contenedorPrimero{
    height: 100vh;
    display: flex;
    align-content: space-around;
}
.bannerPrincipal {
    width: 100%;
    height: 100vh;
    background-image: url(../assets/img/banners/bannerPrincipal.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.logoCarrusel {
    width: none;
    height: 50vh;
    animation: rollIn 2s;
}
.btnJugar {
    width: 150px;
    height: 50px;
    cursor: pointer;
}
.btnUltimoHeroe {
    cursor: pointer;
}

/* Estilos para la segunda pantalla */
.contenedorSegundo{
    height: 100vh;
}
.carousel {
    height: 90%;
}
.bannerEleccion {
    width: 100%;
    height: 100vh;
    background-image: url(../assets/img/banners/bannerPaginaEleccion.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.mensajeEleccion{
    font-size: 50px;
}
.personajesGuerrero {
    width: 800px;
    height: 95%;
}
.btnEleccionPersonaje {
    width: 150px;
    height: 50px;
    cursor: pointer;
}

/* Estilos para la tercer pantalla */
.personajesMonstruo {
    width: 800px;
    height: 95%;
}
.btnIrBatalla {
    width: 150px;
    height: 50px;
    cursor: pointer;
}

/* Estilos para la pantalla de batalla*/
.contenedorTercero {
    height: 100vh;
    display: flex;
    align-content: space-around;
    justify-content: space-around;
}
.bannerBatalla {
    width: 100vw; 
    height: 100vh;
    background-image: url(../assets/img/banners/paredBatalla.jpg);
    background-size: cover;
    background-position: center;
}
.bannerDatosPersonajes{
    width: 500px;
    background-image: url(../assets/img/banners/bannerDatosPersonajes.jpg);
    border-radius: 20px;
    opacity: 0.8;
}
.barraPrincipal {
    width: 90vw;
    background-image: url(../assets/img/banners/tablaMensajes.jpg);
    background-repeat: no-repeat;
    border-radius: 20px;
    opacity: 0.8;
}
.contenedorAcciones {
    height: 200px;
    display: flex;
    align-content: space-around;
}
.btnAcciones {
    width: 100%;
    height: 75px;
    cursor: pointer;
}
.btnAccionesDos {
    width: 50%;
    height: 75px;
    cursor: pointer;
}
.icons {
    width: 20px;
    height: 20px;
}
.jugadorHeroe {
    width: 300px;
    height: 250px;
    
}

/* Estilos para la pagina de victoria*/
.bannerVictoria {
    width: 100vw; 
    height: 100vh;
    background-image: url(../assets/img/banners/bannerVictoria.jpg);
    background-size: cover;
    background-position: center;
}
.movimientoVictoria {
    width: 400px;
    animation: zoomInDown 2s;
}
/* Estilos para la pagina de derrota */
.bannerDerrota {
    width: 100vw; 
    height: 100vh;
    background-image: url(../assets/img/banners/bannerDerrota.jpg);
    background-size: cover;
    background-position: center;
}
.movimientoDerrota {
    width: 400px;
    animation: rotateOutDownLeft 2s;
}

@media only screen and (max-width: 599px) {
    .tamañoFuenteH2 {
        font-size: 10px;
    }
    .tamañoLetra {
        font-size: 10px;
    }
    p{
        font-size: 8px;
    }
    .logoCarrusel {
        width: 100%;
        height: 100%;
        animation: rollIn 2s;
    }
    .personajesGuerrero {
        width: 100%;
        height: 95%;
    }
    .personajesMonstruo {
        width: 100%;
        height: 95%;
    }
    .bannerDatosPersonajes{
        width: 150px;
    }
    .jugadorHeroe {
        width: 70%;
        height: 100%;
    }
    .contenedorAcciones {
        height: 200px;
        display: flex;
        flex-direction: column;
        align-content: flex-start;
    }
    .btnAcciones {
        width: 100px;
        height: 40px;
        cursor: pointer;
    }
    .movimientoVictoria {
        width: 200px;
    }
    .movimientoDerrota {
        width: 200px;
    }
    .landscape{
        height: 10px;
    }
    
}
@media only screen and (min-width: 500px) and (max-width: 739px) and (orientation: landscape) {
    .tamañoFuenteH2 {
        font-size: 10px;
    }
    .tamañoLetra {
        font-size: 10px;
    }
    p{
        font-size: 8px;
    }
    .logoCarrusel {
        display: none;
    }
    .personajesGuerrero {
        width: 85%;
        height: 90%;
    }
    .personajesMonstruo {
        width: 85%;
        height: 90%;
    }
    .jugadorHeroe {
        width: 60px;
        height: 60px;
    }
    .bannerDatosPersonajes{
        width: 200px;
    }
    .contenedorAcciones {
        height: 100px;
        display: flex;
        flex-direction: column;
        align-content: flex-start;
    }
    .btnAcciones {
        width: 70px;
        height: 50px;
        cursor: pointer;
    }
    .landscape{
        height: 10px;
    }
}
@media only screen and (min-width: 740px) and (max-width: 990px) and (orientation: landscape) {
    .tamañoFuenteH2 {
        font-size: 10px;
    }
    .tamañoLetra {
        font-size: 10px;
    }
    p{
        font-size: 8px;
    }
    .logoCarrusel {
        display: none;
    }
    .personajesGuerrero {
        width: 80%;
        height: 90%;
    }
    .personajesMonstruo {
        width: 80%;
        height: 90%;
    }
    .jugadorHeroe {
        width: 60px;
        height: 80px;
    }
    .bannerDatosPersonajes{
        width: 300px;
    }
    .contenedorAcciones {
        height: 100px;
    }
    .btnAcciones {
        width: 100px;
        height: 50px;
        cursor: pointer;
    }
    .landscape{
        height: 10px;
    }
    .movimientoVictoria {
        width: 200px;
        height: 200px;
    }
    .movimientoDerrota {
        width: 200px;
        height: 200px;
    }
}