@font-face {
  font-family: "GeometrySoft";
  src: url("fonts/Geometry_Soft_Pro-Bold_N.otf");
  font-weight: normal; }
@font-face {
  font-family: "SourceCodePro";
  src: url("fonts/SourceCodePro-Bold.otf");
  font-weight: normal; }
::-moz-selection, ::selection {
  background: #9191e9;
  color: white; }

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Nimbus Sans", "Liberation Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  background: url("images/diagonal-background.png"); }

h1, h2, h3, h4, h5, h6 {
  font-family: GeometrySoft, "Comic Neue", "Comic Sans", "Comic Sans MS", sans-serif; }

ul, ol {
  padding-left: 1em; }

.quiet {
  color: rgba(0, 0, 0, 0.3);
  font-size: 60%; }
  .quiet::-moz-selection, .quiet::selection {
    background: #000; }

header {
  text-align: center;
  width: 100%;
  height: 100vh;
  background: url("images/header.jpg"), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAIAAAD38zoCAAAAiElEQVQI1wF9AIL/AbKsrfgAC/kBEwEAAfL0+Pf49wcFBA8KCAISEw8IAwMTDQLv+Pnv+v0REA0bEQUACAkE8Ozo4uLjEx8w+eDa9/fy8RUP/AoOGxcXAx0WG8O1pOvk1fsH3+Te19vrxP/50vLk7AQJ/OsOCfrb2tUN8v8eFh327PXhAvnu+NZtCj900D8C2AAAAABJRU5ErkJggg==);
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  header h1, header .subtitle {
    margin: 0;
    background: rgba(230, 230, 250, 0.6); }
  header h1 {
    color: black;
    font-size: 5em;
    padding: .1em .25em;
    border-radius: .1em; }
  header #cta {
    z-index: 1; }
    header #cta .subtitle {
      padding: 0 1.25em .5em 1.25em;
      border-radius: 0 0 .5em .5em;
      word-break: break-all;
      display: inline-block; }
      header #cta .subtitle .detail {
        font-size: 1.25em; }
      header #cta .subtitle .domain {
        font-size: 2.5em; }
  header nav {
    display: inline-block; }
  header .links {
    z-index: 1;
    display: inline-block;
    padding: 0;
    margin: 0; }
    header .links li {
      list-style: none;
      display: inline-block; }
    header .links ul {
      display: inline-block;
      padding: 0;
      margin: 0;
      background: rgba(0, 0, 0, 0.7);
      padding: .5em;
      vertical-align: middle;
      border-radius: .25em; }
      header .links ul li {
        padding-right: .25em;
        line-height: 1.5625em;
        position: relative; }
        header .links ul li a {
          color: white; }
        header .links ul li a:visited {
          color: white; }
        header .links ul li:last-child {
          padding-right: 0; }
        header .links ul li img {
          height: 3.125em;
          width: 3.125em;
          vertical-align: middle; }
        header .links ul li a:not([href]) img {
          filter: grayscale(1); }
        header .links ul li::before {
          position: absolute;
          box-sizing: border-box;
          left: -40%;
          width: 180%;
          bottom: 120%;
          content: attr(data-text);
          font-family: -apple-system, BlinkMacSystemFont, "Nimbus Sans", "Liberation Sans", "Segoe UI", Helvetica, Arial, sans-serif;
          color: #fff;
          background: rgba(0, 0, 0, 0.7);
          padding: .2em .5em;
          border-radius: .2em;
          opacity: 0;
          transition: opacity .3s; }
        header .links ul li:hover::before {
          opacity: 1; }
  header .spacer.top {
    flex-grow: 3; }
  header .spacer.middle {
    flex-grow: 1; }
  header .spacer.bottom {
    flex-grow: 3; }
  header .downchevron {
    width: 4em;
    height: 4em; }

section {
  background: #fff;
  text-align: center;
  margin: 1.2em 3em;
  border: .2em solid gray;
  border-radius: .4em;
  padding: 0 2em; }
  section h2 {
    font-size: 1.5em;
    margin: 1em 0; }
  section .content {
    font-size: 1.2em;
    text-align: left; }
    section .content.centered {
      text-align: center; }

.rainbow {
  color: transparent;
  background: linear-gradient(to right, #df382b, #ff711f, #fabb06, #34a853, #4285f4, #9d41f9);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(-0.025em -0.025em #fff) drop-shadow(-0.025em 0 #fff) drop-shadow(-0.025em 0.025em #fff) drop-shadow(0 0.025em #fff) drop-shadow(0.025em 0.025em #fff) drop-shadow(0.025em 0 #fff) drop-shadow(0.025em -0.025em #fff) drop-shadow(0 -0.025em #fff); }

.domain {
  font-family: SourceCodePro, monospace;
  cursor: pointer;
  position: relative; }
  .domain::after {
    position: absolute;
    left: 40%;
    width: 20%;
    top: 90%;
    content: "Copied!";
    font-family: -apple-system, BlinkMacSystemFont, "Nimbus Sans", "Liberation Sans", "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: .5em;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
    padding: .2em .5em;
    border-radius: .2em;
    opacity: 0;
    transition: opacity .3s; }
  .domain.copied::after {
    opacity: 1; }

#faq li {
  margin-bottom: 1em; }
#faq .question, #faq .answer {
  display: block;
  padding-left: 1.4em;
  position: relative; }
  #faq .question::before, #faq .answer::before {
    position: absolute;
    top: 0;
    left: 0;
    font-weight: bold; }
#faq .question::before {
  content: "Q: "; }
#faq .answer::before {
  content: "A: "; }

.playerhead {
  height: 1.5em;
  vertical-align: middle; }

@media screen and (max-width: 660px) {
  header {
    font-size: 0.9em; }

  section {
    margin: .8em;
    padding: 0 1em; } }
@media screen and (max-width: 490px) {
  header h1 {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0; } }

/*# sourceMappingURL=style.css.map */