@font-face {
    font-family:Minecraft;
    src: url(fonts/PixelifySans-VariableFont_wght.ttf);
}
@font-face {
    font-family:Introduccion;
    src: url(fonts/Silkscreen-Regular.ttf);
}

body {
  background-image: url(img/7.png);
  background-size: cover;
  background-attachment: fixed;
}
header, section, footer{
    width: 1200px; margin: auto;
}

header{ height: 200px; background-color: rgb(88, 149, 28);padding-top: 35px;}
#mine{width: 400px; height: 90px;margin: auto;}
#bot{ width: 1000px; height: 100px; margin: auto;font-family:Minecraft;}
#form{ width: 1000px; height: 100px; margin: auto;font-family:Minecraft;}
#nombre{ height: 150px; width: 500px; margin-left: 40px; float: left;}
 .formis{ margin: 0%; padding: 0%; list-style-type: none;display: flex;}
    .formis li a{ display: block; text-decoration: none; color: rgb(0, 0, 0); 
        width: 160px; background-color: gray; margin-right: 9px; font-size: 24px;
        text-align: center; line-height: 100px; 
    }
    .formis li a:hover{ background-color: rgb(86, 86, 86);border: 5px solid gray;}

section{ height: 1000px; background-color:rgb(181, 219, 125, 0.803);padding-top: 60px;
     padding-bottom: 60px}


footer{ height: 110px; background-color: rgb(88, 149, 28)}
#fotoin{height: 300px; width: 500px; margin-left: 40px; float: left;}
    
#contenidoInicio{height: 1050px;}

#caja1{height: 300px; width: 500px; margin-right: 40px;
    float: right; font-family:Introduccion;
}
#caja1 h2{font-size: 40px;}

#intro{ height: 200px; width: 1120px;margin-top: 350px;
margin-left: 40px;}
#intro h1{ font-size: 140px}
.ino{
  text-shadow: 4px 4px 6px rgba(0,0,0,0.5);}
  

  .heart {
  animation: heartbeat 1s infinite;
  transform-origin: center; 
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
#texto1{height: 200px; width: 700px; margin-top: 60px;
    margin-left: 40px; float: left; font-size: 23px; font-family: Georgia, 'Times New Roman', Times, serif;
    }
#texto2{height: 200px; width: 1120px;
   margin-top: 100px; margin-left: 40px; clear: both;font-size: 20px;font-family: Georgia, 'Times New Roman', Times, serif;}  

    #foto1{height: 200px; width: 400px;float: right;
    margin-top: 60px; margin-right: 40px;margin-bottom: 20px;}

    .botones{ margin: 0%; padding: 0%; list-style-type: none;display: flex;}
    .botones li a{ display: block; text-decoration: none; color: rgb(0, 0, 0); 
        width: 160px; background-color: gray; margin-right: 9px; font-size: 24px;
        text-align: center; line-height: 100px;
    }
    .botones li a:hover{ background-color: rgb(86, 86, 86);border: 5px solid gray;}


#cuerpo{height: 1800px;  background-color:rgb(181, 219, 125, 0.803);padding-top: 60px;
     padding-bottom: 60px; }

#cuerpo3{height: 550px; background-color:rgb(181, 219, 125, 0.803);padding-top: 60px;
     padding-bottom: 60px;font-family: Georgia, 'Times New Roman', Times, serif; }
     .tabla{ width: 1000px;margin: auto;font-family: Georgia, 'Times New Roman', Times, serif; box-shadow: 0 4px 50px rgba(0,0,0,0.2);}

    #cuerpo2{height: 4000px;  background-color:rgb(181, 219, 125, 0.803);padding-top: 60px;
     padding-bottom: 60px;font-family: Georgia, 'Times New Roman', Times, serif;}

     #pieMulti{ height: 100px; background-color: rgb(88, 149, 28);font-family:Introduccion}

     #map{height: 800px; width: 853px; margin:auto; background-image: url(img/mapa.png);position: relative;
    }
    #cat{position: absolute; left: 140px; top: 100px;}
    #chick{position: absolute; left: 300px; top: 300px;}
    #cow{position: absolute; left: 300px; top: 130px;}
    #creep{position: absolute; left: 650px; top: 150px;}
    #end{position: absolute; left: 650px; top: 650px;}
    #hum{position: absolute; left: 200px; top: 500px;}
    #pig{position: absolute; left: 380px; top: 620px;}
    #sal{position: absolute; left: 450px; top: 350px;}
    #she{position: absolute; left: 680px; top: 350px;}
    #sk{position: absolute; left: 150px; top: 650px;}
    #sp{position: absolute; left: 450px; top: 500px;}
    #sq{position: absolute; left: 550px; top: 420px;}
    #vi{position: absolute; left: 120px; top: 320px;}
    #wo{position: absolute; left: 130px; top: 500px;}
    #zo{position: absolute; left: 450px; top: 100px;}

.hov:hover{transform: scale(1.4);}


    #cats{height: 100px; width: 1000px; background-color: rgb(101, 247, 113); margin: auto; margin-top: 100px;}
    #chicks{height: 100px; width: 1000px; background-color: rgb(237, 255, 199);margin: auto;margin-top: 100px;}
    #cows{height: 100px; width: 1000px; background-color: rgb(175, 100, 63);margin: auto;margin-top: 100px;}
    #creeps{height: 100px; width: 1000px; background-color: rgb(38, 135, 23);margin: auto;margin-top: 100px;}
    #ends{height: 100px; width: 1000px; background-color: rgb(250, 161, 251);margin: auto;margin-top: 100px;}
    #hums{height: 100px; width: 1000px; background-color: rgb(146, 223, 233);margin: auto;margin-top: 100px;}
    #pigs{height: 100px; width: 1000px; background-color: rgb(248, 120, 163);margin: auto;margin-top: 100px;}
    #sals{height: 100px; width: 1000px; background-color: rgb(220, 43, 43);margin: auto;margin-top: 100px;}
    #shes{height: 100px; width: 1000px; background-color: rgb(229, 237, 221);margin: auto;margin-top: 100px;}
    #sks{height: 100px; width: 1000px; background-color: rgb(140, 139, 138);margin: auto;margin-top: 100px;font-size: 14.5px;}
    #sps{height: 100px; width: 1000px; background-color: rgb(89, 87, 69);margin: auto;margin-top: 100px;}
    #squs{height: 100px; width: 1000px; background-color: rgb(104, 44, 160);margin: auto;margin-top: 100px;}
    #vis{height: 100px; width: 1000px; background-color: rgb(207, 162, 110);margin: auto;margin-top: 100px;font-size: 14px;}
    #wos{height: 100px; width: 1000px; background-color: rgb(255, 216, 252);margin: auto;margin-top: 100px; font-size: 13.5px;}
    #zos{height: 100px; width: 1000px; background-color: rgb(97, 138, 61);margin: auto;margin-top: 100px; }
  

input,textarea{display: block; box-sizing: border-box; margin: auto;}


     .seccion1{ background-color:  chartreuse !important;}
.seccion2{background-color: chartreuse !important;}
.introx{background-color: chartreuse !important;}
.formss{background-color: chartreuse !important;}

#tes{ height: 80px; width: 1100px;
margin-left: 40px; font-family: Georgia, 'Times New Roman', Times, serif;}
#tes h1{ font-size: 60px; text-align: center; font-family: Georgia, 'Times New Roman', Times, serif;}
#formulario{ margin-top: 100px; margin-bottom: 20;}
.mail{
  text-decoration: none;
  color: black; 
}
.foto{display: block;margin: auto;}


#inf{ text-decoration: none; color: black;font-family: Georgia, 'Times New Roman', Times, serif; height: 30px;font-size: 30px; margin-bottom: 10px;}

#pieInicio{font-family: Georgia, 'Times New Roman', Times, serif;}
.tee{padding-left: 20px;}
.formx{height: 60px;width: 400px; margin-bottom: 5px; }



header, section, footer{
    width: 1200px;
    margin: auto;
}
body{ background-image: url(img/7.png); background-size: cover;background-attachment: fixed;}
header{
    height: 200px;
    background-color: rgb(88, 149, 28);
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 35px;
    
}
#mine{width: 400px; height: 90px ;margin: auto;}
#bot{width: 1000px; height: 100px; margin:auto;}
footer{height: 110px; background-color: rgb(88, 149, 28);}
section{height: 1400px;background-color: 
  rgba(181, 219, 125, 0.803); padding-top: 60px;}

#pieInicio{height: 110px; background-color: rgb(88, 149, 28);}
.mail{text-decoration: none;color: black;}

#form{width: 1000px; height: 90px; margin: auto;font-family: Minecraft;}
.formis{ margin: 0%; padding: 0%; list-style: none; display: flex;}
.formis li a{display: block;text-decoration: none;color: black; width: 160px; background-color: grey; margin-right: 9px; font-size: 24px; text-align: center;line-height: 100px; }
.formis li a:hover{ background-color: rgb(86, 86, 86); border: 5px solid gray;}

#caja11{height: 300px; width: 500px; margin-left: 40px;
float:left; font-family: Georgia, 'Times New Roman', Times, serif;}
#caja21{height:300px; width: 500px; margin-right: 40px;
float: right; font-size: 25px;; font-family: Georgia, 'Times New Roman', Times, serif;}
#caja31{height:300px; width: 500px; margin-left: 40px; font-size: 20px;
    float: left; margin-top: 40px; font-family: Georgia, 'Times New Roman', Times, serif;}
#caja41{height:300px; width: 500px; margin-right: 40px;
    float: right; margin-top: 40px; font-family: Georgia, 'Times New Roman', Times, serif;}
#caja51{height:300px; width: 500px; margin-left: 40px;
    float: left; margin-top: 40px; font-family: Georgia, 'Times New Roman', Times, serif;}
#caja61{height:300px; width: 500px; margin-right: 40px;
    float: right; margin-top: 40px;font-size: 21px; font-family: Georgia, 'Times New Roman', Times, serif;}
#caja71{height:300px; width: 500px; margin-left: 40px;
    float: left; margin-top: 40px; font-size: 20px;; font-family: Georgia, 'Times New Roman', Times, serif;}
#caja81{height:300px; width: 500px; margin-right: 40px;
    float: right; margin-top: 40px; font-family: Georgia, 'Times New Roman', Times, serif;}

.botones{margin: 0%; padding: 0%; list-style: none; display: flex;}
.botones li a{
    display: block;
    text-decoration: none;
    color: rgb(0, 0, 0);
    width: 160px;
    background-color:gray; 
    margin-right: 9px;
    font-size: 24px;
    line-height: 100px;
    text-align: center;
    font-family:Minecraft;
}
.botones li a:hover{ background-color: rgb(86, 86, 86); border: 5px solid gray;}

#mecanics{height: 1700px; background-color: 
  rgba(181, 219, 125, 0.803);}

#explicacion{ height: 300px; width: 1120px; margin: auto; font-size: 19px; font-family: Georgia, 'Times New Roman', Times, serif;}
 


#posciones{height:300px; width: 500px; margin-left: 40px;
float: left; margin-top: 25px; font-family: Georgia, 'Times New Roman', Times, serif;}

.posciones{width:500px; height: 300px}

#redstone{height:300px; width: 500px; margin-right: 20px; margin-left: 120px;
float: left;margin-top: 25px;; font-family: Georgia, 'Times New Roman', Times, serif;}

.redstone{width:500px; height: 300px;}

#herramienta{height:300px; width: 500px; margin-left: 40px;
float: left;margin-top: 25px; font-family: Georgia, 'Times New Roman', Times, serif;}

.herramienta{height:300px; width:500px;}

#armadura{height:300px; width: 500px; margin-right: 20px; margin-left: 120px;
float: left;margin-top: 25px; font-family: Georgia, 'Times New Roman', Times, serif;}

.armadura{height:300px; width:500px;}

#craftingtable{height:300px; width: 500px; margin-left: 40px;
float: left;margin-top: 25px;; font-family: Georgia, 'Times New Roman', Times, serif;}

.craftingtable{height:300px; width: 500px}

#horno{height:300px; width: 500px; margin-right: 20px;margin-left: 120px;
float: left;margin-top: 25px;; font-family: Georgia, 'Times New Roman', Times, serif;}

.horno{height:300px; width: 500px}


#Encantamientos{height:300px; width: 500px; margin-left: 40px;
float: left;margin-top: 25px;; font-family: Georgia, 'Times New Roman', Times, serif;}

.encantamientos{height:300px; width:500px;}


#elytra{height:300px; width: 500px; margin-right: 40px; margin-left: 120px;
float: left;margin-top: 25px;; font-family: Georgia, 'Times New Roman', Times, serif;}

.elytra{height:300px; width:500px}





#discu{height: 1850px; background-color: 
  rgba(181, 219, 125, 0.803); font-family: Georgia, 'Times New Roman', Times, serif;}

.tab{ width: 1000px; margin: auto;; font-family: Georgia, 'Times New Roman', Times, serif;}

.pigs{width:800px;; font-family: Georgia, 'Times New Roman', Times, serif;}
.mell{width:800px;; font-family: Georgia, 'Times New Roman', Times, serif;}
.cats{width:800px;; font-family: Georgia, 'Times New Roman', Times, serif;}
.stal{width:800px;; font-family: Georgia, 'Times New Roman', Times, serif;}
.blocks{width:800px;; font-family: Georgia, 'Times New Roman', Times, serif;}
.otherside{width:800px;; font-family: Georgia, 'Times New Roman', Times, serif;}
.wait{width:800px;; font-family: Georgia, 'Times New Roman', Times, serif;}

.inter{background-color: chartreuse !important;}
.diss{background-color: chartreuse !important;}
.funn{background-color: chartreuse !important;}

 .mellohi{
  animation: giro3d 3s linear infinite;
  transform-style: preserve-3d;
}
#explicacion{ height: 300px; width: 1120px; text-align: center}

#posiones{height: 300px; width: 500px; margin-left: 40px;
float: left; margin-top: 25px;; font-family: Georgia, 'Times New Roman', Times, serif;}

#redstone{height:300px; width: 500px; margin-right: 20px; margin-left: 120px;
float: left; margin-top: 25px;; font-family: Georgia, 'Times New Roman', Times, serif;}

#herramienta{height:300px; width: 500px; margin-left: 40px;
float: left; margin-top: 25px;; font-family: Georgia, 'Times New Roman', Times, serif;}

#armadura{height:300px; width: 500px; margin-right: 20px; margin-left: 120px;
float: left;margin-top: 25px;; font-family: Georgia, 'Times New Roman', Times, serif;}

#horno{height:300px; width: 500px; margin-left: 40px;
float: left;margin-top: 25px;; font-family: Georgia, 'Times New Roman', Times, serif;}

#mesadecrafteo{height:300px; width: 500px; margin-right: 20px;margin-left: 120px;
float: left;margin-top: 25px;; font-family: Georgia, 'Times New Roman', Times, serif;}

#mesadeencantamientos{height:300px; width: 500px; margin-left: 40px;
float: left;margin-top: 25px;; font-family: Georgia, 'Times New Roman', Times, serif;}

#elytra{height:300px; width: 500px; margin-right: 40px; margin-left: 120px;
float: left;margin-top: 25px;; font-family: Georgia, 'Times New Roman', Times, serif;}

#nombre{ height: 110px; width: 500px;margin-left: 40px;float: left;}


@keyframes giro3d {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

    
.flip-box {
      background-color: transparent;
      width: 500px;
      height: 300px;
      perspective: 1000px;
      
    }

    .flip-box-inner {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.8s;
      transform-style: preserve-3d;
    }

    .flip-box:hover .flip-box-inner {
      transform: rotateY(180deg);
    }

    .flip-box-front,
    .flip-box-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 10px;
      overflow: hidden;
    }

    .flip-box-front {
      background-image: url(img/Brewing-Animation.webp);
      background-size: cover;
      background-position: center;
    }

    .flip-box-back {
      background-color: #333;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: rotateY(180deg);
      font-size: 0.9rem;
      padding: 20px;
      box-sizing: border-box;
      text-align: center;
    }




    .flip-box1 {
      background-color: transparent;
      width: 500px;
      height: 300px;
      perspective: 1000px;
    }

    .flip-box-inner1 {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.8s;
      transform-style: preserve-3d;
    }

    .flip-box1:hover .flip-box-inner1 {
      transform: rotateY(180deg);
    }

    .flip-box-front1,
    .flip-box-back1 {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 10px;
      overflow: hidden;
    }

    .flip-box-front1 {
      background-image: url(img/redstone.webp);
      background-size: cover;
      background-position: center;
    }

    .flip-box-back1 {
      background-color: #333;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: rotateY(180deg);
      font-size: 1.2rem;
      padding: 20px;
      box-sizing: border-box;
      text-align: center;
    }


    .flip-box2 {
      background-color: transparent;
      width: 500px;
      height: 300px;
      perspective: 1000px;
    }

    .flip-box-inner2 {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.8s;
      transform-style: preserve-3d;
    }

    .flip-box2:hover .flip-box-inner2 {
      transform: rotateY(180deg);
    }

    .flip-box-front2,
    .flip-box-back2 {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 10px;
      overflow: hidden;
    }

    .flip-box-front2 {
      background-image: url(img/herramientas.webp);
      background-size: cover;
      background-position: center;
    }

    .flip-box-back2 {
      background-color: #333;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: rotateY(180deg);
      font-size: 1.0rem;
      padding: 20px;
      box-sizing: border-box;
      text-align: center;
    }

    .flip-box3 {
      background-color: transparent;
      width: 500px;
      height: 300px;
      perspective: 1000px;
    }

    .flip-box-inner3 {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.8s;
      transform-style: preserve-3d;
    }

    .flip-box3:hover
    .flip-box-inner3 {
      transform: rotateY(180deg);
    }

    .flip-box-front3,
    .flip-box-back3 {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 10px;
      overflow: hidden;
    }

    .flip-box-front3 {
      background-image: url(img/armadura.jpg);
      background-size: cover;
      background-position: center;
    }

    .flip-box-back3 {
      background-color: #333;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: rotateY(180deg);
      font-size: 1.0rem;
      padding: 20px;
      box-sizing: border-box;
      text-align: center;
    }




    .flip-box4 {
      background-color: transparent;
      width: 500px;
      height: 300px;
      perspective: 1000px;
    }

    .flip-box-inner4 {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.8s;
      transform-style: preserve-3d;
    }

    .flip-box4:hover .flip-box-inner4 {
      transform: rotateY(180deg);
    }

    .flip-box-front4,
    .flip-box-back4 {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 10px;
      overflow: hidden;
    }

    .flip-box-front4 {
      background-image: url(img/horno.png);
      background-size: cover;
      background-position: center;
    }

    .flip-box-back4 {
      background-color: #333;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: rotateY(180deg);
      font-size: 1.2rem;
      padding: 20px;
      box-sizing: border-box;
      text-align: center;
    }



    .flip-box5 {
      background-color: transparent;
      width: 500px;
      height: 300px;
      perspective: 1000px;
    }

    .flip-box-inner5 {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.8s;
      transform-style: preserve-3d;
    }

    .flip-box5:hover .flip-box-inner5 {
      transform: rotateY(180deg);
    }

    .flip-box-front5,
    .flip-box-back5 {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 10px;
      overflow: hidden;
    }

    .flip-box-front5 {
      background-image: url(img/mesadecrafteo.jpg);
      background-size: cover;
      background-position: center;
    }

    .flip-box-back5 {
      background-color: #333;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: rotateY(180deg);
      font-size: 1.2rem;
      padding: 20px;
      box-sizing: border-box;
      text-align: center;
    }


    .flip-box6 {
      background-color: transparent;
      width: 500px;
      height: 300px;
      perspective: 1000px;
    }

    .flip-box-inner6 {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.8s;
      transform-style: preserve-3d;
    }

    .flip-box6:hover .flip-box-inner6 {
      transform: rotateY(180deg);
    }

    .flip-box-front6,
    .flip-box-back6 {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 10px;
      overflow: hidden;
    }

    .flip-box-front6 {
      background-image: url(img/encantamientos.gif);
      background-size: cover;
      background-position: center;
    }

    .flip-box-back6 {
      background-color: #333;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: rotateY(180deg);
      font-size: 0.9rem;
      padding: 20px;
      box-sizing: border-box;
      text-align: center;
    }



     .flip-box7 {
      background-color: transparent;
      width: 500px;
      height: 300px;
      perspective: 1000px;
    }

    .flip-box-inner7 {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.8s;
      transform-style: preserve-3d;
    }

    .flip-box7:hover .flip-box-inner7 {
      transform: rotateY(180deg);
    }

    .flip-box-front7,
    .flip-box-back7 {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 10px;
      overflow: hidden;
    }

    .flip-box-front7 {
      background-image: url(img/elytra.jpeg);
      background-size: cover;
      background-position: center;
    }

    .flip-box-back7 {
      background-color: #333;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: rotateY(180deg);
      font-size: 1.0rem;
      padding: 20px;
      box-sizing: border-box;
      text-align: center;
    }