body {
  margin: 0;
  background: #111;
  color: white;
  font-family: Arial;
  overflow: hidden;
}

.hero {
  height: 100vh;

  display: flex;
  align-items: center;
  justify-content: space-around;

  padding: 50px;
}

/* IZQUIERDA */

.left {
  width: 50%;
}

.left h1 {
  font-size: 70px;
  margin: 0;
}

.left p {
  font-size: 25px;
  color: #aaa;
}

/* BOTON */

button {
  margin-top: 20px;

  background: #110558;
  color: white;

  border: none;
  padding: 15px 30px;

  font-size: 20px;

  border-radius: 10px;

  cursor: pointer;

  transition: 0.3s;
}

button:hover {
  transform: scale(1.1);
  background: #0025a0;
}

/* DERECHA */

.right {
  width: 50%;
  display: flex;
  justify-content: center;
}

/* GIF */

.gif {
  width: 600px;

  animation: fadeUp 1.5s ease;

  animation:
fadeUp 1.5s ease,
float 3s ease-in-out infinite;
}

/* ANIMACION */

@keyframes fadeUp {

  from {
    opacity: 0;
    transform: translateY(80px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}

@keyframes float {

  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0px);
  }

}