video
  {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -10;
    object-fit: cover;
  }

body
{
  background-color: black;
  cursor: url(../../../Imagenes/Laferrerecursor.png),auto;
}

area
{
  cursor: url(../../../Imagenes/Homecursor.png),auto;
}

.centro
{
  position: relative;
  width: 50%;
  background: silver;
}
#divcara
{
  display: inline-block;
  margin-right: 2em;
}
#divceca
{
  display: inline-block;
  margin-left:2em;
}
.Cara
{
  margin-right: 2%;
}
.Ceca
{
  margin-left: : 2%;

}
.instrucciones
{
  width: 50%;
  background: grey;
}

.parrafitoinstructivo
{
  position: relative;
  text-align: left;
  font-weight: bold;
  margin: 0 1em 0 1em;
}

.aire
{
  background: green;
  opacity: 50%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index:50;
}

.airedentro
{
  border-radius: 1em;
  border: 0.5em solid white;
  opacity: 100%;
  background: grey;
  width: 25%;
  height: 50%;
  position: fixed;
  top: 25%;
  left: 37.5%;
  z-index: 99;
}

.a1
{
  display: none;
}

.volver
{
  color: black;
}

.imagenresultado
{
  color: black;
}

@media screen and (max-width: 580px)
{
  .centro
  {
    width: 100%;
  }
  .instrucciones
  {
    width: 100%;
  }
}
@media screen and (max-width: 720px) and (min-width: 581px)
{
  .centro
  {
    width: 75%;
  }
  .instrucciones
  {
    width: 75%;
  }
  .Cara
  {
    width: 75%;
  }
  .Ceca
  {
    width: 75%;
  }

  #inputcara
  {
    width: 30%;
  }

  #inputceca
  {
    width: 30%;
  }
}

@media screen and (max-width: 860px) and (min-width: 721px)
{
  .centro
  {
    width: 60%;
  }
  .instrucciones
  {
    width: 60%;
  }
  .Cara
  {
    width: 75%;
  }
  .Ceca
  {
    width: 75%;
  }

  #inputcara
  {
    width: 50%;
  }

  #inputceca
  {
    width: 50%;
  }
}
@media screen and (min-width: 1361px)
{

    .centro
    {
      width: 50%;
    }
    .instrucciones
    {
      width: 50%;
    }
    .Cara
    {
      width: 120%;
    }
    .Ceca
    {
      width: 120%;
    }

    #inputcara
    {
      width: 50%;
    }

    #inputceca
    {
      width: 50%;
    }
    #divcara
    {
      margin-right: 5em;
    }
    #divceca
    {
      margin-left: 5em;
    }
}
/*Celulares*/
@media (max-device-width: 600px)
{
  .centro
  {
    width: 90%;
  }
  .Cara
  {
    width: 120%;
  }
  .Ceca
  {
    width: 120%;
  }
  form p
  {
    font-size: 35px;
  }
  #divcara
  {
    margin-right: 5em;
  }
  #divceca
  {
    margin-left: 5em;
    margin-right: 2em;
  }
  .instrucciones
  {
    width: 90%;
  }

  form input
  {
        font-size: 20px;
  }
  #inputcara
  {
    width: 100%;

  }

  #inputceca
  {
    width: 100%;
  }

  #inputlanzar
  {
    font-size: 30px;
  }

  #aca
  {
    font-size: 35px;
  }

  .parrafitoinstructivo
  {
    font-size: 16.7px;
    font-weight: bolder;
  }

  .airedentro
  {
    width: 50%;
    height: 50%;
  }

  #volver
  {
    font-size: 35px;
  }

  .imagenresultado
  {
    width: 100%;
  }
}