*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  touch-action: none;
  background-color: #222222;
  height: 100vh;
  margin: 0;
  font-size: var(--font-size);
  font-family: 'Nunito', sans-serif;
}

#game-board {
  margin-left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--grid-size), var(--cell-size));
  grid-template-rows: repeat(var(--grid-size), var(--cell-size));
  gap: var(--cell-gap);
  border-radius: 1vmin;
  transition: 200ms ease-in-out;
  float: left;
}

.cell {
  background-color: #444;
  border-radius: var(--border-radius);
}

.tile {
  position: absolute;
  top: calc(var(--y) * (var(--cell-size) + var(--cell-gap)));
  left: calc(var(--x) * (var(--cell-size) + var(--cell-gap)));
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--cell-size);
  height: var(--cell-size);
  border-radius: var(--border-radius);
  font-weight: bold;
  background-color: hsl(25, 60%, var(--bg-lightness));
  color: #fff;
  animation: show 200ms ease-in-out;
  transition: 200ms ease-in-out;
}
.scoreBlock{
  position: absolute;
  top: 0;
  width: 100%;
  height: 13vmin;
  background-color: #228B22;
  display: flex;
  justify-content: left;
  align-items: left;
  font-size: 4.5vmin;
}
.scoreStyle{
  position: absolute;
  width: 8vmin;
  font-size: 4vmin;
  height: 7vmin;
  background-color: #FF8C00;
  display: flex;
  border-radius: 0.5vmin;
  justify-content: center;
  align-items: center;
  transition: 300ms;
}
.svg{
  fill: #fff;
  position: absolute;
  margin-top: 2.3vmin;
  margin-left: 85%;
  height: 8vmin;
}
p{  
  color: aliceblue;
}
.score_p{
  margin-left: 10%;
}
#score{
  margin-left: 23%;
}
.record_p{
  margin-left: 45%;
}
#record{
  margin-left: 61%;
}
.record_p, .score_p{
  margin-top: 4%;
  position: absolute;
  font-family: 'Nunito', sans-serif;
}
#showScore{
  position: absolute;
  display: none;
  animation: showScore 850ms;
}
@keyframes showScore {
  0%{
    margin-left: var(--showScore-0);
    opacity: 0.8;
  }
  100%{
    margin-left: var(--showScore-100);
    opacity: 0;
  }
}
#showRecord{
  position: absolute;
  display: none;
  animation: showRecord 850ms;
}
@keyframes showRecord {
  0%{
    margin-left: var(--showRecord-0);
    opacity: 0.8;
  }
  100%{
    margin-left: var(--showRecord-100);
    opacity: 0;
  }
}
@media (min-width: 700px) {
  #game-board{
    margin-left: 50vmin;
  }
  .scoreBlock{
    background: #ffffff00;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .scoreStyle{
    font-size: 5vmin;
    height: 7vmin;
    background-color: #04c514;
    display: flex;
    border-radius: 0.5vmin;
    justify-content: center;
    align-items: center;
    transition: 300ms;
  }
  #showScore{
    margin-top: 57vmin;
    position: absolute;
  }
  #showRecord{
    margin-top: 80vmin;
    position: absolute;
  }
  #score, .score_p{
    position: absolute;
    margin-top: 57vmin;
  }
  #record, .record_p{
    position: absolute;
    margin-top: 80vmin;
  }
  .record_p, .score_p{
    margin-left: 20vmin;
  }
  #record, #score{
    margin-left: 55vmin;
  }
}
@media (max-width: 700px) {
  .scoreDesktop{
    display: none;
  }
}