*{
  box-sizing:border-box;
  font-family: 'Roboto Mono', monospace;
}

body{
  display: flex; 
  align-items: center;
  justify-content: center;
  flex-direction: column;

  background-color: black;
  color: white; 

}


/* HEADINGS */
h1{
  text-align: center;
}

h3{
  text-align: left;
  margin: 2rem;
}


/* START */

.start{
  height: 4rem; 
  width: 14rem;
  margin: 2rem;  
  z-index: 1;

}

#start-game{
  height: 4rem; 
  width: 7rem;
  margin: 2rem;  
}

/* MAIN */
main{
  display: flex;
  flex-direction: column; 
  align-items: center;
  justify-content: center;
  
}

.board{
  height: 40vh;
  width: 40vh; 
  margin-top: 17vh; 
  box-shadow:  0 0 20px 0 rgba(0, 0, 0, 0.2); 
  display:flex; 
  flex-wrap: wrap; 
}

.controls {
  margin: 1rem; 
  border: none; 
  width: 40vh; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#left, #right, #down{
  width: 4rem; 
}
#left-right{
  display: flex;
  flex-direction: row;
  width: 40vh; 
  justify-content: space-around;
}



/* USAGE INFO */
.usage-info{
  width: 4rem; 
  font-size: 0.8rem;
  margin-top: 2rem; 
}

/* THEME BUTTON */
#theme{
  margin-bottom: 4rem; 
}

/* PLAYER-INFO */

.player-info{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 15vh; 
  position: absolute; 

  left: 0; 
  right: 0; 
  top: 0; 
  margin-top: auto; 
  margin-left: auto; 
  margin-right: auto; 
}

.status-message{
  height: 4rem; 
  width: 20rem;
  margin-top: 1rem;  
  margin-bottom: 3rem;
}

.game-blocks{
  margin: 2rem; 
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#currentBlock{
  height: 10rem;
  width: 10rem; 
  box-shadow:  0 0 1rem 0 rgba(0, 0, 0, 0.2); 
  display:flex; 
  flex-wrap: wrap; 
}

.score{
  display: flex; 
  flex-direction: column; 
}
#high-score, #current-score{
  margin: 1rem; 
}

/* BLOCKS */
.cell{
  border: 0.2px solid grey; 
}

.o{
  background-color: yellow;
  border: none; 
  box-shadow: 0px 0px 0.7rem black inset;
}

.t{
  background-color: purple;
  border: none; 
  box-shadow: 0px 0px 0.7rem black inset;
}

.i{
  background-color: lightblue;
  border: none; 
  box-shadow: 0px 0px 0.7rem black inset;
}

.l{
  background-color: orange;
  border: none; 
  box-shadow: 0px 0px 0.7rem black inset;
}

.j{
  background-color: blue;
  border: none; 
  box-shadow: 0px 0px 0.7rem black inset;
}
.s{
  background-color: green;
  border: none; 
  box-shadow: 0px 0px 0.7rem black inset;
}
.z{
  background-color: red; 
  border: none; 
  box-shadow: 0px 0px 0.7rem black inset;
}

/* PILE */

.pile{
  background-color: grey
}

/* MEDIA QUERIES */
@media only screen and (min-width: 850px) {
  body {
    flex-direction: row-reverse; 

  }

  .start{
    height: 4rem; 
    width: 14rem;
    margin: 2rem;  
  }

  #start-game{
    height: 2rem; 
    width: 7rem;
    margin: 2rem;  
  }

  .player-info{
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    height: 60vh; 
    width: 20vw;
    position: static;

    margin-top: 0; 
    margin-left: 0; 
    margin-right: 0; 
  }

  .board{
    margin-top: 0; 

    height: 65vh;
    width: 65vh; 
    
    box-shadow:  0 0 20px 0 rgba(0, 0, 0, 0.2); 
    display:flex; 
    flex-wrap: wrap; 
  }

  .status-message{
    height: 4rem; 
    width: 40rem;
    margin-top: 1rem;  
    margin-bottom: 3rem;
  }
  .controls {
    display: none;
  }

  .usage-info{
    width: 4rem; 
    font-size: 0.8rem;
  }
  #theme{
    margin-bottom: 0; 
  }
}