/* Color schemes */

body {
  background: #fefbfa;
  color: #222;
}

a {
  color: inherit;
  text-decoration: none;
  box-shadow: inset 0 -.4em #bbb;
}
a:hover, a:focus { box-shadow: inset 0 -.5em #e57982; }

.dark body {
  background: #1a1823;
  color: #f7f7f7;
}
.dark a { box-shadow: inset 0 -.4em #444; }
.dark a:hover, .dark a:focus { box-shadow: inset 0 -.5em #7f131c; }
.dark .avi path { stroke: #f7f7f7; }

/* Main formatting */

html {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Ubuntu, Cantarell, Lato, Helvetica, Arial, sans-serif;
  font-size: 125%;
  line-height: 1.5;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0 auto;
  padding: 1.5em 1em;
  max-width: 25em;
}

p {
  margin: 0 0 1.5em;
}

/* Decorations */

.hero {
  display: table-cell;
  height: calc(100vh - 4rem);
  vertical-align: middle;
}

.avi {
  box-sizing: border-box;
  display: block;
  margin: 1.5em auto;
  max-width: 75%;
}

.nb {
  border: 1.5px solid #d42130;
  border-radius: 3px;
  display: block;
  margin: 1.5em auto;
  width: 5em;
}

.buttons {
  position: absolute;
  top: .5em;
  right: .5em;
}

#twilight {
  background: none;
  border: none;
  display: inline-block;
  font-size: 1.5em;
  padding: 0;
}

#polyglot {
  font-size: 1.5em;
  box-shadow: none;
}

.bike {
  font-size: 1.5em;
  line-height: .75;
  position: relative;
}

/* Animations */

@keyframes draw {
  from { stroke-dashoffset: 570; }
  to { stroke-dashoffset: 0; }
}
@keyframes ride {
  0% { opacity: 0; left: 100px; }
  30% { opacity: 1; }
  100% { left: 0; }
}

.avi path {
  animation: .8s cubic-bezier(1,.13,.8,1) both draw .2s;
  transition: stroke-width .3s;
}
.avi:hover path { stroke-width: 2; }
.bike { animation: ride 1.4s ease-in-out both; }

@media (prefers-reduced-motion) {
  .avi path, .bike { animation: none; transition: none; }
}