@import "https://cdn.cubing.net/css/@fontsource/ubuntu";

html {
  --text-color: 0, 0, 0;
  color: rgb(var(--text-color));
}

@media (prefers-color-scheme: dark) {
  html {
    background: #000D;
    --text-color: 238, 238, 238;
  }

  a {
    color: #669df5;
  }

  a:visited {
    color: #af73d5;
  }
}

body {
  font-family: Ubuntu, Tahoma, sans-serif;
  padding: 2em 0 4em;
}

.header {
  display: grid;
  margin: auto;
  place-content: center;
  font-size: 150%;
}

.header .cubing-icon {
  font-size: 2em;
}

.header>* {
  display: grid;
  place-content: center;
}

section {
  width: 90vw;
  margin: auto;
}

h2 {
  text-align: center;
}

.move-display-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, 288px);
  gap: 0.5em;
  place-content: center;
}

.move-display {
  width: 288px;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(2, 1fr);
  border: 2px solid rgba(var(--text-color), 0.3);
  margin: -1px;
}

.move-display .move {
  font-size: 300%;
  display: grid;
  place-content: center;
}

.move-display twisty-player {
  height: 10em;
  width: 10em;
}

.move-display:hover {
  cursor: pointer;
  background-color: rgba(var(--text-color), 0.1);
}

.in-memory {
  margin: 2em 0;
  font-size: 1em;
  text-align: center;
}

.flourish {
  font-size: 2em;
  margin-bottom: 0.5em;
}