hum.css

* {
  box-sizing: border-box;
}

:focus {
  outline: .236ch dotted;
}

html {
  font-family: sans-serif;
  font-size: max(3ch, 2vw + 2vh);
  line-height: 1.618;
}

body {
  margin: 0;
  overflow-wrap: anywhere;
}

article {
  margin: 5ch;
  margin-left: 3ch;
}


header {
  float: left;
  display: flex;
  flex-flow: column;
  align-items: center;
}

h1 { 
  font-size: 2.618rem;
  margin: 0;
  padding: 1em;
  writing-mode: sideways-lr;
}

ul {
  contain: layout;
  display: flex;
  flex-flow: row wrap;
}

li:nth-child(odd) {
  transform: rotate(-18deg);
}

li:nth-child(even) {
  transform: rotate(18deg);
}

li {
  border-radius: 100%;
  box-shadow: 0 0 2em 1em var(--sea-oil);
  flex-basis: 33%;
  list-style-position: inside;
  margin: min(1em, 8%);
  min-height: 66vh;
  padding-block-start: 1em;
  text-align: center;
  writing-mode: sideways-lr;
}

li a {
  padding: 1ch;
}

ins {
  text-decoration: dotted overline .236ch;
}

del {
  opacity: .236;
}

a {
  border-radius: 100%;
  font-weight: 600;
  text-decoration: dotted underline .236ch; 
}

::marker {
  font-size: 1.618em;
}

.disco { list-style-type: disc }
.circus { list-style-type: circle }
.squid { list-style-type: square }
.tiedye { list-style-type: thai }