@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap');
/* ESTILOS UNIVERSALES */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*font-family: 'Mochiy Pop One', sans-serif;*/
    /*font-family: cursive;
    color: white;*/
}

/* ESTILOS CUERPO PÁGINA */
body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* FONDO ANIMADO */
@keyframes animatedBackground {
    from { 
        /*background-position: 0 0;*/
        filter: hue-rotate(0deg) blur(3px);
    }
    to { 
        /*background-position: -96em 0;*/
        filter: hue-rotate(360deg) blur(3px);
    }
}
#background{
    position: fixed;
    z-index: -1;
    width: 100%;
    height: 100vh;
    background: url(resources/images/nuevoFondo.jpg);
    background-attachment: fixed;
    background-repeat: repeat-x;
    background-size: cover;
    animation: animatedBackground 40s linear infinite;
}
/* NAVE FONDO */
@keyframes naveAparece {
    from {
        transform: translate(-70em,-10em) scale(0%) rotate(0deg);
    }
    to { 
        transform: translate(0,0) scale(100%) rotate(720deg); /* Da 2 giros completos */
    }
}
@keyframes naveDesaparece {
    from {
        transform: translate(0,0) scale(100%) rotate(720deg);
        opacity: 1;
    }
    to { 
        transform: translate(70em,-10em) scale(0%) rotate(0deg);
        opacity: 0;
    }
}
#nave{
    position: fixed;
    z-index: -1;
    animation: naveAparece 1s ease-in 1;
    /*animation-name: nave;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: 1;*/
}

/* CONTENEDOR */
.container-fluid{
    display: flex;
    flex-direction: column;
    /*justify-content:space-between;*/
    align-items: center;
    /*height: 100vh;*/
    align-self: baseline;
}

/* PARTE ARRIBA */
#header{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 23%;
}
@keyframes title {
    from {
        transform: translate(0,-15em);
    }
    to { 
        transform: translate(0,-4em);
    }
}
@keyframes title2 {
    from {
        transform: rotate(0deg);
    }
    25% { 
        transform: rotate(5deg);
    }
    75% { 
        transform: rotate(-5deg);
    }
    to { 
        transform: rotate(0deg);
    }
}
#title{
    width: 32%;
    animation: title 0.3s ease-in 1;
    display: none; /* Al principio está oculto */
    margin-top: -3em;
    margin-bottom: -4em;
    filter: drop-shadow(5px 5px 15px black);
}
/* BOTONES*/
#buttons{
    /*border: 1px solid red;*/
    width: 95%;
    position: absolute;
    /*right: 0;*/
    margin: 2em;
    display: flex;
    justify-content: space-between;
    display: none; /* Al principio está oculto */
    height: 8em;
    border-radius: 100px;
}
#buttons #left input{
    display: none;
}
#buttons #btnMute{
    position: fixed;
    box-shadow: 0px 5px 6px black;
    background-color: #0083ff;
    padding: 0.3em;
}
#buttons #right, #buttons #left{
    display: flex;
    flex-direction: column;
    /*border: 1px solid red;*/
    justify-content: space-between;
}
#buttons input{
    width: 55px;
    border-radius: 100%; 
}
#buttons input:hover{
    filter: brightness(90%); /* Más oscura */
}
#buttons input:active, #btnDiscord:active{
    transform: scale(110%);
}

/* CONTENIDO */
@keyframes open {
    from {
        transform: scale(0%);
    }
    to { 
        transform: scale(75%);
    }
}
/* (SIGUIENTE CUADRO) */
/* Cierra el cuadro abierto */
@keyframes close {
    from {
        transform: scale(100%) translateX(0) /*rotateY(0deg)*/;
    }
    to{
        transform: scale(25%) translateX(-250em) /*rotateY(180deg)*/;
    }
}
/* Abre el cuadro nuevo */
@keyframes reopen {
    from { 
        transform: scale(25%) translateX(250em) /*rotateY(180deg)*/;
    }
    to {
        transform: scale(100%) translateX(0) /*rotateY(0deg)*/;
    }
}
/* (ANTERIOR CUADRO) */
/* Cierra el cuadro abierto */
@keyframes close2 {
    from {
        transform: scale(100%) translateX(0) /*rotateY(0deg)*/;
    }
    to{
        transform: scale(25%) translateX(250em) /*rotateY(180deg)*/;
    }
}
/* Abre el cuadro nuevo */
@keyframes reopen2 {
    from { 
        transform: scale(25%) translateX(-250em) /*rotateY(180deg)*/;
    }
    to {
        transform: scale(100%) translateX(0) /*rotateY(0deg)*/;
    }
}
#contents{
    width: 100%;
    /*height: 100%;*/
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
#contents>div:first-child{
    margin: 16em !important;
    transform: translateY(-4em) !important;
}
.content{
    background-color: rgba(34 34 34/96%);
    /*display: flex;*/
    justify-content: center;
    align-items: center;
    color: white;
    width: 69%;
    /*bottom: 75px;
    position: absolute;*/
    padding: 10px 0;
    /*font-size: 15px;*/
    animation: open 0.2s ease-in 1;
    display: none !important; /* Al principio está oculto */
    /*border: 10px ridge rgb(128, 0, 28);*/
    border-radius: 20px;
    box-shadow: 10px 10px 19px black;
}
#subcontents{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.subcontent{
    display: flex;
    margin: 2em !important;
    width: 50% !important;
}
.subcontent div:first{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.subcontent:nth-child(2n){
    flex-direction: row-reverse;
}

/* TABLA DESCARGAS */
.content table{
    margin: 1em auto;
    width: 40em;
    border: 10px double;
    background-color: #1e382f;
    border-collapse: collapse;
    border-radius: 30px;
    border-style: hidden; /* hide standard table (collapsed) border */
    box-shadow: 0 0 5px 3px white; /* this draws the table border  */ 
}
.content table caption{
    color: brown;
    text-align: center;
}
.content tr{
    height: 3em;
}
.content tr, #content td, #content th{
    border: 1px solid;
}
/* ABAJO TABLA */
#btnDiscord{
    width: 69px;
}

/* BOTONES OPCIONES */
#options{
    /*border: 1px solid red;*/
    display: flex;
    width: 39%;
    flex-wrap: wrap;
    justify-content: center;
    /*margin-bottom: 1em;*/
    margin: 0 auto;
}
#options+h4{
    color: white !important;
}
#options button{
    transform: scale(119%);
    margin: 1.5em;
    margin-top: 1em;
}
#credits{
    display: flex;
    flex-direction: column;
}
iframe{
    width: 59% !important; 
    margin-bottom: 20px;
}

/* FAQ */
.accordion{
    text-align: left;
    margin: 1em !important;
    color: black;
    width: auto !important;
}
#faq .accordion-body{
    background-color: aquamarine;
}
#cc .accordion-body{
    display: flex;
    justify-content: space-evenly;
    /*align-items: center;*/
}
/* COLORES POR CC */
#iceGauntlet{
    background-color:deepskyblue;
}
#shadowGauntlet{
    background-color: blueviolet;
}
#starPack{
    background-color:rgb(0, 44, 95);
    flex-direction: column;
    color: #ffa;
    /* https://www.arsys.es/blog/efecto-resplandor-sombras-css */
    text-shadow: 0 0 10px #fff;
}
#starPack img{
    width: 25em;
    margin-top: 1em;
}
/*#summerEvent{
    background-color:aqua;
    /*flex-direction: column;*/
/*}*/
/*#halloweenEvent{
    background-color: rgb(77, 15, 15);
    flex-direction: column;
    color: white;
}*/
/*#christmasEvent{
    background-color: #995200;
    flex-direction: column;
}*/
#layoutContest{
    background-color: rgb(43 129 255);
    flex-direction: column;
}
/*#summerEvent img{
    width: 20em;
    margin: 0.5em;
}*/
#layoutContest img{
    width: 25em;
    margin: 0.5em;
}

/* FOOTER */
.footer {
    position: relative;
    margin-top: 1em !important;
}
#logo{
    height: 4em;
}
#logo:hover{
    cursor: pointer;
}
#logo:active{
    height: 4.2em;
}

a[rel="license"]{
    position: fixed;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: end;
    text-decoration: none;
    color: white;
    font-size: smaller;
}
.copyrighted-badge{
    bottom: 0;
    position: fixed;
    left: 0;
}

/* ASPECTO EN TABLET */
@media all and (max-width: 850px){
    #header{
        transform: translateY(19px);
    }
    #nave{
        display: none;
    }
    #title{
        margin-top: -2.5em;
    }
    #buttons{
        margin: 0;
    }
    #buttons #btnMute{
        display: none;
    }
    #contents>div:first-child{
        margin: 10em !important;
        width: 100%;
        width: 100%;
    }
    .subcontent {
        width: 100% !important;
    }
    .subcontent>div{
        width: 100% !important;
    }
    .subcontent:last-child>div:first-child>span{
        text-align: center !important;
    }
    #options{
        width: 100%;
    }
    iframe{
        width: 59%; 
        height: 27%;
    }
    .accordion{
        margin: 1em auto !important;
    }
    #cc .accordion-body {
        flex-direction: column;
        font-size: 11px;
    }
    #starPack img{
        width: 21em;
    }
    #layoutContest img {
        width: 20em;
    }
    .copyrighted-badge{
        display: none;
    }
    a[rel="license"]{
        font-size: xx-small;
        width: 100%;
    }
    a[rel="license"] span{
        margin: 0 auto;
    }
}
/* ASPECTO EN MÓVIL */
@media all and (max-width: 360px){
    #title{
        width: 100%;
        margin-top: -3em;
    }
    #content{
        width: 100vw;
    }
    iframe{
        width: 69%; 
        height: 15%;
    }
}