body {
  background-image: url('../img/space.jpg');
  font-family: 'Rubik Moonrocks', cursive;
  /* overflow: hidden; */
}

.spacebetween {
  display: flex;
  color: white;
  flex-direction: row;
  justify-content: space-evenly;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  background: linear-gradient(
    45deg,
    #00076f,
    #44008b,
    #9f45b0,
    #e54ed0,
    #ffe4f2
  );
  /* the seconds here make it faster and infinite makes it go on forever */
  animation: gradient 5s linear infinite;
  /* alternate if it moves all way to end it will movebackwards automatically */
  animation-direction: alternate;
  /* the more color we have the more we need to increase these properties */
  background-size: 600% 150%;
  border: 2px solid beige;
  height: 400px;
  width: 500px;
  color: black;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  font-weight: bold;
  color: white;
}
.card2 {
  background: linear-gradient(
    45deg,
    #00076f,
    #44008b,
    #9f45b0,
    #e54ed0,
    #ffe4f2
  );
  /* the seconds here make it faster and infinite makes it go on forever */
  animation: gradient 5s linear infinite;
  /* alternate if it moves all way to end it will movebackwards automatically */
  animation-direction: alternate;
  /* the more color we have the more we need to increase these properties */
  background-size: 600% 150%;
  border: 2px solid beige;
  height: 200px;
  width: 250px;
  color: black;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  font-weight: bold;
  color: white;
}
.retry {
  background-color: red;
  /* alternate if it moves all way to end it will movebackwards automatically */

  /* the more color we have the more we need to increase these properties */

  border: 2px solid beige;
  height: 400px;
  width: 500px;
  color: black;
  border-radius: 10px;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  font-weight: bold;
  color: white;
  font-size: 1.2rem;
}
.text {
  color: white;
  font-size: 1.2rem;
}

#container2 {
  height: 900px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.keycontainer {
  display: flex;
}

.keys {
  display: flex;
  color: white;

  font-weight: bold;
  font-size: 1.5rem;

  margin-bottom: 10px;
  border: 2px solid beige;
  padding: 0 8px;
}

.toggle {
  background-color: white;
  color: black;
}

#start-button {
  color: white;
  background-color: black;
  border-radius: 8px;
  width: 100px;
  height: 30px;
  margin-top: 20px;
  font-family: 'Rubik Moonrocks', cursive;
}
#start-button:hover {
  background-color: red;
}

.heart {
  height: 20px;
  width: 30px;
}
/* .shuttle1 {
  height: 40px;
  width: 40px;
  align-self: flex-start;
  animation-name: shuttlearound;
  animation-duration: 15s;

  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
} */
.spaceshuttle {
  margin-top: 30px;
  width: 230px;
  height: 80px;
  animation-name: fly;
  animation-duration: 5s;
  animation-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0);
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
}
.link {
  text-decoration: none;
  color: black;
}
.blink {
  animation: blinker 0.1s linear infinite;
}

.hidden {
  display: none;
}
#hidden {
  display: none;
}
#show {
  display: flex;
}
.show {
  display: flex;
}
/* keyframes has to match your animations name */
@keyframes blinker {
  50% {
    opacity: 0;
  }
}

@keyframes fly {
  from {
    /*  this is what our animation looks like at 100 percent so at the end of X */
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}
/* this is needed to animate the movement  */
@keyframes gradient {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}