octopoda.css

/*
creaturing
https://octopus.boo
https://s9a.page/sea
*/

.free { margin: auto }
.beak { font-size: max(2ex, 8vmax) }
.pump { padding-block: 1ex }
.play { padding-block: 6ex 3ex }
.prey { padding-block: 3ex 6ex }
.pray { padding-block: 1ex 8ex }
.pool { padding-block: 8ex 1ex }
.loop { padding-block: 6ex 3ex }
.poke { padding-block: 0 9ex }
.punk { padding-block: 4.5ex }

.camo {
  contain: layout;
  display: flex;
  flex-flow: wrap;
  margin: auto;
  padding: 0;
}

.eye {
  flex-basis: 50%;
  text-align: center;
  box-sizing: border-box;
  padding: 1ex;
}

.triad {
  flex-basis: 33.333333%;
  text-align: center;
  box-sizing: border-box;
  padding-inline: 1ex;
}

@media (color) {
  :root {
    --oil: honeydew;
    --ink: #050308;
  }
  .amber { --oil: lightsalmon }
  .blush { --oil: hotpink }
  .breeze { --oil: mistyrose }
  .splash { --oil: skyblue }
  .foam { --oil: darkturquoise }
  .fume { --oil: #d6e }
  .gel { --oil: mediumslateblue }
  .glow { --oil: #ec0 }
  .gush { --oil: violet }
  .lava { --oil: chocolate }
  .sand { --oil: navajowhite }
  .scent { --oil: #fbbfff }
  .storm { --oil: #cdcdcd }
  .swoon { --oil: blueviolet }
  .tide { --oil: deepskyblue }
  .orca { --oil: mediumorchid }
  .love { --oil: #bae }
}

@media (prefers-contrast: less) {
  .blush { --oil: lightpink }
  .breeze { --oil: bisque }
  .fume { --oil: #e3d }
  .sand { --oil: peachpuff }
  .scent { --oil: #ebbeee }
  .tide { --oil: dodgerblue }
  .amber { --oil: salmon }
  .swoon { --oil: darkviolet }
}

@media (prefers-contrast: more) {
  .splash { --oil: powderblue }
  .storm { --oil: gainsboro }
  .foam { --oil: turquoise }
  .gel { --oil: mediumpurple }
  .glow { --oil: khaki }
  .gush { --oil: plum }
  .lava { --oil: peru }
  .orca { --oil: orchid }
}

@media (color) {
  .wet * {
    background-color: transparent;
    color: inherit;
  }

  .wet :any-link { text-decoration: dotted overline }
  .wet :hover { text-decoration-style: solid }
  .wet :focus { text-decoration-style: double; outline: thick dotted }
  
  .wet ::selection {
    background-color: rebeccapurple;
    color: lemonchiffon;
  }

  .blood.blood {
    background-color: var(--oil);
    color: var(--ink);
  }

  .bleed.bleed {
    background-color: var(--ink);
    color: var(--oil);
  }
}

@media (prefers-color-scheme:light) {
  .bleed.blood {
    background-color: var(--oil);
    color: var(--ink);
  }
}