:any-link {
  transition: 180ms;
  color: inherit;
  text-decoration-style: wavy;
}

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

:focus {
  text-decoration-style: double;
  outline: 3em dotted chocolate;
  box-shadow: 0 0 0 2em #ec0;
}

::selection {
  background: indigo;
  color: coral;
}

.bae {
  background: #bae;
  color: #111;
}

.luv {
  background: violet;
  color: #111;
}

.soar {
  background: blueviolet;
  color: mistyrose;
}

.kwik {
  background: chocolate;
  color: #111;
}

.bart {
  background: chartreuse;
  color: #111;
}

.mart {
  background: silver;
  color: #111;
}

.tram {
  background: #ee1;
  color: #111;
}

.oslo {
  background: #0be;
  color: #111;
}

.aoyo {
  background: mediumturquoise;
  color: indigo;
}

.jugo {
  background: mediumpurple;
  color: #111;
}

html {
  transition: 360ms;
  font-family: sans-serif;
  font-size: max(20pt, 10vmin);
  line-height: 2;
}

body {
  display: flex;
  flex-flow: column;
  margin: 5em auto;
}

a {
  display: table;
  border-color: transparent;
  border-radius: 100%;
  border-style: double;
  border-width: 1ex;
}

figure {
  display: flex;
  flex-flow: column;
  margin: auto;
  justify-content: center;
  min-height: 100vh;
}

figure > * {
  display: initial;
  margin: auto;
}

.left { margin-left: 1em }
.rite { margin-right: 1em }

strong {
  align-self: center;
  border-radius: 100%;
  font-size: 1.618em;
}

footer {
  margin: 2rem;
}

@media (prefers-reduced-motion: reduce) {
  [class] {
    transition: none;
  }
}