#game-canvas {
  /* background-color: purple; */
  border: 1px solid black;
  margin-bottom: 20px;
  background-image: url('../assests/images/wave.jpg');
  background-size: 880px 650px;
  display: flex;
  /* justify-content: center; */
}

.game-body {
  display: flex;
  /* justify-content: center; */
}

#background-canvas {
  /* background-color: purple; */
  border: 1px solid black;
  margin-bottom: 20px;
}

h1 {
  /* text-align: center; */
  font-size: 64px;
   background: -webkit-linear-gradient(rgb(254, 26, 26), rgb(116, 54, 238), rgb(81, 247, 81));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 10px;
}

html {
  background-color: rgb(0, 0, 0);
  align-content: center;
}

.container-of-all {
  justify-content: center;
  flex-direction: column;
  position: absolute;
  margin-left: 200px;
}

.header-container {
  display: flex;
  align-content: center;
  width: 870px;
  /* background-color: blue; */
  justify-content: space-between;
}

.linkedin-icon {
  height: 80px;
  width: 80px;
}

.github-icon {
  height: 80px;
  width: 90px;
}

.modal-on {
  font-size: 34px;
  font-family: sans-serif;
  color: white;
  position: absolute;
  display: flex;
  top: 400px;
  left: 290px;
  opacity: 0.5;
}

.modal-off {
  display: none;
}

#music {
  color: white;
}

.how-to-play-container{
  /* display: flex; */
  /* flex-direction: column; */
}

.how-to-play {
  width: 780px;
  /* border: 1px solid white; */
  display: flex;
  flex-direction: column;
  /* align-content: center; */
  justify-content: center;
  margin-left: 60px;
}

.level {
  position: absolute;
  display: flex;
  flex-direction: column;
  left: 890px;
}

#score {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.game-over-on {
  font-size: 34px;
  font-family: sans-serif;
  color: white;
  position: absolute;
  display: flex;
  top: 400px;
  left: 250px;
  opacity: 0.5;
}

.game-over-off {
  display: none;
}