* {
  --colourPrimary: #004a66;
  --colourWhite: #ffffff;
}

@supports (background: paint(something)) {

  @property --colourPrimary {
    syntax: '<color>';
    initial-value: #004a66;
    inherits: false;
  }

  @property --colourWhite {
    syntax: '<color>';
    initial-value: #ffffff;
    inherits: false;
  }

}

.sr-only {
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

html,
body {
  margin: 0;
  background-color: var(--colourPrimary);
  color: var(--colourWhite);
  font-family: 'Arial', sans-serif;
  font-size: 16px;
}

body {
  padding: 1rem;
}

a {
  padding: 2px;
  color: var(--colourWhite);
}

a:not([href]) {
  position: absolute;
  width: 1px;
  height: 1px;
}

a:focus {
  outline: dotted 1px var(--colourPrimary);
}

nav {
  position: absolute;
  padding: 1rem;
  border: solid 1px var(--colourPrimary);
  background-color: var(--colourWhite);
  color: var(--colourPrimary);
  transform: translate(-9999px, -9999px);
}

nav:focus-within {
  transform: translate(0, 0);
}

nav > ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

h1 {
  margin: 0;
}

footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
}

/* Components */

.grid {
  display: flex;
  flex-wrap: wrap;
}

.grid > div {
  flex: 200px;
  margin: 1rem;
}

@supports (display: grid) {

  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 2rem;
  }

  .grid > div {
    margin: 0;
  }

}

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  margin: 1rem 0;
}

/* Critters */

.critter,
.clone {
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 1s ease-in-out;
  will-change: auto;
}

.critter {
  animation: critterEntrance 0.5s 1 ease-in;
}

@keyframes critterEntrance {

  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }

}

/* Themes */

@supports (mix-blend-mode: color) {

  picture.blended {
    mix-blend-mode: luminosity;
  }

  @media(hover: hover) {
    picture.blended:hover {
      mix-blend-mode: hard-light;
    }
  }

  .aquarium picture.blended {
    mix-blend-mode: hard-light;
  }

  .dusk picture.blended {
    mix-blend-mode: difference;
  }

  .embossed picture.blended {
    mix-blend-mode: saturation;
  }

  .ice-cream picture.blended {
    mix-blend-mode: exclusion;
  }

  .sketch picture.blended {
    mix-blend-mode: darken;
  }

  .something  picture.blended {
    mix-blend-mode: luminosity;
  }

}