* { box-sizing: border-box; }

/* Defaults ********************************/
body {
  background: #f8f8f8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  line-height: 1.6;
  margin: 0;
}

h1 {
  font-size: 1.5rem;
  line-height: 2rem;
}

p {
  margin: 1em 0;
}

a,a:visited {
  color: #18181b;
}

pre {
  overflow: auto;
  padding: 1em;
}

pre, code {
  font-feature-settings: normal;
  font-size: 1rem;
  font-variation-settings: normal;
}

button {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Navigation ********************************/
nav {
  align-items: center;
  display: flex;
  margin-bottom: 2em;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  display: inline-block;
  margin: 0;
}
nav ul li:not(:last-child):after {
  content: '|';
  padding: 0 6px;
}

/* Main ********************************/
main {
  background: white;
  border-radius: 0.5rem;
  margin: 0 auto;
  max-width: 800px;
  padding: 1.5rem;
  width: 100%;
}

/* Form **********************************/
form label {
  display: block;
  font-size: 0.875rem;
  padding: 0.5rem 0.25rem;
}
form input[type="email"] {
  appearance: none;
  border: 1px solid;
  border-radius: 0.5rem;
  height: 3rem;
  line-height: 1.5rem;
  margin-bottom: 1em;
  padding-left: 1rem;
  padding-right: 1rem;
  width: 100%;
}
form button {
  -moz-user-select: none;
  -webkit-user-select: none;
  background-color: #99e600;
  border: 0;
  border-radius: 0.5rem;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  color: black;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  height: 3rem;
  line-height: 1em;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  text-decoration-line: none;
  transition-duration: 200ms;
  transition-property: color, background-color, border-color, opacity, box-shadow, transform;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  user-select: none;
  width: 100%;
}
form button:hover, form button:focus {
  background-color: #85C800;
}
form button:active:hover, form button:active:focus {
  animation: button-pop 0s ease-out;
  transform: scale(0.97);
}

/* Mobile ********************************/
@media(max-width: 580px) {
  nav {
    align-items: baseline;
    flex-direction: column;
  }
  nav img {
    margin: 1em 0;
  }

  main {
    border-radius: 0;
    padding: 0.7rem;
  }
}

/* Dark Mode ********************************/
@media(prefers-color-scheme: dark) {
  body {
    background: black;
  }

  main {
    background: #2d2d2d;
  }

  a,a:visited {
    color: white;
  }

  pre {
    background-color: black !important;
  }
}