@font-face{
  font-family: "digitalFont";
  src: url('digital-7.ttf');
}

:root{
  --verdeJogo: rgba(106, 129, 105, 0.863);
  --verdeEscuroJogo: rgba(103, 126, 106, 0.986);
  --pretoJogo: rgba(10, 0, 0, 0.678) ;
  --gradienteAzul: linear-gradient(to bottom left, #00000a 0%, #1f1f1f 51%);
}

h3 {
  font-family: digitalFont;
  font-size: 1.4em;
  color: #00000ac4;
  height: 20px;
  
}


.container {
  grid-area: tela;
  

}

.grid {
  grid-area: tela;
  width: 200px;
  height: 400px;
  display: flex;
  flex-wrap: wrap;
  border: 7px solid var(--verdeEscuroJogo);
  outline: 2px solid var(--pretoJogo) ;
  outline-offset: -7px;
  box-shadow: inset 0 0 9px rgba(0, 0, 0, 0.247);
  padding: 1px;
}

.grid div {
  height: 20px;
  width: 20px;
}

.tetromino {
  background-color: var(--pretoJogo);
  border-radius: 3px;
  outline: 2px solid var(--verdeEscuroJogo);
  outline-offset: -4px;
  box-shadow: 2px 1px 1px rgba(151, 140, 140, 0.164), inset 0px 7px rgba(245, 245, 245, 0.050);
    
}

.mini-grid {
  /*margin-left: 50px;*/
  width: 60px;
  height: 60px;
  display: flex;
  flex-wrap: wrap;
  /*background-color: rgba(115, 144, 114, 0.863);*/
  border: 2px solid rgba(0, 0, 0, 0.678);
  outline-offset: -7px;
  
}

.mini-grid div {
  height: 15px;
  width: 15px;
}

.classToBeAdded {
  display: none !important;
}


button{
  background-color: rgb(216, 194, 0);
  border-radius: 50px;
  height: 25px;
  width: 25px;
  border: 2px solid rgba(14, 14, 0, 0.767);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.301), inset -1px -2px 2px 2px rgba(0, 0, 0, 0.404);
  cursor: pointer;
}

button:focus{
  outline: none;
}

#start-button {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  background-color: rgb(216, 194, 0);
  border-radius: 50px;
  height: 25px;
  width: 25px;
  border: 2px solid rgba(14, 14, 0, 0.767);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.301), inset -1px -2px 2px 2px rgba(0, 0, 0, 0.404);
  cursor: pointer;

}

.containerTela{
  grid-area: telaCompleta;
  filter: drop-shadow(0 0 5px rgb(61, 61, 61));
  background-color: var(--verdeEscuroJogo);
  justify-items: center;
  align-items: center;
  width: auto;
  height: 420px;
  box-shadow: inset -3px -2px 3px rgba(0, 0, 0, 0.349) ;
  outline: 4px solid rgb(119, 33, 62);
  outline-offset: 9px;
  border: 9px outset rgba(1, 4, 37, 0.74) ;  /*ridge borda*/
  display: grid;
  grid-template-columns: 220px 90px;
	grid-template-rows: auto 90px auto;
	grid-template-areas:
		"tela score"
    "tela minitela";

}



.containerMiniGrid {
  grid-area: minitela; 

}

.containerMenu {
  grid-area: score;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 80px;
}



span{
  display: flex;
  justify-content: center;
  
}

.externo4 {
  display: grid;
  grid-area: botoesMenores;
  align-items: center;
  justify-content: center;
  height: auto;
  
}

.ext4Div{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 340px;
  height: 64px;
   
}

.ext4Div > h4{
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 6px;
  color: rgba(255, 255, 255, 0.582);
  font-family: Arial, Helvetica, sans-serif;

}

.ext4Div div{
  display: flex;
  justify-content: center;
  padding: 28px;
  padding-bottom: 0px;
  padding-top: 15px;
}

.game{
  display: grid;
  justify-items: center;
  align-items: center;
  max-width: 450px;
  border: 4px solid rgb(3, 3, 20);
  border-radius: 18px;
  background-image: var(--gradienteAzul);
  box-shadow: 2px 5px 9px rgba(0, 0, 0, 0.301), inset 0px -9px rgba(61, 57, 57, 0.295), inset 0px -25px rgba(61, 57, 57, 0.295);
  min-height: 900px;
  min-width: 450px;
  margin: auto;
  grid-column: 360px;
	grid-template-rows: auto 80px 80px auto;
	grid-template-areas:
		"telaCompleta"
    "meio"
		"botoesMenores"
    "direcionais";
}

.direcionais {
  
  grid-area: direcionais;
  display: grid;
  justify-content: center;
  justify-items: center;
  width: 420px;
  height: 120px;
  grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"quatroBtns rotacao"

}

.direcionaisEsq{
  grid-area: quatroBtns;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

}

.direcionaisEsq > div {
  display: flex;
  height: 38px;
  width: 40px;
  justify-content: center;
  
}

#centro{
  width: 40px;
}

.direcionaisEsq > div> button{
  width: 40px;
  height: 40px;
  
}

#rotate-button{
  width: 90px;
  height: 90px;
  border-radius: 50%;
  margin-top: 15px;
  margin-left: 10px;
}

#direcionalEsqMaior{
  width: 210px;
}

.velocidade{
  grid-area: velocidade;
}


.elevacao{
  grid-area: meio;
  background-image: linear-gradient(rgb(24, 23, 23), rgb(39, 39, 39), rgb(24, 23, 23));
  width: 450px;
  height: 90px;
  box-shadow: inset 0px 4px rgba(43, 43, 43, 0.315), inset 0px -4px rgba(43, 43, 43, 0.192) ;
  border-radius: 15px;
   
}

html{
  margin: auto;
  background-color: black;
  background-image: linear-gradient(to bottom right, #381722, #667D69, #1F1F1F);
  /*padding-top: 20px;*/
  background-repeat: no-repeat;
  min-height: 100%;
  
}