html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: sans-serif;
  background: darkslateblue;
  color: antiquewhite;
  padding: 12px;
  max-width: 700px;
  margin: auto;
  text-align: center;
}

input[type=radio] {
  display: none;
}

#cur-page-landing:checked~.page-landing,
#cur-page-think-number:checked~.page-think-number,
#cur-page-times-5:checked~.page-times-5,
#cur-page-times-2:checked~.page-times-2,
#cur-page-minus-original:checked~.page-minus-original,
#cur-page-memorise:checked~.page-memorise,
#cur-page-ready:checked~.page-ready,
#cur-page-reveal:checked~.page-reveal,
/* todo: generate these */
#cur-page-memorise-0:checked~.page-memorise-0,
#cur-page-ready-0:checked~.page-ready-0,
#cur-page-reveal-0:checked~.page-reveal-0,
#cur-page-memorise-1:checked~.page-memorise-1,
#cur-page-ready-1:checked~.page-ready-1,
#cur-page-reveal-1:checked~.page-reveal-1,
#cur-page-memorise-2:checked~.page-memorise-2,
#cur-page-ready-2:checked~.page-ready-2,
#cur-page-reveal-2:checked~.page-reveal-2,
#cur-page-memorise-3:checked~.page-memorise-3,
#cur-page-ready-3:checked~.page-ready-3,
#cur-page-reveal-3:checked~.page-reveal-3,
#cur-page-memorise-4:checked~.page-memorise-4,
#cur-page-ready-4:checked~.page-ready-4,
#cur-page-reveal-4:checked~.page-reveal-4,
#cur-page-memorise-5:checked~.page-memorise-5,
#cur-page-ready-5:checked~.page-ready-5,
#cur-page-reveal-5:checked~.page-reveal-5,
#cur-page-memorise-6:checked~.page-memorise-6,
#cur-page-ready-6:checked~.page-ready-6,
#cur-page-reveal-6:checked~.page-reveal-6,
#cur-page-memorise-7:checked~.page-memorise-7,
#cur-page-ready-7:checked~.page-ready-7,
#cur-page-reveal-7:checked~.page-reveal-7
{
  display: flex;
}

.page {
  height: 100%;
  /* display: flex; */
  display: none;
  flex-direction: column;
  justify-content: space-evenly;
}

.emoji-container {
  /* padding: 16px; */
  display: flex;
  flex-direction: column;
}
.instructions {
  margin-bottom: 8px;
  padding-inline: 12px;
  font-size: 1.5rem;
}
.row {
  display:flex;
  flex-direction: row;
  justify-content: space-evenly;

}
.cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* padding: 12px; */
}
.emoji-reveal {
  font-size: 5em;
}
label {
  color: aqua;
  font-weight: 600;
}
.random-button {
  display: grid;
}

.random-button label {
  place-self: center;
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

label[for="cur-page-memorise-0"] {
  opacity: initial;
  pointer-events: initial;
}
/* todo: generate these */
label[for="cur-page-memorise-1"] {
  animation: toggleVisible 2s steps(1, end) 0.25s infinite;
}
label[for="cur-page-memorise-2"] {
  animation: toggleVisible 2s steps(1, end) 0.5s infinite;
}
label[for="cur-page-memorise-3"] {
  animation: toggleVisible 2s steps(1, end) 0.75s infinite;
}
label[for="cur-page-memorise-4"] {
  animation: toggleVisible 2s steps(1, end) 1s infinite;
}
label[for="cur-page-memorise-5"] {
  animation: toggleVisible 2s steps(1, end) 1.25s infinite;
}
label[for="cur-page-memorise-6"] {
  animation: toggleVisible 2s steps(1, end) 1.5s infinite;
}
label[for="cur-page-memorise-7"] {
  animation: toggleVisible 2s steps(1, end) 1.75s infinite;
}

@keyframes toggleVisible {
  0% { opacity: 1; pointer-events: initial; }
  33% { opacity: 0; pointer-events: none; }
  66% { opacity: 0; pointer-events: none; }
}