mootools.css

/* https://css-tricks.com/revisiting-prefers-reduced-motion/ */
@media screen and (prefers-reduced-motion: reduce), (update: slow) {
	* {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/*
https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
https://www.tpgi.com/the-anatomy-of-visually-hidden/
*/
.visually-hidden:not(:focus, :active) {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

:root {
  --layout-gap: 2rem;
  --element-gap: 0.5rem;
}

body {
  background-image: url("images/marijke's-hell.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 2vh 3vw;
}

h1 {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 0.25rem;
  font-size: 3rem;
  inline-size: max-content;
  margin: 0 auto;
  max-inline-size: 100%;
  padding: 0.2em 0.3em;
  text-wrap: balance;
}

ul, ol {
  margin: 0;
  padding: 0;
}

.grid-wrapper {
  overflow-x: auto;
  padding-block: var(--layout-gap);
}

.actions ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--element-gap);
  justify-content: center;
  list-style-type: "";

  & button {
    background-color: rgba(66, 153, 225);
    border-color: rgb(226, 232, 240);
    border-radius: 1rem;
    color: white;
    font-size: 2.5rem;
    padding: 0.1em 0.15em;
    transition: background 200ms ease-in;

    &:hover, &:focus {
      background-color: rgb(0, 81, 177);
    }

    &:focus-visible {
      outline: 4px solid white;
    }
  }
}

#bingo {
  --cell-size: 10rem;
  display: grid;
  font-family: monospace;
  gap: 0.25rem;
  grid: repeat(5, var(--cell-size)) / auto-flow var(--cell-size);
  inline-size: max-content;
  list-style-type: "";
  margin-inline: auto;

  & > li {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid black;
    border-radius: 1rem;
    border-width: 3px;
    cursor: pointer;
    padding: 0.5rem;

    &:hover {
      background: linear-gradient(
          rgba(255, 255, 255, 0.7),
          rgba(255, 255, 255, 0.7)
        ),
        url("images/hashtag-eu.avif");
      background-position: center;
      background-size: 215%;
    }

    &.active {
      background-image: url("images/stamp.png");
      background-repeat: no-repeat;
      background-size: contain;
    }
  }
}

body:has(#bingo.carlton) {
  background: none;

  & .grid-wrapper {
    background-image: url("images/carltonbg.jpg");
    background-position: right;
    background-repeat: repeat-x;
    background-size: contain;
  }

  & #bingo > li.active {
    background-image: url("images/carlton.png");
  }

  & .actions {
    margin-block-start: var(--layout-gap);
  }
}