:root {
  --primary-color-dark: hsl(205deg, 20%, 94%);
}
html,
body {
  height: 100%;
}
:root {
  --font-family: "Quicksand";
}
body {
  font-family: "Quicksand", sans-serif !important;
}
tweet {
  display: block;
  max-width: 200px;
}
article {
  background: black;
  background: linear-gradient(to right, black, #111111);
}
h1 {
  background: -webkit-linear-gradient(hotpink, var(--primary-color-dark));
  background: linear-gradient(hotpink, var(--primary-color-dark));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
c-subtitle {
  color: var(--color);
  display: block;
  font-family: monospace;
  font-size: 60%;
  font-style: italic;
}

@media screen and (min-width: 1023px) {
  h1 {
    font-size: 500%;
  }
}

.hero {
  background: radial-gradient(
    circle at right top,
    hotpink 8%,
    hotpink 16%,
    black 61%
  );
}

code {
  white-space: pre;
}