* {
  padding: 0;
  margin: 0;
}
html{
  background-image: url("./joe-woods-4Zaq5xY5M_c-unsplash.jpg");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: cover;
}

body {
  background-color: #ffffff;
  background-image: url("./joe-woods-4Zaq5xY5M_c-unsplash.jpg");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: all 0s;
  position: relative;
  padding: 0;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}
img{
  position: absolute;
  top:0;
  left: 0;
  width: 100vw;
  height: 100vh; 
}
#top {
  position: fixed;
  top: 5vh;
  left: 0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
  font-family: "Lexend Zetta", sans-serif;
  width: 100%;
  height: 15vh;
}

#audio {
  color: #424345;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 10vh;
  left: 45vh;
  font-size: 140%;
  opacity: 0.9;
  width: 5vmin;
  height: 5vmin;
}

#audio:hover {
  color: #f800a5;
  opacity: 1;
  cursor: pointer;
}

#name {
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000000e0;
  font-family: "Lexend Zetta", sans-serif;
  font-size: 360%;
  width: 100vw;
  height: 55%;
}

#clock {
  position: absolute;
  top: 55%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Lexend Zetta", sans-serif;
  color: #01b3ff;
  width: 100%;
  height: 25%;
}

#score {
  position: absolute;
  top: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Lexend Zetta", sans-serif;
  color: #ff3bc7;
  width: 100%;
  height: 20%;
}

#middle {
  padding: 0;
  margin: 5vh auto;
  position: fixed;
  top: 16vh;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 66vh;
}

#tetris {
  padding: 0;
  margin: 0 auto;
  background: #000000e0;
  border: 1px solid #000000e0;
  height: 100%;
}

#bottom {
  padding: 0;
  margin: 0 auto;
  position: fixed;
  top: 88vh;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 12vh;
}

#start {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 90vh;
  border-radius: 50%;
  width: 6vmin;
  height: 6vmin;
}

.fa-play {
  color: #ff3bc7;
  z-index: 20;
  border: none;
  font-size: 150%;
}

.fa-play:hover {
  font-size: 180%;
}

.fa-refresh {
  color: #01b3ff;
  z-index: 20;
  border: none;
  font-size: 150%;
}

.fa-refresh:hover {
  opacity: 1;
}

#alert {
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 40vh;
  width: 100vw;
  height: 30vh;
}

#background {
  background-color: #ff3bc7ab;
  opacity: 0.8;
  position: absolute;
  top: 0;
  width: 100vw;
  height: 30vh;
}

#gameOver {
  /* background-color:yellow; */
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0vh;
  font-size: 500%;
  font-family: "Lexend Zetta", sans-serif;
  color: white;
  width: 100vw;
  height: 30vh;
}

#left {
  display: none;
  z-index: 11;
  position: fixed;
  top: 16vh;
  left: 0;
  width: 22vw;
  height: 56vh;
}

#right {
  display: none;
  z-index: 11;
  position: fixed;
  top: 16vh;
  right: 0;
  width: 22vw;
  height: 56vh;
}

#turn {
  display: none;
  z-index: 11;
  position: fixed;
  top: 15vh;
  right: 22vw;
  width: 56vw;
  height: 56vh;
}

#speedy {
  display: none;
  z-index: 11;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100vw;
  height: 5vh;
}

#instruction {
  display: none;
  position: fixed;
  top: 10vh;
  z-index: 30;
  width: 80vw;
  height: 80vh;
}

@media only screen and (max-height: 530px) {
  #name {
    font-size: 200%;
  }

  .fa-refresh,
  .fa-play {
    font-size: 100%;
  }

  #clock,
  #score {
    font-size: 90%;
  }
}

@media only screen and (max-width: 530px) {
  #left {
    display: initial;
  }

  #right {
    display: initial;
  }

  #turn {
    display: initial;
  }

  #speedy {
    display: initial;
    height: 18%;
  }

  #name {
    color: #e63e00;
    font-size: 300%;
  }

  #middle {
    height: 58vh;
  }

  #bottom {
    top: 74vh;
    height: 26vh;
  }

  #start {
    top: 77vh;
  }

  #alert {
    top: 30vh;
  }

  #gameOver {
    font-size: 8vmin;
  }

  #instruction {
    display: initial;
  }
}

@media only screen and (min-width: 700px) and (max-width: 1024px) and (min-height: 1024px) and (max-height: 1400px) {
  #left {
    display: initial;
  }

  #right {
    display: initial;
  }

  #turn {
    display: initial;
  }

  #speedy {
    display: initial;
    height: 18%;
  }

  #name {
    color: #e63e00;
    font-size: 300%;
  }

  #middle {
    height: 64vh;
  }

  #bottom {
    top: 80vh;
    height: 20vh;
  }

  #start {
    top: 84vh;
  }

  #alert {
    top: 30vh;
  }

  #gameOver {
    font-size: 8vmin;
  }

  #instruction {
    display: initial;
  }
}

@media only screen and (max-width: 699px){
  #gameOver {
    font-size: 8vmin;
  }
}