/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image: url("90s.gif");
  background-repeat: no-repeat;
  background-size: 1500px 4500px;
  text-align: center;
  text-decoration-line: overline underline;
  text-decoration-color: White;
  text-shadow: 1px 1px #000000;
  color: White;
}

#Cajamover {
  width: auto;
  height: auto;
  animation: mymove 3s infinite;
  animation-direction: alternate;
}

#Cajaboba {
  width: 250px;
  height: 125px;
  text-align: center;
  border: 2px solid;
  border-color: darkgreen;
  padding: 5px;
  box-shadow: 5px 5px;
  color: green;
}

#Cajalista {
  width: 250px;
  height: 125px;
  text-align: center;
  border: 2px solid;
  border-color: darkred;
  padding: 5px;
  box-shadow: 5px 5px;
  color: red;
}

#Cajaregistradora {
  width: 250px;
  height: 100px;
  text-align: center;
  border: 2px solid;
  border-color: darkblue;
  padding: 5px;
  box-shadow: 5px 5px;
  color: blue;
}

#Cajachorra {
  width: 250px;
  height: 125px;
  text-align: center;
  border: 2px solid;
  border-color: black;
  padding: 5px;
  box-shadow: 5px 5px;
  color: purple;
}

.a {
  font: 30px Georgia, sans-serif;
}

.b {
  font: italic small-caps bold 20px/30px Georgia, serif;
}

div {
  width: 225px;
  height: 50px;
  background: black;
  position: relative;
  animation: mymove 2s infinite;
  animation-direction: alternate;
}

divo {
  width: auto;
  height: auto;
  background: none;
  position: relative;
  animation: mymove 2s infinite;
  animation-direction: alternate;
}

@keyframes mymove {
  from {left: 350px;}
  to {left: 750px;}
  back-to {left: 350px;}
}