* {
  font-family: 'Electrolize', sans-serif;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  margin: 0px;
  background-image: linear-gradient(rgb(203 203 203 / 54%), rgb(163 163 163 / 51%)), url(../media/adventureTimeBackground.jpeg);
  background-size: cover;
  background-position: bottom;
}

header {
  width: 100%;
  text-align: center;
  font-size: 3rem;
  margin: 0px;
}

header h1 {
  margin-top: 50px;
  margin-bottom: 0px;
  color:rgb(49, 49, 49)
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 20px;
  max-height: 100%;
}

.panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 200px;
  background-color: #7da298;
}

#left {
  align-items: flex-end;
  margin-right: 10px;
  border-radius: 10px;
  padding: 20px;
}

#playPause {
  width: 50px;
  height: 50px;
  margin-bottom: 20px;
  border-radius: 20px;
}
#sfx{
  padding: 6px;
  font-size: 0.7rem;
  /* background-color: #2e7b18d6; */
  background-color: rgb(79 186 96);

}

#boxContainer {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 20px;
  height: 100%;
  width: 100%;
}

#leftBox {
  text-align: center;
  background-color: #9eb9b3;
  border-radius: 10px;
}

#leftBox h2 {
  font-size: 1rem;
}

#controls {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0 auto;
  height: 100%;
  text-transform: uppercase;

}

#controls img {
  width: 90%;
}

.buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

#playPause {
  background-color: rgb(194, 61, 61);
  /* background-color: rgb(208 19 72); */
  color: white;
}

#playPause:hover {
  background-color: rgba(194, 61, 61, 0.715);
  cursor: pointer;
}

.buttons button:hover {
  cursor: pointer;
  box-shadow: 0px 2px rgb(77 71 50);
}

.buttons button {
  width: 80px;
  height: 40px;
  margin-bottom: 10px;
  border-radius: 15px;
  padding: 10px;
  background-color: rgb(231, 195, 64);
  
}

#right {
  align-items: flex-start;
  justify-content: space-between;
  margin-left: 10px;
  border-radius: 10px;
}

.stats {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: 10px;
  width: 80%;
  margin-bottom: 15px;
  background-color: #9eb9b3;

}

.stats p{
  margin: 10px;
}

.statsDisplay, #highScore {
  border: 3px ridge #929292;
  color: rgb(77, 77, 77);
  background-color: rgb(202 210 202);
  text-align: center;
  border-radius: 10px;

}

.statsDisplay {
  width: calc(100% - 50px);
  margin-bottom: 16px;

}

#highScore {
  width: calc(100% - 50px);
  margin: 0 auto;
  margin-bottom: 16px;
}


#playGrid {
  position: absolute;
}

#startGame {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-color: rgb(73 78 75 / 65%);
  color: #bfbfbf;
  text-align: center;
  z-index: 9;
}

#pauseGame {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  text-align: center;
  z-index: 9;
  padding: 50px;
  padding-top: 200px;
}

#gameOver {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  text-align: center;
  z-index: 9;
  padding: 50px;
  padding-top: 200px;
}

#gameOver h2 {
  margin-bottom: 0px;
}

#gameOver h2 {
  margin-top: 50px;
}


#grid-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 2px 2px 30px 2px rgba(51, 51, 51, 0.594);
}

#nextGrid-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
  margin-top: 20px;
  margin-left: 20px;
}



#playGrid,
#nextGrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background-color: rgb(35 34 34);
  color: lightgrey;
}

#playGrid,
#startGame,
#pauseGame,
#gameOver {
  height: calc(25px * 20);
  width: calc(25px * 10);
}

#playGrid div {
  border: 0.5px solid rgb(76 76 76);
  height: calc(100% / 20);
  width: calc(100% / 10);
}

#nextGrid {
  height: calc(25px * 4);
  width: calc(25px * 4);
  border: 5px ridge rgb(79 79 79);
  border-radius: 15px;
}

#nextGrid div {
  border: 0.5px solid rgb(76 76 76);
  height: calc(100% / 4);
  width: calc(100% / 4);
}


.movingO {
  background-color: #f0e054c6;
  /* box-shadow: 2px 2px 30px #f0e054c6; */
}

.landedO {
  background-color: #f0e054;
  /* border: 3px dashed lightgrey; */
}

.movingI {
  background-color: #82c9cbc3;
  /* box-shadow: 2px 2px 30px #82c9cbc3; */
}

.landedI {
  background-color: #82c8cb;
}

.movingS {
  background-color: #88d467c4;
  /* box-shadow: 2px 2px 30px #88d467c4; */
}

.landedS {
  background-color: #88d467;
}
  

.movingZ {
  background-color: #d46767c1;
  /* box-shadow: 2px 2px 30px #d46767c1; */
}

.landedZ {
  background-color: #d46767;
}

.movingT {
  background-color: #c074c8c5;
  /* box-shadow: 2px 2px 30px #c074c8c5; */
  
}

.landedT {
  background-color: #c074c8;
}


.movingL {
  background-color: #fab700af;
  /* box-shadow: 2px 2px 30px #fab700af; */
}

.landedL {
  background-color: #fab700;
}


.landedJ {
  background-color: #3d9ef1;
}

.movingJ {
  background-color: #3d9df1af;
  /* box-shadow: 2px 2px 30px #3d9df1af; */
}

#startTitle {
  height: 350px;
}
#tetris {
  font-size: 4rem;
  margin: 0;
}

.enter {
  margin-bottom: 50px;
}
.preview {
  background-color: #9cafc1;
}

.shake {
  animation: shake 0.3s
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -1px) rotate(-0.1deg); }
  /* 20% { transform: translate(-3px, 0px) rotate(0.1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); } */
  40% { transform: translate(1px, -1px) rotate(0.1deg); }
  50% { transform: translate(-1px, -1px) rotate(-0.1deg); }
  /* 60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); } */
}