@font-face {
  font-family: "HARRYP";
  src: url(../fonts/HARRYP__.TTF);
}
@font-face {
  font-family: "RINGM";
  src: url(../fonts/RINGM___.TTF);
}
@font-face {
  font-family: "NarniaBLL";
  src: url(../fonts/NarniaBLL.ttf);
}
.header-area, footer{
  height: 14.5vh important!;
}
html {
  width: 100%;
  height: 100%;
  background-color: White;
}

body {
  min-height: 100vh;
   /* border:15px solid black; */
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: left top;
  background-size: 100% 100%;
  position: relative;
  z-index: 0;
  color: white;
  display: table;
  width: 100%;
  height: 100%;
  border: 20px solid black;

}
h1{
  font-family: 'Fredoka One', cursive;

}
h2,.negro{
   color:black;
}

#friki::before{
  content: "\1F3AC";
  font-size: 50px;
}
.seleccion::after,.seleccion::before{
  content: "\2B9D";
  font-size: 25px;
  color: darkred;
}

.contenedor{
  height: 80vh;
}
.carrousel-img{
  margin-top: 11vh;
  max-width: 100%;
  height: auto;
}
.incorrectas,
.correctas {
    /* display: flex; */
    border-radius: 50%;
    padding: 1% 0%;
}

.correctas,
.incorrectas{
    /* display: inline; */
    text-align: center;
}
.harry-potter{
  font-family: "HARRYP";
  font-size: 50px;
}
.peque{
  font-size: 25px!important;
}
.mpeque{
  font-size: 15px !important;
}
.med{
  font-size: 35px;
}
.anillos{
  font-family: "RINGM";
  font-size: 35px;
}
.narnia{
  font-family: NarniaBLL;
  font-size: 35px;
}
.bloque2{
  display:none;
}
.caja{
  height: 15vw!important;
}
.material-icons.md-48 { font-size: 48px; }
.movil{
  display: none;
}
.desktop{
  display: inline-flex;
}
.homemobile{
  display: none;
}
@media only screen and (max-width: 992px) {
  #nombre,#nombre2,.ranking, .desktop,.homedesktop{
    display:none;
  }
  .homemobile{
    display: block;
  }
  .movil{
    display: inline-flex;
    justify-content: center;
  }
  .seleccion::after, .seleccion::before{
    padding-top: 5%;
    content: "\2B9F";
    font-size: 25px;
    color: darkred;
  }
  .carrousel-img{
    margin-top: 5vh;
    max-width: 100%;
    height: auto;
  }
  #friki::before{
    content: "\1F3AC";
    font-size: 25px;
  }
  .incorrectas,
.correctas {
    /* display: flex; */
    border-radius: 25px;
    padding: 5px;
}
}