:root {
  --text-1: #fff;
  --text-2: #ccc;
  --text-3: #888;
  --primary: #ff9239;
  --primary-2: #cf7b37;
  --secondary: #2daeff;
  --secondary-2: #3660c3;
  --purple: #9556ec;
  --bg: #15131a;
}

mark {
  background: none;
  color: var(--secondary);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

a {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--primary);
}
a:visited {
  color: var(--primary-2);
}
a:hover {
  opacity: 0.75;
}

body {
  background-color: var(--bg);
  color: var(--text-1);
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  line-height: 160%;
}
body > * {
  margin: 0 auto;
  max-width: 800px;
  width: 90%;
}

#signature {
  transform-origin: center right;
  transition: transform 300ms ease;
}
#signature #signaturePathBg {
  fill: var(--text-3);
}
#signature #signaturePath {
  fill: white;
}
#signature #signatureMask > path {
  stroke: white;
  stroke-width: 5px;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset 300ms ease;
}
#signature:hover {
  cursor: pointer;
  transform: scale(1.1);
}
#signature:hover #signatureMask > path {
  stroke-dashoffset: 0;
  user-select: none;
}

nav {
  display: flex;
  align-items: center;
  color: white;
}
nav .nav-left {
  margin: 48px auto 16px 0;
}
nav .nav-left h1 {
  font-size: 3rem;
  margin: 0;
  margin-bottom: 10px;
}
nav .nav-right > a {
  margin-left: 8px;
  width: 32px;
  height: 32px;
  display: inline-block;
  text-align: center;
}
nav .nav-right > a > svg {
  fill: white;
  width: 100%;
  height: 100%;
}
nav .nav-right a,
nav .nav-left > h1 a {
  color: white;
  text-decoration: none;
}
nav .nav-right a:visited,
nav .nav-left > h1 a:visited {
  color: white;
}

main {
  color: white;
}
main p,
main i,
main ul,
main ol {
  color: var(--text-2);
}

hr {
  border-radius: 2px;
  border-color: var(--text-3);
  margin-top: 9px;
  margin-bottom: 9px;
}

code {
  font-size: 1rem;
}

footer {
  display: flex;
  align-items: center;
  color: var(--text-3);
  font-family: Courier, monospace;
  margin-bottom: 32px;
}
footer > *:first-child {
  margin-right: auto;
}
footer > p {
  font-size: 16px;
  line-height: 150%;
}

@media screen and (max-width: 600px) {
  nav > .nav-right {
    display: none;
  }
  footer > p {
    font-size: 0.8rem;
    line-height: 150%;
  }
  footer > #signature {
    display: none;
  }
}