html, body {
  margin: 0;
  background: #111;
  color: #eee;
  width: 100%;
  height: 100%;
  font-family: Monocraft, sans-serif;
}

.fill {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 300;
}

header {
  width: calc(100% - 3rem * 2);
  padding: 1rem 3rem;
  background: #a7a;
}

main {
  width: 73.5%;
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}

.row {
  flex: 1;
  display: flex;
  flex-direction: row;
}

.square {
  --pri: #434;
  --sec: #545;
  --grw: 125%;

  cursor: pointer;
  aspect-ratio: 1;
  background-color: var(--pri);
  border: 1px solid var(--pri);
  flex: 1;
  transition-duration: 200ms;

  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2vw;

  user-select: none;
  -webkit-user-select: none;
}
.square:hover {
  transform-origin: center;
  transform: scale(var(--grw));
  background-color: var(--sec);
  border: 1px solid var(--sec);
  z-index: 2;
}
.square-light {
  --pri: #4a3a4a;
  --sec: #5a4a5a;
}
.square-seen {
  --pri: #212;
  --sec: #212;
  --grw: 100%;

  cursor: default;
  animation: forwards appear 200ms;
}
.square-seen.square-light {
  --pri: #2a1a2a;
  --sec: #2a1a2a;
}

.square-flag {
  --grw: 112.5%;
  background-image: url('flag.png');
  background-repeat: no-repeat;
  background-size: 2ch;
  background-position: center;
  image-rendering: pixelated;

  animation: forwards flag 500ms;
}
.square-mine {
  --grw: 100%;
  --pri: #1a0a1a;
  --sec: #1a0a1a;
}
.square-mine.square-light {
  --pri: #1e0e1e;
  --sec: #1e0e1e;
}
.square-mine::after {
  content: '';
  display: block;
  width: 50%;
  height: 50%;
  background: #a44;
  border-radius: 100%;
  animation: forwards explode 500ms;
}

.cursor {
  position: absolute;
  width: 1ch;
  height: 1ch;
  border-radius: 100%;
  background: #fff;
}

@keyframes explode {
  0% { transform: scale(100%); }
  25% { transform: scale(300%); }
  100% { transform: scale(100%); }
}

@keyframes appear {
  0% { transform: scale(100%); }
  25% { transform: scale(150%); }
  100% { transform: scale(100%); }
}

@keyframes flag {
  0% { background-size: 0ch; }
  25% { background-size: 3ch; }
  100% { background-size: 2ch; }
}

@font-face {
  font-family: Monocraft;
  src: url(monocraft.ttf);
}