swan.css

:root {
  background-color: skyblue;
  background-image: radial-gradient(lightpink, hotpink, skyblue);

  color: darkblue;
}

.spun {
  background: blueviolet;
  color: gainsboro;
}

::selection {
  background: #313;
  color: #ee1;
}

:any-link { 
  color: #0e0e0e;
  background-color: skyblue;
  background-image: conic-gradient(powderblue, skyblue, gainsboro, turquoise);
}

:nth-child(1n) { filter: hue-rotate(0deg) }
:nth-child(2n) { filter: hue-rotate(90deg) }
:nth-child(3n) { filter: hue-rotate(180deg) }
:nth-child(4n) { filter: hue-rotate(-90deg) }

:focus { 
  outline: thick outset;
  box-shadow: 0 0 1ch 1ch springgreen;
}

:hover { 
  text-decoration-style: double;
}

html {
  font-family: sans-serif;
  font-size: max(2em, 4vmax + 4vmin);
}

body {
  margin: 2em auto;
  overflow-wrap: anywhere;
}

svg {
  max-width: 100%;
  height: auto;
}

header {
  order: 111;
  text-align: end;
  margin-bottom: 2em;
}

main {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
}

menu {
  box-sizing: border-box;
  display: table;
  margin: auto;
}

li {
  display: flex;
  box-sizing: border-box;
  margin: auto;
}

li a {
  transform: rotate(9deg);
}

h1 {
  font-family: sans-serif;
  font-weight: unset;
  font-size: 1.618em;
  margin: 0;
}

footer {
  font-size: 2em;
}

span {
  display: flex;
  flex-flow: column;
}

code {
  font: unset;
}

:nth-child(4n) {
  text-indent: 2em;
  margin-bottom: 2em;
}