#game-board{
  background-color: rgb(70, 70, 70);
  border: 2px solid rgb(0, 195, 255);
  position: absolute;
  left: 45rem;
}

body {
margin: 0;
padding: 0;
overflow: hidden;
}

.container {
background: linear-gradient(225deg, #1b43b1, #000000, #000000, #000000, #d13737);
background-size: 300% 300%;
box-sizing: border-box;
display: table;
height: 100vh;
margin: 0;
position: relative;
width: 100vw;
-webkit-animation: Rainbow 25s ease infinite;
-moz-animation: Rainbow 25s ease infinite;
animation: Rainbow 25s ease infinite;
}

@-webkit-keyframes Rainbow {
0% {
  background-position: 94% 0%; }
50% {
  background-position: 7% 100%; }
100% {
  background-position: 94% 0%; } }

.introduction{
  height: 13rem;
  color:white;
  text-align: center;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

h1{
  font-size: 5rem;
  margin-bottom: 1rem;
}

.rules{
  color: white;
  position: absolute;
  left: 1rem;
  top: 17rem;
  width: 43rem;
  
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  border: 2px solid rgb(0, 195, 255);
}

h2{
  font-size: 2rem;
  text-align: center;
}

.rules-paragraph{
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: justify;
  padding: 1rem;
}

.controls{
  color: white;
  position: absolute;
  left: 77rem;
  top: 17rem;
  width: 41rem;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  border: 2px solid rgb(0, 195, 255);
}

.controls-paragraph{
font-size: 1rem;
line-height: 1.5rem;
margin-top: 10rem;
padding: 1rem;
text-align: center;
}

.redbike{
  font-size: 2rem;
  text-align: center;
  color: red;
}

.bluebike{
  font-size: 2rem;
  text-align: center;
  color: cyan;
}

.glow {
  font-size: 80px;
  color: #fff;
  text-align: center;
  -webkit-animation: glow 2s ease-in-out infinite alternate;
  -moz-animation: glow 2s ease-in-out infinite alternate;
  animation: glow 2s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #036897, 0 0 40px #05828d, 0 0 50px #05919e, 0 0 60px #04909c, 0 0 70px #0099a7;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #e22222, 0 0 40px #ee1313, 0 0 50px #ee0909, 0 0 60px #ee0e0e, 0 0 70px #fa3116, 0 0 80px #fb0000;
  }
}

.start-button{
  position: absolute;
  left: 8rem;
  top: 42rem;
  padding: 1rem;
  padding-left: 3rem;
  padding-right: 3rem;
  border-radius: 2rem;
  background-color: rgb(246, 12, 12);
  font-weight: bolder;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1.5rem;
}

h3{
  text-align: center;
  position: absolute;
  left: 13rem;
  color: white;
  top: 36rem;
}

.replay-button{
  position: absolute;
  left: 25rem;
  top: 42rem;
  padding: 1rem;
  padding-left: 3rem;
  padding-right: 3rem;
  border-radius: 2rem;
  background-color: darkcyan;
  font-weight: bolder;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1.5rem;
}

.wasd{
  position: absolute;
  filter:saturate();
  left: 16rem;
  height: 7rem;
  width: 10rem;
}

.arrow-keys{
  position: absolute;
  top: 17rem;
  left: 13rem;
  height: 20rem;
  width: 17rem;
}

.my-logo{
  position: absolute;
  left: 21rem;
  top: 47rem;
  border-radius: 2rem;
  height: 4rem;
  width: 4rem;
}

.my-logo:hover{
  animation: bounce;
  animation-duration: 1s;
}

@keyframes bounce {
  0%, 100%, 80% {
      transform: translateY(0);
  }
  40% {
      transform: translateY(-30px);
  }
  60% {
      transform: translateY(15px);
  }
}