#startpage {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#startpage > h1 {
  margin: 1rem;
  margin-bottom: 3rem;
  word-break: keep-all;
  text-align: center;
}

#startpage > .score {
  display: none;
  margin: 1rem;
  margin-top: -2rem;
}

#startpage.finished > .score {
  display: unset;
}

#startpage > #scorepercentage {
  margin-top: -1.75rem;
  color: #aaa;
}

#startpage #buttons,
#settings #buttons {
  margin: 1em;
  display: flex;
  column-gap: 2em;
  row-gap: 1em;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

#startpage .button {
  padding-inline: 3em;
  padding-block: 1em;
}

#startpage .button, #settings .button {
  filter: grayscale(0.25);
  transition:
    ease-out filter 250ms,
    ease-in-out scale 500ms;
}

@media (hover: hover) and (pointer: fine) {

  #startpage .button:hover,
  #settings .button:hover {
    scale: 1.1;
    filter: grayscale(0);
  }
}

.button h2 {
  word-break: keep-all;
}

.button.green {
  color: #0f0;
}

.button.red {
  color: #d00;
}

.button.blue {
  color: aqua;
}

#playbutton {
  position: relative;
}

#playbutton.loading {
  cursor: not-allowed;
}

@media (hover: hover) and (pointer: fine) {
  #playbutton.loading:hover {
    filter: grayscale(0.75);
    scale: unset;
  }
}

#playbutton .loading-animation {
  position: absolute;
  /* 50% of playbutton - half of the loading animation size */
  left: calc(50% - 3em / 2);
  top: calc(50% - 3em / 2);
}

#playbutton > h2, #playbutton .loading-animation, #playbutton > p#offline {
  transition: opacity ease 500ms;
  transition-delay: 250ms;
}

#playbutton > p#offline, #playbutton > p#again {
  position: absolute;
  bottom: 0.6em;
  left: calc(38%);
  opacity: 0;
  transition-delay: 500ms;
}

#playbutton.offline:not(.again) > p#offline,
#playbutton.again > p#again {
  opacity: 0.75;
}

#playbutton:not(.loading) .loading-animation,
#playbutton.loading > h2,
#playbutton.loading > p#offline {
  opacity: 0;
}

.loading-animation {
  display: inline-block;
  width: 3em;
  height: 3em;
}

.loading-animation:after {
  content: " ";
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 50%;
  border: 0.5em solid;
  border-color: currentColor transparent currentColor transparent;
  rotate: 0deg;
  animation: loading 2s linear infinite;
}

@keyframes loading {
  100% {
    rotate: 360deg;
  }
}

#settings {
  display: flex;
  flex-direction: column;
  gap: 2em;
  align-items: center;
}

#settings > #settingssavebutton {
  width: fit-content;
}

#settings > h2 {
  text-align: center;
}

#settings > table {
  border-collapse: collapse;
}

#settings > table tr {
  border: 1px solid white;
}

#settings > table td {
  padding: 0.5em 2em;
}

#settings > table td:nth-child(2) {
  border-left: 1px solid #fff8;
  text-align: center;
}