@keyframes animatedBackground {
	0% { background-position: 0 0; }
	100% { background-position: -2950px 0; }
}
@-moz-keyframes animatedBackground {
	0% { background-position: 0 0; }
	100% { background-position: -2950px 0; }
}
@-webkit-keyframes animatedBackground {
	0% { background-position: 0 0; }
	100% { background-position: -2950px 0; }
}
@-ms-keyframes animatedBackground {
	0% { background-position: 0 0; }
	100% { background-position: -2950px 0; }
}
@-o-keyframes animatedBackground {
	0% { background-position: 0 0; }
	100% { background-position: -2950px 0; }}

body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background-image: url(./images/background-sky.jpg);
    background-size: cover;
    animation: animatedBackground 180s linear infinite;
	-moz-animation: animatedBackground 180s linear infinite;
	-webkit-animation: animatedBackground 180s linear infinite;
	-ms-animation: animatedBackground 180s linear infinite;
	-o-animation: animatedBackground 180s linear infinite;
}

.flexrow {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.flexcol {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container {
    width: 100vw;
    height: 100vh;
}

.megabox {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.box {
    width:80%;
    height: 80%;
}

.footer {
    width: 100%;
    height: 5%;
}

.footerbox {
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    font-size: calc(1.2vw + 1.2vh);
    font-family: 'Hanalei Fill', cursive;
    margin-top: 3%;
    color: #CCD7B9;
    text-shadow: 2px 7px 5px rgba(0,0,0,0.3), 
    0px -4px 10px rgba(255,255,255,0.3);

}

.typelist {
    width: 100%;
    height: 12.5%;

}

.box1 {
    width: 33%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.indic {
    width: 20%;
    height: 100%;
    transition: 0.2s;
    border: 3px grey solid;
    box-sizing: border-box;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.8) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.whitebox {
    background-color: white;
}

.redbox {
    background-color: #8F2424;
}

.lredbox {
    background-color: #C03131;
}

.lgreenbox {
    background-color: #6FDB59;
}

.greenbox {
    background-color: #52A242;
}

.firstbox {
    width: 33%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.types {
    width: 67%;
    height: 100%;

}

.type {
    width: 5.8823529411764%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    text-orientation: mixed;
    writing-mode: vertical-rl;
    text-align: center;
    box-sizing: border-box;
    color: white;
    font-weight: 700;
    background-image: url(./images/fond-noir-25.png);
    background-size: 50% 100%;
    background-position: bottom left;
    background-repeat: no-repeat;
    border: 1px grey solid;
    font-size: calc(0.5vw + 0.5vh);
    transition: 0.2s;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.type:hover {
    box-shadow: none}

.pokemons {
    width: 100%;
    height: 75%;
    
}

.pokeone {
    width: 100%;
    height: 16.666666666%;
    box-sizing: border-box;

}

.imgbox {
    width: 13%;
    height: 100%;
    background-color: white;
    border: 1px grey solid;
}

.selectbox {
    width: 20%;
    height: 100%;
}

.selectr-container {
    width: 20%;
    height: 100%;
}



.typingbox {
    width: 67%;
    height: 100%;
}

.img {
    object-fit: contain;
}
.duotype {
    width: 50%;
    height: 100%;
}

.typez_1, .typez_2, .typez_3, .typez_4, .typez_5, .typez_6 {
    width: 100%;
    height: 50%;
    text-transform: uppercase;
    text-align: center;
    box-sizing: border-box;
    color: white;
    font-weight: 700;
    background-image: url(./images/fond-noir-25.png);
    background-size: 100% 50%;
    background-position: bottom left;
    background-repeat: no-repeat;
    font-size: calc(0.6vw + 0.6vh);
    transition: 0.2s;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

}
.typez_1:hover, .typez_2:hover, .typez_3:hover, .typez_4:hover, .typez_5:hover, .typez_6:hover {
    box-shadow: none;
}


.typez_1:empty, .typez_2:empty, .typez_3:empty, .typez_4:empty, .typez_5:empty, .typez_6:empty {
    display: none;
  }


.typing_1, .typing_2, .typing_3, .typing_4, .typing_5, .typing_6 {
    width: 5.8823529411764%;
    height: 100%;
    box-sizing: border-box;
    justify-content: center;
    color: black;
    font-weight: 700;
    font-size: calc(1.2vw + 1.2vh);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    border: 1px grey solid;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.selectpoke_1, .selectpoke_2, .selectpoke_3, .selectpoke_4, .selectpoke_5, .selectpoke_6, .selectr-container {
    width: 100%;
    height: 50%;
    text-transform: capitalize;
    font-size: calc(1vw + 1vh);

}

.ability_1, .ability_2, .ability_3, .ability_4, .ability_5, .ability_6 {
    width: 100%;
    height: 50%;
    text-transform: capitalize;
    font-size: calc(1vw + 1vh);


}

.icones_1, .icones_2, .icones_3, .icones_4, .icones_5, .icones_6 {
    width: 50%;
    height: 100%;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;  
    transition: 0.2s;

}

.icones_1:hover, .icones_2:hover, .icones_3:hover, .icones_4:hover, .icones_5:hover, .icones_6:hover {
    width: 50%;
    height: 100%;
    box-shadow: none;
}

.results {
    width: 100%;
    height: 12.5%;
    box-sizing: border-box;

}

.secondbox {
    width: 0%;
    height: 100%;
}

.thirdbox {
    width: 67%;
    height: 100%;
}

.result {
    width: 5.8823529411764%;
    height: 100%;
    box-sizing: border-box;
    color: black;
    font-weight: 700;
    font-size: calc(1.2vw + 1.2vh);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    border: 1px grey solid;
    transition: 0.2s;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.result:hover {
    box-shadow: none;
}



.selectr-selected {
height: 100%;
}

.lang-fr {
    width: 20%;
    height: 100%;
    background-image: url(./images/franceflag.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    border: 3px grey solid;
    box-sizing: border-box;
    transition: 0.2s;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

}

.lang-fr:hover{ 
    border: 1px grey solid;
    box-shadow: none;

}


.lang-en {
    width: 20%;
    height: 100%;
    background-image: url(./images/gbflag.png);
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    border: 3px grey solid;
    box-sizing: border-box;
    transition: 0.2s;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

}


.lang-en:hover{ 
    border: 1px grey solid;
    box-shadow: none;

}

.lang-es {
    width: 20%;
    height: 100%;
    background-image: url(./images/spfl.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    border: 3px grey solid;
    box-sizing: border-box;
    transition: 0.2s;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

}

.lang-es:hover{ 
    border: 1px grey solid;
    box-shadow: none;

}

.lang-ch {
    width: 20%;
    height: 100%;
    background-image: url(./images/chinaflag.png);
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    border: 3px grey solid;
    box-sizing: border-box;
    transition: 0.2s;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

}


.lang-ch:hover{ 
    border: 1px grey solid;
    box-shadow: none;

}

.lang-sk {
    width: 20%;
    height: 100%;
    background-image: url(./images/skflag.png);
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    border: 3px grey solid;
    box-sizing: border-box;
    transition: 0.2s;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

}

.lang-sk:hover{ 
    border: 1px grey solid;
    box-shadow: none;

}