body {
  background-image: url("../../assets/img/fondoLand.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

html {
  margin: 0;
  padding: 0;
}

#claves {
  width: 90%;
  margin-top: 20%;
}

#sol {
  width: 20%;
  border-radius: 15px;
  box-shadow: 16px 16px 22px -3px rgba(0,0,0,0.80);
  transition: all 300ms ease-in-out;      
}
#sol:hover{
  cursor: pointer;
  transform:scale(1.1);
} 

#fa {
  width: 20%;
  border-radius: 15px;
  box-shadow: 16px 16px 22px -3px rgba(0,0,0,0.80);
  transition: all 300ms ease-in-out;      
}  
#fa:hover{
  cursor: pointer;
  transform:scale(1.1);
}

#do {
  width: 20%;
  border-radius: 15px;
  box-shadow: 16px 16px 22px -3px rgba(0,0,0,0.80);
  transition: all 300ms ease-in-out;      
}  
#do:hover{
  cursor: pointer;
  transform:scale(1.1);
}


.ayuda{
  position: absolute;
  right: 7%;
  top: 5%;
}
.ayuda:hover{
  cursor: pointer;
}

@media (max-width: 767px) {
  body {
    background-image: url("../../assets/img/fondoPort.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }
  #claves {
    width: 100%;
    margin-top: 42%;
  }
  #sol {
  width: 20%;
  }
  #fa {
  width: 20%;
  }
  #do {
  width: 20%;
  }
  .ayuda{
    width: 15%;
    position: absolute;
    right: 5%;
    top: 1%;
  }
}