body {
  width: 100wh;
  height: 100vh;
  color: #fff;
  background-color: black;
  background-image: url("../img/background.jpg");
  background-size: center;
  background-repeat: no-repeat;
  background-position: 120% 50%;
}

.shake {
  animation: shake-animation 4.72s ease infinite;
  transform-origin: 50% 50%;
}

.element {
  margin: 0 auto;
  width: 150px;
  height: 150px;
  background: red;
}

@keyframes shake-animation {
  0% {
    transform: translate(0, 0);
  }

  1.78571% {
    transform: translate(5px, 0);
  }

  3.57143% {
    transform: translate(0, 0);
  }

  5.35714% {
    transform: translate(5px, 0);
  }

  7.14286% {
    transform: translate(0, 0);
  }

  8.92857% {
    transform: translate(5px, 0);
  }

  10.71429% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}

.header {
  padding-top: 30px;
  padding-bottom: 30px;
}

h1 {
  color: #ffffff;
  padding-top: 20px;
}

.boton1 {
  width: 90%;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: 800;
}

.boton2 {
  width: 90%;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: 600;
}

@media (max-width: 600px) {
  body {
    background-image: url("../img/background2.jpg");
    background-size: center;
    background-repeat: no-repeat;
    background-position: 0% 50%;
  }
}

@media (min-width: 601px) and (max-width: 800px) {
  body {
    background-image: url("../img/background2.jpg");
    background-size: center;
    background-repeat: no-repeat;
    background-position: 120% 50%;
  }
}