@import url('https://fonts.googleapis.com/css2?family=Khand:wght@300;400;500;600;700&display=swap');


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:  Roboto,Khand;
}
h1{
    color: rgb(255, 191, 0);
    font-family: Khand;
   
}
h2{   
    color: rgb(255, 191, 0);
    font-family: Khand;
    
}

h3{
    font-family: Khand;
    font-weight: bolder;
    color: rgb(255, 191, 0);
}


h4{
    font-family: Khand;
    font-weight: bolder;
    color: rgb(255, 191, 0);
}


h5{
    font-family: Khand;
    font-weight: bolder;
    color: rgb(255, 191, 0);
}

p{
    font-family: Roboto;
    color: rgb(137, 137, 137);
}

li{
    color: white;
    list-style: none;
}

/* heroestitle */

#astrisantitle{
    padding-top: 40px;
    font-size: 75px;
}
#iadortitle{
    padding-top: 40px;
    font-size: 75px;
}
#dedioretitle{
    padding-top: 40px;
    font-size: 75px;
}
#cruzadostitle{
    padding-top: 40px;
    font-size: 75px;
}
#goosietitle{
    padding-top: 40px;
    font-size: 75px;
}
#luccatitle{
    padding-top: 40px;
    font-size: 75px;
}
#zillowtitle{
    padding-top: 40px;
    font-size: 75px;
}
#madotitle{
    padding-top: 40px;
    font-size: 75px;
}
#refuerzostitle{
    padding-top: 40px;
    font-size: 75px;
}
#leyendstitle{
    padding-top: 40px;
    font-size: 75px;
}
#misionstitle{
    padding-top: 40px;
    font-size: 75px;
}
#consiguelotitle{
    padding-top: 40px;
    font-size: 35px;
}


#bgall{
    background-position-y: 300px ;
}

.middle{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    
}
.middle h3{
    font-size: 6rem;
    color: rgb(255, 191, 0);
}

.logochile img{
    min-width: 400px;    
    border: 3px solid rgb(0, 0, 0);
}

.display-2{
    font-size: 2rem;
}

#fichanumbers{
    width: 75%;
    border: 3px solid rgb(255, 255, 255);
}

.pepe{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 3rem;
}

.texty{
    width: 50%;
    margin: auto;
}

.pepe img{
    width: 350px;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
    margin: auto;

}



#movimiento img{
    border-bottom-left-radius: 15px;
    border-top-right-radius: 15px;
    width: 75%;
    margin: 3rem;
}



/* FLIPADA TABLERO */
.tablero img{
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border: 3px solid rgb(0, 0, 0);
}

.mapamesa area{
    cursor: crosshair;
}

.fortaleza:hover::after{
    content: 'Fortaleza';
    position: absolute;
    left: 20px;
    top: 130px;
    color: black;
    z-index: 10; 
}

/* FIN DE FLIPADA TABLERO */

#rooster{
 max-width: 600px;
}

.legendrooster{
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2rem;
    background-color: #161418;
    padding-bottom: 2rem;
}


.legendport{
    width: 45%;
    justify-content: center;
    align-items: center;
    margin: auto;
    color: white;
    text-align: center;  
}

.legendport p{
    padding-bottom: 2rem;
}


.legendport li{
    padding: 1rem;
}

.legendtitle{
    text-align: center;
    font-size: 3rem;
}

.legendport h2{
    color: rgb(255, 191, 0);
    font-family: Khand;
}

.section-lg{
    background-color: #161418;
}

.box{
    text-align: center;
    max-width: 500px;
}

#rungoblin{
    justify-content: center;
    align-items: center;
    margin: auto;
    max-width: 750px;
    padding-top: 3rem;
}
#rungoblin img{
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
    
}

#zonadesombra img{
    border-radius: 15px;
}

/* CARASHEROES */
.flip-container {
    margin: 10px;
    perspective: 1000;
    display: inline-block;
}

/* ASTRISAN */

.flip-container:hover .astricard {
    transform: rotateY(180deg);
}
.astricard, .astrifront, .astriback {
    width: 130px;
    height: 195px;
}
.astricard {
    transition: 0.3s;
    transform-style: preserve-3d;
    position: relative;
}
.astrifront, .astriback {
    backface-visibility: hidden;
    position: absolute;
}
.astrifront {
    z-index: 1;
    transform: rotateY(180deg);
    background: url("assets/images/astrisan_portrait_color.png") no-repeat;
    background-position: center;
    border: 3px solid rgb(228, 152, 10);
    border-radius: 70px;
}
.astriback {
    z-index: 2; /* back side, placed above front */
    transform: rotateY(0deg);
    background: url("assets/images/astrisan_portrait.png") no-repeat;
    background-position: center;
    border: 3px solid rgb(243, 243, 243);
    border-radius: 70px;
    
}

/* IADOR */


.flip-container:hover .iadorcard {
    transform: rotateY(180deg);
}
.iadorcard, .iadorfront, .iadorback {
    width: 130px;
    height: 195px;
}
.iadorcard {
    transition: 0.5s;
    transform-style: preserve-3d;
    position: relative;
}
.iadorfront, .iadorback {
    backface-visibility: hidden;
    position: absolute;
}
.iadorfront {
    z-index: 1;
    transform: rotateY(180deg);
    background: url("assets/images/iador_portrait_color.png") no-repeat;
    background-position: center;
    border: 3px solid rgb(228, 152, 10);
    border-radius: 70px;
}
.iadorback {
    z-index: 2; /* back side, placed above front */
    transform: rotateY(0deg);
    background: url("assets/images/iador_portrait.png") no-repeat;
    background-position: center;
    border: 3px solid rgb(243, 243, 243);
    border-radius: 70px;
}

/* MADO */


.flip-container:hover .madocard {
    transform: rotateY(180deg);
}
.madocard, .madofront, .madoback {
    width: 130px;
    height: 195px;
}
.madocard {
    transition: 0.5s;
    transform-style: preserve-3d;
    position: relative;
}
.madofront, .madoback {
    backface-visibility: hidden;
    position: absolute;
}
.madofront {
    z-index: 1;
    transform: rotateY(180deg);
    background: url("assets/images/Mado_portrait_color.png") no-repeat;
    background-position: center;
    border: 3px solid rgb(228, 152, 10);
    border-radius: 70px;
}
.madoback {
    z-index: 2; /* back side, placed above front */
    transform: rotateY(0deg);
    background: url("assets/images/Mado_portrait.png") no-repeat;
    background-position: center;
    border: 3px solid rgb(243, 243, 243);
    border-radius: 70px;
}

/* DEDIORE */


.flip-container:hover .dediorecard {
    transform: rotateY(180deg);
}
.dediorecard, .dediorefront, .dedioreback {
    width: 130px;
    height: 195px;
}
.dediorecard {
    transition: 0.5s;
    transform-style: preserve-3d;
    position: relative;
}
.dediorefront, .dedioreback {
    backface-visibility: hidden;
    position: absolute;
}
.dediorefront {
    z-index: 1;
    transform: rotateY(180deg);
    background: url("assets/images/Dedore_portrait_color.png") no-repeat;
    background-position: center;
    border: 3px solid rgb(228, 152, 10);
    border-radius: 70px;
}
.dedioreback {
    z-index: 2; /* back side, placed above front */
    transform: rotateY(0deg);
    background: url("assets/images/Dedore_portrait.png") no-repeat;
    background-position: center;
    border: 3px solid rgb(243, 243, 243);
    border-radius: 70px;
}

/* GOOSIE */


.flip-container:hover .goosiecard {
    transform: rotateY(180deg);
}
.goosiecard, .goosiefront, .goosieback {
    width: 130px;
    height: 195px;
}
.goosiecard {
    transition: 0.5s;
    transform-style: preserve-3d;
    position: relative;
}
.goosiefront, .goosieback {
    backface-visibility: hidden;
    position: absolute;
}
.goosiefront {
    z-index: 1;
    transform: rotateY(180deg);
    background: url("assets/images/goosie_portrait_color.png") no-repeat;
    background-position: center;
    border: 3px solid rgb(228, 152, 10);
    border-radius: 70px;
}
.goosieback {
    z-index: 2; /* back side, placed above front */
    transform: rotateY(0deg);
    background: url("assets/images/goosie_portrait.png") no-repeat;
    background-position: center;
    border: 3px solid rgb(243, 243, 243);
    border-radius: 70px;
}

/* EUFRATES */


.flip-container:hover .eufratescard {
    transform: rotateY(180deg);
}
.eufratescard, .eufratesfront, .eufratesback {
    width: 130px;
    height: 195px;
}
.eufratescard {
    transition: 0.5s;
    transform-style: preserve-3d;
    position: relative;
}
.eufratesfront, .eufratesback {
    backface-visibility: hidden;
    position: absolute;
}
.eufratesfront {
    z-index: 1;
    transform: rotateY(180deg);
    background: url("assets/images/Eufrates_portrait_color.png") no-repeat;
    background-position: center;
    border: 3px solid rgb(228, 152, 10);
    border-radius: 70px;
}
.eufratesback {
    z-index: 2; /* back side, placed above front */
    transform: rotateY(0deg);
    background: url("assets/images/Eufrates_portrait.png") no-repeat;
    background-position: center;
    border: 3px solid rgb(243, 243, 243);
    border-radius: 70px;
}

/* ZILLOW */


.flip-container:hover .zillowcard {
    transform: rotateY(180deg);
}
.zillowcard, .zillowfront, .zillowback {
    width: 130px;
    height: 195px;
}
.zillowcard {
    transition: 0.5s;
    transform-style: preserve-3d;
    position: relative;
}
.zillowfront, .zillowback {
    backface-visibility: hidden;
    position: absolute;
}
.zillowfront {
    z-index: 1;
    transform: rotateY(180deg);
    background: url("assets/images/Zillow_portrait_color.png") no-repeat;
    background-position: center;
    border: 3px solid rgb(228, 152, 10);
    border-radius: 70px;
}
.zillowback {
    z-index: 2; /* back side, placed above front */
    transform: rotateY(0deg);
    background: url("assets/images/Zillow_portrait.png") no-repeat;
    background-position: center;
    border: 3px solid rgb(243, 243, 243);
    border-radius: 70px;
}

/* LUCCA */


.flip-container:hover .luccacard {
    transform: rotateY(180deg);
}
.luccacard, .luccafront, .luccaback {
    width: 130px;
    height: 195px;
}
.luccacard {
    transition: 0.5s;
    transform-style: preserve-3d;
    position: relative;
}
.luccafront, .luccaback {
    backface-visibility: hidden;
    position: absolute;
}
.luccafront {
    z-index: 1;
    transform: rotateY(180deg);
    background: url("assets/images/Lucca_portrait_color.png") no-repeat;
    background-position: center;
    border: 3px solid rgb(228, 152, 10);
    border-radius: 70px;
}
.luccaback {
    z-index: 2; /* back side, placed above front */
    transform: rotateY(0deg);
    background: url("assets/images/Lucca_portrait.png") no-repeat;
    background-position: center;
    border: 3px solid rgb(243, 243, 243);
    border-radius: 70px;
}

/* CARASHEROES FINAL */


#free{
    font-size: 10px;
    max-width: fit-content;
}

#free a:hover{
    font-style: italic;
}