#container{
	margin: 0 auto;
	
	text-align: center;
}
#juego{
	position: absolute;
z-index: 3;
	background-color: rgba(232, 243, 210, 0.35);
	left: 15%;
	width: 60%;
	border-style: solid;
	display: grid;
	border-radius: 1rem;
}
body{
	font-family: calibri;
    background: #4e54c8;  
    background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);  
   
   }.circles{
   	z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
    height: 90%;
    overflow: hidden;
}

.circles li{	z-index: 2;
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 25s linear infinite;
    bottom: -150px;
    
}

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}


#boreas{ background-image:url("recursos/boreas.jpg");
	background-size:100% 100%;
}
#perro
{ background-image:url("recursos/perro.jpg");
	background-size:100% 100%;
}
	#ranas{background-image:url("recursos/ranas.jpg");
	background-size:100% 100%;
}
		#mariposa{ background-image:url("recursos/mariposa.jpg");
	background-size:100% 100%;
}
@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}


         .fabulas {background-image: linear-gradient(to right, #16A085 0%, #F4D03F  51%, #16A085  100%)}
         .fabulas {
            margin: 10%;
            padding: 10% 5%;
            text-align: center;
            text-transform: uppercase;
            transition: 0.5s;
            background-size: 200% auto;
            color: white;            
            box-shadow: 0 0 20px #eee;
            border-radius: 10px;
            
        
            font-weight:bold ;]
          }

          .fabulas:hover {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
          }
      .titulo_f{
      	background-color: whitesmoke;
      	border-radius: 100%;
      }

         

p{
	
	border-radius: 80%;
	font-size: 1.5rem;}
#titulo h1{
	font-size: 2.5rem;
	font-weight: bold;
	color: #0051E1;
	background-color: white;

	border-radius: 1rem;
}
#boreas,#ranas,#perro,#mariposa{
	margin: auto;
	border-radius: 1rem;
	width: 80%;
}
.atras{
	margin: 0 auto;

	 background-color: #557CFC;
                color: white;
                font-size: 20px;
                text-align: center;
                font-weight: bolder;
                padding: 3px;
                border: solid 2px black;
                
	
}
.atras:hover{
	 background-color: lightcoral;
                font-size: 22px;}
           #contenido{
           	text-align: center;
           	display: grid;
           	border: solid;
           	border-radius: 1rem;
           	background-color: rgba(232, 243, 210, 0.4);
           	margin:  auto;]
           	}
             @media only screen and (orientation:portrait) {
        #wrapper { display:none; }
        #aviso-movil-horizontal { 
        	margin: 0 auto;
        
          display:block;

      font-size: 2rem;
                text-align: center;
                font-weight: bolder;}
		     #juego{display:none;}    
      
    }


    @media only screen and (orientation:landscape) {
        #aviso-movil-horizontal { display:none; }
	    }