@font-face {
    font-family: 'Dragonproject';
    src: url('./fonts/Roboto-Regular.eot'); /* IE9 Compat Modes */
    src: url('./fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./fonts/Roboto-Regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('./fonts/Roboto-Regular.woff') format('woff'), /* Pretty Modern Browsers */
         url('./fonts/Roboto-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('./fonts/Roboto-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
  }

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,body{
    height:100%;
}

header{
    margin-bottom:40px;
}

img{
    display:block;
    width:100%;
    image-rendering: pixelated;
}

#container{
    height:100%;
    display:flex;
    justify-content: center;
    align-items: center;
}



.intro{
    position:relative;
    width:100%;
    max-width:682px;
    margin:auto;
}


.escena{
    position:relative;
    border:3px solid black;
    overflow:hidden;
    margin:0 auto;
}

.escena img{
    position:relative;
}

h1{
    font-size:13px;
    line-height:18px;
    font-family:"Dragonproject";
    font-weight:400;
}

.bola{
position: absolute;
width: 4%;
height:auto;
top: 26%;
left: 70.5%;
animation:bola 2s alternate infinite ease;
}

.bola img{
    image-rendering:auto;
}

@keyframes bola{
    0%{
        top:26%;
    }
    100%{
        top:10%;
   
    }
}

.pez1{
    position:absolute;
    display:block;
    width:8%;
    height:auto;
    top:60%;
    left:50%;
    animation:pez1 8s normal infinite ease;
}

@keyframes pez1{
    0%{
        left:45%;     
    }
    50%{
        left:60%;
        transform: scaleX(1);
    }
    51%{
        transform: scaleX(-1);
    }
    100%{
        left:45%;
        transform: scaleX(-1);
    }
}

.pez2{
    position:absolute;
    display:block;
    width:6%;
    height:auto;
    top:82%;
    /*left:94%;*/
    left:102%;
    animation:pez2 10s normal infinite ease;
}

@keyframes pez2{
    0%{
        left:102%;     
    }
    50%{
        left:85%;
        transform: scaleX(1);
    }
    51%{
        transform: scaleX(-1);
    }
    100%{
        left:102%;
        transform: scaleX(-1);
    }
}

.rana{
    position:absolute;
    display:block;
    width:6.6%;
    height:auto;
    top:51%;
    /*left:94%;*/
    left:102%;
    animation:rana 14s normal 1s infinite ease;
}

@keyframes rana{
    0%{
        left:102%;     
    }
    50%{
        left:80%;
        transform: scaleX(1);
    }
    51%{
        transform: scaleX(-1);
    }
    100%{
        left:102%;
        transform: scaleX(-1);
    }
}



.content-loader{
    position:fixed;
    display:flex;
    justify-content: center;
    align-items:center;
    height:100%;
    width:100%;
    background:white;
    z-index:9999;
}

.loader{
    position:relative;
    width:40px;
    height:110px;
}


.circle{
    width:40px;
    height:40px;
    position:absolute;
    animation: circle .5s alternate infinite ease;
}

.circle img{
    image-rendering: auto;
}

@keyframes circle{
    0%{
        top:68px;
        height:5px;
        transform: scaleX(1.7);
    }
    40%{
        height:40px;
        transform: scaleX(1);
    }
    100%{
        top:0%;
    }
}

.shadow{
    width:40px;
    height:4px;
    border-radius: 50%;
    background-color: rgba(0,0,0,.5);
    position: relative;
    top:102px;
    z-index: -1;
    filter: blur(1px);
    animation: shadow .5s alternate infinite ease;
}

@keyframes shadow{
    0%{
        transform: scaleX(1.7);
    }
    40%{
        transform: scaleX(1);
        opacity: .7;
    }
    100%{
        transform: scaleX(.2);
        opacity: .4;
    }
}

/*
 span{
    position: absolute;
    top:75px;
    font-family: 'Dragonproject';
    font-size: 20px;
    letter-spacing: 12px;
    color: black;
    left:15%;
}
*/


@media (max-width: 674px) {
  #container{
    padding:0px 20px;
    transition: 0.5s;
  }
}