#menuScreen {
  position: absolute;
  background-color: greenyellow;
}

.main {
  background-color: rgb(218, 208, 208);
  width: 100vw;
  height: 100vh;
  /*
  min-width: 1400px;
  min-height: 900px;
  */
  background-image: url("./static//images/cube.svg");
  background-size: 12% 12%;
}

.container {
  margin-left: 0;
  position: absolute;
  width: 70%;
  height: 80%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  min-width: 980px;
  min-height: 720px;
}




.audio-icon {
  position: absolute;
  width: 7%;
  right: 1%;
  top: 1%;
  fill: yellow;
}

.audio-icon:hover {
  fill: greenyellow;
  cursor: pointer;
}

#wave1, #wave2, #wave3 {
	animation: soundwave 1s ease-out infinite;
  opacity: 0;
}
#wave1 {animation-delay: 0s;}
#wave2 {animation-delay: 0.1s;}
#wave3 {animation-delay: 0.2s;}

@keyframes soundwave {
	0% {transform: translateX(-40px); opacity: 0}
  20% {opacity: 1}
  100% {transform: translateX(20px);}
}


#logo {
  left: 50%;
  top: 5%;
  transform: translateX(-50%);
  width: 80%;
  height: 30%;
  position: absolute;
}
.menu-btn {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  width: 35%;
}

.menu-btn > button {
  margin-top: 7%;
  margin-bottom: 7%;
  height: 6vh;
  border-radius: 2vw;
  background-color: yellow;
  font-family: Arial, Helvetica, sans-serif;
  font-size: large;
  font-weight: bold !important;
  outline: none;
}

#singlePlayer,
#twoPlayer,
#game-over {
  position: absolute;
  background-color: black;
  width: 70%;
  height: 80%;
}

#win-game {
  position: absolute;
  background-color: black;
  width: 70%;
  height: 80%;
}

#singlePlayer.row {
  height: 100%;
}

.dx {
  border: solid white 1px;
}

#nextT {
  height: 30%;
}
#score {
  height: 10%;
}

#level {
  height: 10%;
}
#instruc {
  height: 50%;
}
.rrc {
  background-color: rgb(207, 199, 120);
  font-family: Arial, Helvetica, sans-serif;
  font-size: large;
  font-weight: bold !important;
  color: yellow;
  text-align: center;
  border: solid 1px white;
}

.blockImg {
  position: absolute;
  height: 10%;
  width: 100%;
}

audio {
  display: none;
}

button :hover {
  cursor: pointer;
}


.blockblock{
  border-radius: 20%;
}
.gameover {
  padding: 1em;
  font-family: "Press Start 2P", Arial, sans-serif;
  text-transform: uppercase;
  text-align: center;
  color: #2f99ff;
  text-shadow: 0px 2px #255fcc;
  animation: var(--animation) var(--speed) infinite var(--easing);
}

.win {
  padding: 1em;
  font-family: "Press Start 2P", Arial, sans-serif;
  text-transform: uppercase;
  text-align: center;
  color: #2f99ff;
  text-shadow: 0px 2px #255fcc;
  animation: var(--animation) var(--speed) infinite var(--easing);
}

h1 {
  font-size: 3em;
}

@keyframes glitch {
  0%,
  12%,
  15%,
  52%,
  55%,
  82%,
  85%,
  100% {
    opacity: 1;
    transform: scaleX(1) scaleY(1);
  }
  13% {
    opacity: 0.8;
    transform: scaleY(2);
    color: #0ff;
  }
  53% {
    opacity: 0.8;
    transform: scaleX(0.7);
    color: #f0f;
  }
  83% {
    opacity: 0.8;
    transform: rotate(-10deg);
    color: #ff0;
  }
}

@keyframes hue {
  13% {
    color: #0ff;
  }
  53% {
    color: #f0f;
  }
  83% {
    color: #ff0;
  }
}

@keyframes shrink {
  0% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.5);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes fade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
:root {
  --animation: glitch; /* glitch, hue, fade, shrink */
  --speed: 2s;
  --easing: linear;
}


.center-item {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}