/* :) */

::selection {
  background: lavenderblush;
  color: rebeccapurple;
}

:any-link {
  background: coral;
  box-shadow: 0 0 2em 1em darkviolet;
  color: indigo;
  text-shadow:
    0 -1vh 0 purple,
    1vw 0 0 orchid,
    0 -1ch 0 coral,
    1em 0 0 deeppink;
}

:any-link:first-child {
  box-shadow: 0 0 1em 1em lightcoral;
  background: lightcoral;
}

:any-link:last-child {
  box-shadow: 0 0 1em 1em lightcoral;
  background: darkviolet;
  color: #ec0;
}

:any-link:hover {
  background: thistle; 
}

:focus {
  filter: hue-rotate(-36deg);
  outline: .382rem dotted;
}

:active {
  filter: hue-rotate(-18deg);
}

html {
  background-color: violet;
  background-image: linear-gradient(.03turn, #1ce, violet 23%, #2be 38%);
  color: #518;
}

/* ;) */

* {
  box-sizing: border-box;
}

a {
  border-radius: 30%;
  display: inline-flex;
}

:any-link {
  font-weight: 600;
  text-decoration: dotted line-through;
}

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

body {
  margin: auto;
  padding: 2rem 1rem;
}

article {
  contain: layout;
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}

h1 {
  letter-spacing: 1vw;
  line-height: 1;
  margin: 0 -6em 38vh auto;
  transform: rotate(9deg);
}

h1 a {
  font: 1em sans-serif;
  margin: 1em;
  text-indent: 3em;
}

nav {
  align-items: center;
  display: flex;
  justify-content: center;
}

nav a {
  flex-basis: 100%;
  margin: 1ch;
  padding: 1ch;
}

code { font-size: .618em }
code:first-child { transform: rotate(-171deg) }
code:last-child { transform: rotate(-9deg) }

footer {
  display: flex;
  margin: 50vh auto 20vh;
  transform: rotate(9deg);
}

@media (orientation: portrait) {
  nav { flex-flow: column }
  nav a {
    transform: rotate(9deg);
    width: 100%;
  }
}

@media (orientation: landscape) {
  nav a { 
    transform: rotate(99deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  * {
    transition: 600ms ease;
  }
}