*{
    user-select:none !important;
}


body{
    height: 100vh;
    overflow: hidden;
    margin:0;
    padding:0;
}

img.bg{
    height: 100vh;
    animation: bg_slide 24s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#dna{
    position:fixed;
    top: calc( 50vh - 10vw );
    left: calc( 50vw - 10vw );
    width: 20vw;
    height: 20vw;
}
#loading.init{
    background-color:#174e38;
}
#loading h1{
    position:fixed;
    top: calc( 50vh - 10vw );
    width: 100vw;
    padding:0;
}

.main h1{
    position: fixed;
    top: 32px;
}

.button-container{
    position: fixed;
    bottom: 32px;
}

button.main{
    position: relative;
    clear:both;
    float:left;
    margin-top:32px;
/*     bottom: 32px; */
}

#loading,
#popup,
#popup-death{
    position:fixed;
    top:0;
    left:0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
}


#popup-death{
    background-color: rgba(200, 55, 55, 0.5);
}

#popup-death p{
    text-align: center;
}

#popup-death a{
    text-decoration:none;
}
#popup-death button{
display:block;
float:unset;
    position:unset;
    margin: 32px auto;
}
#popup-death button:active{
margin-top: 40px;
margin-bottom: -8px;
}


#popup{
    animation:apear 0.5;
    background-color: rgba(0, 0, 0, 0.5);
}


#popup div,
#popup-death div{
    min-width: 512px;
    width: 50%;
    margin: 5% auto;
    background-color: rgba(255,255,255,.85);
    padding:32px;
    border-radius: 32px;
}

@keyframes bg_slide {
    0% {
        transform: translatex(0);
    }
    100%{
        transform: translatex(-50%);
    }
}

/*
#left-biome{
    background-image: url('img/desert_bg.jpg');
}
#right-biome{
    background-color: #00f;
}*/
.biome{
    width: 50%;
    height: 100%;
    float: left;
    background-size: cover;
    background-position-x: center;
}

h1,
h2{
    color: #fff;
    font-family:  sans-serif;
    width: 90%;
    padding: 0 5%;
    text-align: center;
}

h1{
    font-size: 48px;
    text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
h2{
    font-size: 24px; 
    text-shadow: 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}

.event-title{
    position: relative;
    animation: fade-in .5s;
    height: calc( 33.33vh - 26px );
    margin:0;
    padding-top:26px;
    margin-bottom: -33.33vh;
}

#global-event-title {
    position: absolute;
    top: 0;
    width:100vw;
}

.event-title.hidden{
    animation: fade-out .5s;
    opacity: 0;
}


@keyframes fade-in {
    0% {
        opacity:0;
        top: 1vw;
    }
    100%{
        opacity:1;
        top: 0;
    }
}

@keyframes fade-out {
    100% {
        opacity:0;
        top: 1vw;
    }
    0%{
        opacity:1;
        top: 0;
    }
}

button {
    left:40vw;
    z-index:0;
    width:20vw;
    height:10vh;
    font-size:32px;
    border:none;
    background-color: #5aa02c;
    box-shadow: 0 8px 0 #447821, 0 0 8px rgba(0,0,0,.5), 0 8px 8px rgba(0,0,0,.5);
    color:#fff;
    cursor: pointer;
}

button#exit{
    position: fixed;
    left:unset;
    bottom:unset;
    height:4vw;
    width:4vw;
    right:2vw;
    top:2vw;
    border-radius:2vw;
    padding:0;
    background-color: #c83737;
    box-shadow: 0 8px 0 #a02c2c, 0 0 8px rgba(0,0,0,.5), 0 8px 8px rgba(0,0,0,.5);
}

button#exit img{
    margin:0.5vw;
    width: 3vw;
}

button#exit:hover {
    background-color: #d35f5f;
    box-shadow: 0 8px 0 #c83737, 0 0 8px rgba(0,0,0,.5), 0 8px 8px rgba(0,0,0,.5);
}

button#exit:active {
    margin-top: 8px;
    background-color: #d35f5f;
    box-shadow: 0 0 8px rgba(0,0,0,.75);
}


#user-button {
    position: fixed;
    bottom:5vh;
}

.hidden {
    display: none;
}

#user-button.disabled,
#user-button.disabled:hover,
#user-button.disabled:active {
    background-color: #333;
    box-shadow: 0 8px 0 #222, 0 0 8px rgba(0,0,0,.5), 0 8px 8px rgba(0,0,0,.5);
    color:#ccc;
    margin-bottom: 0px;
    cursor: not-allowed;
}

button:hover {
    background-color: #71c837;
    box-shadow: 0 8px 0 #5aa02c, 0 0 8px rgba(0,0,0,.5), 0 8px 8px rgba(0,0,0,.5);
}

button:active {
    margin-top: 40px;
    margin-bottom: -8px;
    background-color: #71c837;
    box-shadow: 0 0 8px rgba(0,0,0,.75);
}

.individuals{
/*     background-color: rgba(255,0,0,.5); */
    height: 66.66vh;
    width: 100%;
    position:relative;
    /*TO REMOVE*/
    color:#fff;
    text-shadow: 1px 1px 1px #000;
    margin-top: 33.33vh;
}

.individuals > div{
    position: absolute;
}

body.choose-phase .individuals > div > img {
    opacity: .5;
    transition: all .5s;
}

body.choose-phase .individuals > div.on > img {
    opacity: 1;
/*     animation: on .5s; */
/*     animation-iteration-count: infinite; */
}

body.breeding-phase .individuals > div > img {
    opacity: 1;
    animation: bebefriendydie 1s;
    animation-iteration-count: 1;
}

body.breeding-phase .individuals > div > img {
    opacity: 1;
    animation: bebefriendydie 1s;
    animation-iteration-count: 1;
}

body.breeded-phase .individuals > div > img {
    opacity: 1;
    animation: grow 1s;
    animation-iteration-count: 1;
}

/*.individuals > div.on > img{
    animation: on .5s;
    animation-iteration-count: infinite;
}*/


@keyframes bebefriendydie {
    0% {
        opacity:.5;
        height: 100%;
        margin:;
    }
    100%{
        opacity:0;
        height: 50%;
        margin: 33%;
    }
}

@keyframes grow {
    0% {
        opacity:0;
        height: 0%;
        margin: 67%;
    }
    100%{
        opacity:100%;
        height: 50%;
        margin: 33%;
    }
}

/*.individuals > div > img{
    height: 100%;
    position:relative;
    /*TO REMOVE*
    margin-right:-50%;
    position:relative;
}
.individuals > div:nth-child(1){
    top:5%;
    left:20%;
    height: 15vh;
    margin:  -7.5vh;


}
.individuals > div:nth-child(2){
    top:45%;
    left:90%;
    height: 31.6666666666667vh;
    margin:  -15.8333333333333vh;




}
.individuals > div:nth-child(3){
    top:65%;
    left:50%;
    height: 40vh;
    margin:  -20vh;



}
.individuals > div:nth-child(4){
    top:20%;
    left:70%;
    height: 21.25vh;
    margin:  -10.625vh;


}
.individuals > div:nth-child(5){
    top:50%;
    left:20%;
    height: 33.75vh;
    margin:  -16.875vh;


}
.individuals > div:nth-child(6){
    top:30%;
    left:35%;
    height: 25.4166666666667vh;
    margin:  -12.7083333333333vh;

}
.individuals > div:nth-child(7){
    top:15%;
    left:50%;
    height: 19.1666666666667vh;
    margin:  -9.58333333333333vh;


}
.individuals > div:nth-child(8){
    top:10%;
    left:80%;
    height: 17.0833333333333vh;
    margin:  -8.54166666666667vh;


}
.individuals > div:nth-child(9){
    top:25%;
    left:100%;
    height: 23.3333333333333vh;
    margin:  -11.6666666666667vh;

}
.individuals > div:nth-child(10){
    top:50%;
    left:65%;
    height: 33.75vh;
    margin:  -16.875vh;   
}*/

#turns::after {
    content: "ª Generación";
}
#turns {
    font-size: 24px;
    color: #000;
    font-family:  sans-serif;
    position: fixed;
    top: 0;
    left: 0;
    padding: 2vh;
    background-color: rgba(255,255,255,.5);
    border-radius: 0 0 3vh 0;
}
#turns.animate{
    animation: drop-down .5s;
}


@keyframes drop-down {
    0% {
        top: -8vh;
    }
    100%{
        top: 0;
    }
}

/*******************
 * Individal Chars *
 *******************/

/* full = 240x100 */
/* 240 = 100%<-> */
/* 100 = 100%^v */


.individuals > div{
    width: 100px;
    height: 260px; 
}

.individuals > div > div{
    background-size: 100%;
    position:absolute;
    background-repeat:no-repeat;
}
.individuals > div > div:nth-child(1){
    /* BASE */
    z-index: 1;
}
.individuals > div > div:nth-child(2){
    /* HAIR */
    z-index: 0;
}
.individuals > div > div:nth-child(3){
    /* LEGS */
    z-index: 0;
}
.individuals > div > div:nth-child(4){
    /* CONS */
    z-index: 0;
}
.individuals > div > div{
    /* REST */
    z-index: 2;
}

.individuals > div > div:nth-child(1){
    background-image: url(img/individual/base.svg);
    top: 6.20884615%;
    height: 57.87846154%;
    width: 81.608%;
}

.individuals > div > div.char-1:nth-child(2){
    background-image: url(img/individual/0_1.svg);
    top: 1.576537846%;
    left:49.310%;
    height: 64.6203846%;
    width: 39.129%;
}
.individuals > div > div.char-2:nth-child(2){
    background-image: url(img/individual/0_2.svg);
    left:26.355%;
    height: 69.515769%;
    width: 74.747%;
}

.individuals > div > div.char-0:nth-child(3){
    background-image: url(img/individual/1_0.svg);
    top: 63.64038462%;
    left: 12.870%;
    height: 13.21423015%;
    width: 68.829%;
}
.individuals > div > div.char-1:nth-child(3){
    background-image: url(img/individual/1_1.svg);
    top: 63.57192307%;
    left: 12.841%;
    height: 20.906538%;
    width: 68.829%;
}
.individuals > div > div.char-2:nth-child(3){
    background-image: url(img/individual/1_2.svg);
    top: 63.5719230%;
    left: 12.841%;
    height: 36.3419230%;
    width: 68.829%;
}

.individuals > div > div.char-1:nth-child(4){
    background-image: url(img/individual/2_1.svg);
    top: 31.830384%;
    left: 20.832%;
    height: 34.569230%;
    width: 39.020%;
}
.individuals > div > div.char-2:nth-child(4){
    background-image: url(img/individual/2_2.svg);
    top: 27.505384%;
    left:9.566%;
    height: 37.02230769%;
    width: 33.635%;
}

.individuals > div > div.char-1:nth-child(5){
    background-image: url(img/individual/3_1.svg);
    top: 30.88846154%;
    left: 61.025%;
    height: 14.903846%;
    width: 15.262%;
}
.individuals > div > div.char-2:nth-child(5){
    background-image: url(img/individual/3_2.svg);
    top: 31.72653785%;
    left: 57.658%;
    height: 22.10499969%;
    width: 21.602%;
}

.individuals > div > div.char-1:nth-child(6){
    background-image: url(img/individual/4_1.svg);
    top: 56.0400000%;
    left: 46.562%;
    height: 4.78733742%;
    width: 7.374%;
}
.individuals > div > div.char-2:nth-child(6){
    background-image: url(img/individual/4_2.svg);
    top: 55.09230462%;
    left: 43.504%;
    height: 4.623076%;
    width: 13.743%;
}

.individuals > div > div.char-0:nth-child(7){
    background-image: url(img/individual/5_0.svg);
    top: 7.833461%;
    left: 12.522%;
    height: 10.8907692%;
    width: 79.627%;
}
.individuals > div > div.char-1:nth-child(7){
    background-image: url(img/individual/5_1.svg);
    top: 7.95653846%;
    left: 12.522%;
    height: 9.0853846%;
    width: 73.770%;
}
.individuals > div > div.char-2:nth-child(7){
    background-image: url(img/individual/5_2.svg);
    top: 6.917686154%;
    left: 12.522%;
    height: 8.471922462%;
    width: 28.900%;
}

.individuals > div > div.char-1:nth-child(8){
    background-image: url(img/individual/6_1.svg);
    top: 22.34691692%;
    left: 21.115%;
    height: 2.6739644%;
    width: 8.673%;
}
.individuals > div > div.char-2:nth-child(8){
    background-image: url(img/individual/6_2.svg);
    top: 22.14653815%;
    left: 21.116%;
    height: 6.95230769%;
    width: 21.769%;
}

.individuals > div.left{
    transform: scalex(-1);
}
body.phase-0 .individuals > div {
    opacity: 65%;
}
.individuals > div:hover{   
    filter: drop-shadow(0px 0px 2px #fff) drop-shadow(0px 0px 2px #fff) drop-shadow(0px 0px 2px #fff) drop-shadow(0px 0px 2px #fff);
}
body.phase-0 .individuals > div.on {
    opacity: 100%;
    filter: drop-shadow(0px 0px 2px #fff) drop-shadow(0px 0px 2px #fff);
}

@keyframes die {
    0% {
        transform: scaley(1);
    }
    100%{
        transform: scaley(0);
    }
}
@keyframes die_left {
    0% {
        transform: scaley(1) scalex(-1);
    }
    100%{
        transform: scaley(0) scalex(-1);
    }
}


.individuals > div.dead{
    animation: die 1s;
    transform-origin: 50% 100%;
    transform: scaley(0);
}

.individuals > div.dead.left{
    transform: scaley(0) scalex(-1);
    animation: die_left 1s;
}