@charset "UTF-8";
@import "reset.css";
@import "color.css";
@import "typography.css";

/* GENERAL */

body {
  text-align: center;
  background: var(--color-foreground-level-1);
  font-family: var(--font-stack);
  cursor: default;
  -webkit-font-smoothing: antialiased;
  width: 100%;
}

.overflow-killer {
  overflow-x: hidden;
}

svg {
  flex-shrink: 0;
}

.container {
  margin: 2rem auto 4rem;
  padding: 0 2rem;
}

::selection {
  background-color: var(--color-primary);
  color: white;
}

.blend {
  mix-blend-mode: exclusion;
  color: var(--color-background);
}

input[type="email"] {
  padding: 0 0 0 0.5rem;
  border-radius: 0.5rem;
  margin: 0 0.5rem;
  color: var(--color-background);
  width: 15.625rem;
  height: 2rem;
}

button {
  padding: 0 0.75rem;
  border-radius: 0.5rem;
  height: 2rem;
  color: var(--color-background);
  cursor: pointer;
  border: 0.0625rem solid var(--color-foreground-level-2);
  font-weight: 600;
}

button:active {
  transition: none;
  opacity: 0.5;
}

/* HEADER */

header {
  max-width: 105rem;
  margin: 2rem auto;
  padding: 0 2rem;
  text-align: left;
}

header #logo {
  text-decoration: none;
  border: 0;
}

#logo svg {
  width: 8rem;
}

header {
  display: flex;
  justify-content: space-between;
}

header nav {
  display: flex;
  position: relative;
  align-items: flex-end;
}

header nav a {
  margin-right: 2rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-foreground);
  text-decoration: none;
  white-space: nowrap;
  border: 0;
}

header nav a:first-child {
  margin-left: 2rem;
}

header nav a:last-child {
  margin-right: 0;
}

#download button {
  width: 100%;
}

#download button svg {
  fill: var(--color-background);
  box-sizing: unset;
  margin-top: -0.2rem;
  margin-right: 0.5rem;
}

nav a:hover {
  text-decoration: none;
  color: var(--color-secondary);
}

nav a span {
  border: none;
}

nav a:hover span {
  border-bottom: 0.125rem solid;
}

@media only screen and (max-width: 30rem) {
  #logo svg {
    width: 6rem;
  }

  header nav {
    margin-top: 1rem;
  }

  header {
    flex-direction: column;
    align-items: center;
  }
  header nav a:first-child {
    margin-left: 0rem;
  }
}

@media only screen and (max-width: 40rem) {
  header nav {
    align-items: center;
  }
  header nav a {
    font-size: 0.875rem;
    margin-right: 0.875rem;
  }

  a.try-it {
    display: none;
  }
}

@media only screen and (max-width: 48rem) {
  a.try-it,
  #download button {
    display: none;
  }

  a.code {
    margin-right: 0;
  }
}

/* SUBTITLE */

#headline {
  position: relative;
  background: var(--color-foreground-level-1);
  display: flex;
  flex-direction: column;
}

#headline h2 {
  font-weight: 600;
  background-color: var(--color-background);
  z-index: 2;
  position: relative;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  margin: 0 auto;
  width: min-content;
  white-space: nowrap;
}

@media only screen and (max-width: 40.5rem) {
  #headline h2 span {
    display: block;
  }
}

@media only screen and (max-width: 30rem) {
  #headline h2 {
    font-size: 1rem;
  }
}

.gif {
  border-radius: 0.25rem;
}

.headline-gif {
  position: absolute;
  top: 19vw;
  left: 23vw;
  width: 40vw;
  z-index: 0;
}

@media only screen and (max-width: 30rem) {
  .headline-gif {
    top: 70vw;
    left: 12vw;
    width: 60vw;
  }
}

.headline {
  text-transform: uppercase;
  font-size: 30vw;
  background: linear-gradient(
    90deg,
    #ff5555 -8.25%,
    #0000ff 2.57%,
    #00bf66 33.08%,
    #b0b305 51.57%
  );
  color: #000;
  mix-blend-mode: exclusion;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media only screen and (min-width: 105rem) {
  .headline {
    font-size: 32rem;
  }
}

@media only screen and (max-width: 60rem) {
  .headline {
    font-size: 26.5vw;
  }
}

@media only screen and (max-width: 30rem) {
  .headline {
    font-size: 50vw;
    line-height: 40vw;
    padding-top: 4vw;
  }
  h1.subscribed {
    font-size: 38vw;
  }
}

/* GET THE APP */

.email-signup {
  align-items: center;
  align-self: center;
  background-color: black;
  border-radius: 1rem;
  display: flex;
  padding: 1rem;
  position: relative;
  width: max-content;
  z-index: 1;
}

@media only screen and (max-width: 30rem) {
  .email-signup p,
  .email-signup form {
    margin: 0;
  }
}

.email-signup p {
  font-size: 1.4rem;
  padding-left: 1rem;
  color: var(--color-background);
}

@media only screen and (max-width: 62.5rem) {
  .email-signup {
    flex-direction: column;
    padding: 1.5rem 1.25rem;
    row-gap: 1rem;
    width: 22rem;
  }

  .email-signup .main-cta > input[type="email"] {
    width: 23.4rem;
  }
}

.main-cta input[type="email"],
.main-cta button {
  font-size: 1.5rem;
  height: 3rem;
}

.main-cta button {
  background-color: var(--color-primary);
  border: none;
  padding: 0 1rem;
}

@media only screen and (max-width: 80rem) {
  .email-signup p,
  .email-signup button,
  .email-signup .main-cta > input[type="email"] {
    font-size: 1rem;
  }

  .email-signup .main-cta > input[type="email"],
  .email-signup button {
    height: 2rem;
  }
  .email-signup .main-cta > input[type="email"] {
    width: 10.75rem;
  }
}

@media only screen and (max-width: 40rem) {
  .email-signup .main-cta > input[type="email"] {
    margin-left: 0;
  }

  #get-the-app p,
  #get-the-app form {
    margin: 0;
    padding: 0;
  }

  #email-signup input[type="email"],
  #email-signup form button,
  #email-signup p {
    width: 80vw;
    margin-left: 0;
  }

  #email-signup form button,
  #email-signup p {
    margin-bottom: 1rem;
  }

  #email-signup input[type="email"] {
    margin-bottom: 0.5rem;
  }
}

/* FEATURES */

#features {
  position: relative;
  max-width: 100rem;
  margin: 10vw auto 0;
}

.features-gif {
  margin-bottom: -32rem;
  position: absolute;
  top: 79vw;
  right: -3rem;
  z-index: -1;
}

@media only screen and (max-width: 30rem) {
  .features-gif {
    width: 70vw;
    top: 62vw;
  }
}

@media only screen and (max-width: 40rem) {
  .features-gif {
    width: 50vw;
    top: 20vw;
  }
}

@media only screen and (max-width: 50rem) {
  .features-gif {
    top: 80vw;
  }
}

@media only screen and (max-width: 60rem) {
  .features-gif {
    top: 88vw;
  }
}

@media only screen and (min-width: 90rem) {
  .features-gif {
    width: 40vw;
    top: 74vw;
  }
}

@media only screen and (min-width: 100rem) {
  .features-gif {
    top: 74vw;
  }
}

@media only screen and (min-width: 110rem) {
  .features-gif {
    top: 67vw;
  }
}

@media only screen and (min-width: 120rem) {
  .features-gif {
    top: 62vw;
  }
}

@media only screen and (min-width: 140rem) {
  .features-gif {
    top: 55vw;
  }
}

#features h1.druk {
  font-size: 14vw;
  padding: 0.5rem 0;
  white-space: nowrap;
  background: linear-gradient(
    269.73deg,
    #baa700 63%,
    #00a907 69%,
    #00a907 80%,
    #baa700 93%
  );
  color: #000;
  mix-blend-mode: exclusion;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 8rem;
}

@media only screen and (max-width: 30rem) {
  #features h1.druk {
    font-size: 28vw;
    line-height: 80%;
    padding-top: 5rem;
    margin-top: 6rem;
    white-space: normal;
  }
}

@media only screen and (min-width: 70rem) {
  #features h1.druk {
    font-size: 11.5vw;
  }
}

@media only screen and (min-width: 90rem) {
  #features h1.druk {
    font-size: min(280px, 10.5vw);
  }
}

.container.attributes {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
}

.attribute {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 0 0 10rem;
  width: 90vw;
}

.attribute:last-child {
  margin-bottom: 0;
}

.attribute:nth-child(2n) {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 60rem) {
  .attribute,
  .attribute:nth-child(2n) {
    flex-direction: column-reverse;
  }
}

.attribute .screenshot {
  width: 41vw;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  align-self: stretch;
  display: flex;
  place-content: center;
}

.attribute .content {
  text-align: left;
  margin: 2.5rem 2.5rem 2.5rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--color-background);
  border-radius: 1rem;
  padding: 5.25rem;
  width: 32rem;
}

@media only screen and (max-width: 60rem) {
  .attribute {
    flex-direction: column-reverse;
  }

  .attribute .content {
    margin: 0;
  }

  .attribute .content {
    width: auto;
  }
}

@media only screen and (max-width: 80rem) {
  .attribute .content {
    padding: 3rem;
  }
}

.attribute h4 {
  font-size: 3rem;
  line-height: 3rem;
  font-weight: 700;
  letter-spacing: -1.125px;
  padding-bottom: 1.5rem;
  color: var(--color-foreground);
}

@media only screen and (max-width: 30rem) {
  .attribute h4 {
    font-size: 2rem;
    line-height: 1.75rem;
  }

  .attribute p {
    font-size: 1rem;
  }

  .attribute {
    width: 80vw;
  }

  .attribute > p {
    font-size: 1rem;
    padding-bottom: 1rem;
    align-items: flex-start;
  }
}

.attribute p svg {
  margin-right: 1rem;
  width: 2rem;
  height: 2rem;
}

.attribute p svg path {
  fill: var(--color-foreground);
}

.attribute p:first-of-type {
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--color-foreground-level-6);
  max-width: 26rem;
  padding: 1.25rem 0 2.5rem;
}

@media only screen and (max-width: 80rem) {
  .attribute p:first-of-type {
    padding: 0 0 1.25rem;
    font-size: 1.25rem;
  }
}

.attribute p:nth-child(n + 3) {
  padding-bottom: 2rem;
  display: flex;
  align-items: center;
}

@media only screen and (max-width: 80rem) {
  .attribute p:nth-child(n + 3) {
    padding-bottom: 1rem;
  }
}

.attribute p:nth-child(n + 3):last-child {
  padding: 0;
}

@media only screen and (max-width: 64rem) {
  .container.attributes {
    grid-template-columns: 1fr;
  }
}

/* SPECIFIC FEATURE STYLES */

.attribute:nth-child(1) .screenshot img {
  width: 75%;
  align-self: center;
}

@media only screen and (max-width: 60rem) {
  .attribute .screenshot,
  .attribute:nth-child(1) .screenshot img {
    width: 94%;
    margin-bottom: -4.5rem;
    z-index: -1;
    margin-right: -5.3vw;
  }
}

.attribute:nth-child(2) .screenshot {
  background-image: url(../img/ui/timeline.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  align-self: stretch;
  display: flex;
  place-content: center;
}

@media only screen and (max-width: 60rem) {
  .attribute:nth-child(2) .screenshot {
    background-position: center;
    height: 70vw;
    width: 100%;
  }
}

.attribute:nth-child(2) .screenshot img {
  width: 45%;
  align-self: center;
  margin-right: -6vw;
}

.attribute:nth-child(2n) .content {
  margin: 2.5rem 0 2.5rem 0;
}

.attribute:nth-child(3) .screenshot img {
  margin-right: -35vw;
  width: 180%;
  align-self: center;
}

@media only screen and (max-width: 60rem) {
  .attribute:nth-child(3) .screenshot img {
    width: 97%;
    margin-bottom: 3rem;
    z-index: -1;
    margin-right: -5.4vw;
  }
}

.attribute:nth-child(4) .screenshot {
  background-image: url(../img/ui/outgoing-support.png);
  background-position: 0rem 7rem;
  background-size: 90%;
}

.attribute:nth-child(4) .screenshot img {
  width: 45%;
  align-self: start;
  margin-left: 16rem;
  margin-top: 1rem;
}

@media only screen and (max-width: 60rem) {
  .attribute:nth-child(4) .screenshot {
    background-position: center;
    height: 70vw;
    width: 100%;
    background-size: 100%;
  }

  .attribute:nth-child(4) .screenshot img {
    width: 45%;
    align-self: center;
    margin: 0 auto;
  }
}

.float {
  box-shadow: 0px 3vw 3vw rgba(10, 11, 18, 0.287542),
    0px 1vw 1vw rgba(10, 11, 18, 0.238443), 0 0.5vw 0.5vw rgba(10, 11, 18, 0.2),
    0px 0.25vw 0.25vw rgba(10, 11, 18, 0.161557),
    0px 0.125vw 0.125vw rgba(10, 11, 18, 0.112458);
  border-radius: 1rem;
  background-color: var(--color-dark-background);
}

@media only screen and (max-width: 40rem) {
  .float {
    border-radius: 0.5rem;
  }
}

.full-width {
  width: 90vw;
  max-width: 100%;
  left: 0;
  position: relative;
}

/* PROTOCOLS */

#protocols {
  margin-top: 12vw;
  position: relative;
  background: var(--color-foreground-level-1);
}

#protocols h1 {
  padding: 1rem 0;
  font-size: 20vw;
  background: linear-gradient(
    269.94deg,
    #000aff 4.97%,
    #00b187 23.26%,
    #00c40a 31.97%,
    #ff7a00 48.46%
  );
  color: #000;
  mix-blend-mode: exclusion;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  z-index: 1;
  white-space: nowrap;
  pointer-events: none;
}

@media only screen and (min-width: 105rem) {
  #protocols h1 {
    font-size: 23rem;
  }
}

@media only screen and (max-width: 30rem) {
  #protocols h1 {
    font-size: 30vw;
    white-space: normal;
    line-height: 24vw;
    padding: 23vw 0 2vw 0;
  }
}

.subtitle-container {
  display: flex;
  justify-content: space-around;
  margin: 4rem 0 6rem;
  position: relative;
  z-index: 1;
}

.subtitle-container h2 {
  background-color: var(--color-background);
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
}

.protocol-gif {
  width: 30rem;
  position: absolute;
  top: 0;
  right: 50%;
}

@media only screen and (max-width: 80rem) {
  .protocol-gif {
    width: 38vw;
  }
}

@media only screen and (max-width: 40rem) {
  .protocol-gif {
    width: 67vw;
    top: 38vw;
    left: -1vw;
  }

  .subtitle-container {
    margin: 2rem auto 3rem;
    max-width: 90vw;
  }
}

.protocols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 1rem;
  max-width: 90vw;
  margin: 0 auto;
}

.protocol {
  position: relative;
  background-color: var(--color-background);
  text-align: left;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 22.5rem;
  border-radius: 1rem;
}

.protocol h3 {
  color: var(--color-foreground);
  display: flex;
  align-items: flex-start;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -1.125px;
  line-height: 90%;
  padding: 0 3rem 1rem 0;
}

.protocol .links {
  display: block;
  margin-top: 0.5rem;
}

@media only screen and (max-width: 64rem) {
  .protocol h3 {
    font-size: 2rem;
  }
}

@media only screen and (max-width: 52rem) {
  .protocols {
    grid-template-columns: repeat(1, 1fr);
  }

  .protocol h3 {
    font-size: 3rem;
  }
}

@media only screen and (max-width: 30rem) {
  .protocol h3 {
    font-size: 2.5rem;
  }

  .protocol svg {
    width: 2rem;
    height: 2rem;
  }
}

.protocol > div > span {
  font-family: var(--font-stack);
  font-size: 1rem;
  color: var(--color-foreground-level-6);
  text-transform: lowercase;
  font-weight: 600;
}

.protocol svg {
  position: absolute;
  top: 2rem;
  right: 2rem;
}

/* CODELANDS SECTION */

#codelands {
  margin-top: 16rem;
  position: relative;
  background: var(--color-foreground-level-1);
}

#codelands .codelands-gif {
  position: absolute;
  left: -0.5rem;
  top: 1rem;
  width: 40vw;
  z-index: 0;
}

#codelands h1 {
  text-transform: uppercase;
  font-size: 35vw;
  color: #009900;
  mix-blend-mode: difference;
  line-height: 0.77;
  position: relative;
  z-index: 2;
}

@media only screen and (min-width: 67.5rem) {
  #codelands h1 {
    font-size: 25rem;
  }
}

.two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  margin: -4rem auto 0;
  max-width: 90vw;
}

@media only screen and (max-width: 67.5rem) {
  .two-column {
    grid-template-columns: 1fr;
    max-width: 70vw;
    margin-top: 1rem;
  }
}

@media only screen and (max-width: 40rem) {
  .two-column {
    max-width: 100vw;
  }
}

.two-column-item {
  padding: 10vw 2vw 8vw;
  background-color: var(--color-background);
  position: relative;
  border-radius: 1rem;
  z-index: 1;
}

.two-column-item h3 {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -1.125px;
  line-height: 96%;
  padding-bottom: 2.5rem;
}

@media only screen and (max-width: 64rem) {
  .two-column-item {
    padding: 2rem;
  }
  .two-column-item h3 {
    font-size: 2rem;
    padding-bottom: 1rem;
  }
}

/* TIMELINE SECTION */

#timeline {
  position: relative;
  margin-top: 25vw;
  background: var(--color-foreground-level-1);
}

#timeline h1 {
  text-transform: uppercase;
  font-size: 18vw;
  line-height: 1;
  background: linear-gradient(
    90deg,
    #cc7a00 0%,
    #850f00 16.13%,
    #aa00e6 33.26%,
    #0011ff 50.21%,
    #00ba69 76.04%
  );
  color: #000;
  mix-blend-mode: difference;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  z-index: 1;
}

@media only screen and (max-width: 30rem) {
  #timeline h1 {
    font-size: 32vw;
    line-height: 26vw;
    padding-top: 16vw;
  }
}

.italic {
  font-style: italic;
}

#timeline .subtitle-container {
  position: relative;
  max-width: 41rem;
  text-align: left;
  margin: 0 0 3.5rem 11rem;
}

@media only screen and (min-width: 90rem) {
  #timeline .subtitle-container {
    margin-left: calc((100vw - 70rem) / 2);
  }
}

.timeline {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 1.5rem;
  text-align: left;
  margin-left: 11rem;
  position: relative;
}

@media only screen and (min-width: 116rem) {
  .timeline {
    margin-left: 0;
    max-width: 90rem;
    margin: 0 auto;
  }
}

.line {
  position: absolute;
  height: 0.0625rem;
  width: calc(100vw - 3rem);
  background: linear-gradient(
    90deg,
    #5555ff,
    #55ffff,
    #55ff55,
    #ffff55,
    #ff5555,
    #ff55ff,
    #5555ff
  );
  top: 2.53125rem;
}

@media only screen and (max-width: 30rem) {
  .line {
    left: 0.7rem;
    width: 0.0625rem;
    height: 25.8rem;
    top: 4rem;
    background: linear-gradient(
      0deg,
      #5555ff,
      #55ffff,
      #55ff55,
      #ffff55,
      #ff5555,
      #ff55ff,
      #5555ff
    );
  }
}

@media only screen and (max-width: 29.625rem) {
  .line {
    height: 27.3rem;
  }
}

@media only screen and (max-width: 24rem) {
  .line {
    height: 27rem;
  }
}

@media only screen and (max-width: 23rem) {
  .line {
    height: 28.5rem;
  }
}

@media only screen and (max-width: 22.375rem) {
  .line {
    height: 32rem;
  }
}

.timeline-item > h3 {
  color: var(--color-foreground);
  font-size: 2rem;
  padding: 1.5rem 0;
  line-height: 100%;
  letter-spacing: -1.125px;
  font-weight: 700;
}

.timeline-item > p {
  max-width: 16rem;
}

@media only screen and (max-width: 30rem) {
  .timeline-item {
    padding-top: 40px;
  }
}

@media screen and (max-width: 48rem) {
  #timeline .subtitle-container,
  .timeline {
    margin-left: 1rem;
  }

  #timeline .subtitle-container h2 {
    font-size: 100%;
  }

  .timeline-item > h3 {
    font-size: 2rem;
  }
}

@media screen and (max-width: 30rem) {
  #timeline .subtitle-container,
  .timeline {
    grid-template-columns: 1fr;
  }

  #timeline p,
  #timeline h3 {
    padding-left: 2rem;
    max-width: inherit;
  }

  .not-here {
    display: none;
  }
}

#timeline .subtitle-container h2 {
  padding: 1rem 1.5rem;
  line-height: 1.5;
}

#timeline .timeline-gif {
  width: 30vw;
  position: absolute;
  top: -8rem;
  right: -1vw;
}

@media only screen and (max-width: 75rem) {
  #timeline .timeline-gif {
    top: -5rem;
  }
}

@media only screen and (max-width: 28.75rem) {
  #timeline .timeline-gif {
    top: 8rem;
    width: 50vw;
  }
}

.icon {
  margin: 0.5rem 0 2rem;
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  background-clip: padding-box;
  transform-style: preserve-3d;
}

@media only screen and (max-width: 30rem) {
  .icon {
    margin: 0;
  }
}

.here,
.not-here,
.date {
  font-weight: 600;
  font-size: 0.875rem;
}

.here {
  color: var(--color-primary);
}

.not-active .not-here {
  opacity: 0;
}

.date {
  color: var(--color-foreground);
}

@media only screen and (max-width: 30rem) {
  .date {
    margin-top: -1.4rem;
  }
}

/* TERMS */

#terms h1 {
  z-index: 1;
}

#terms .headline-gif {
  height: 20rem;
  width: auto;
}

@media only screen and (max-width: 30rem) {
  #terms .headline-gif {
    top: inherit;
    left: inherit;
    position: inherit;
    margin-top: -4rem;
    width: 90vw;
  }

  #terms h1 {
    font-size: 46vw;
  }
}

#terms .content #terms-container {
  width: 70vw;
  max-width: 60rem;
  margin: 0 auto;
  text-align: left;
}

#terms .content #terms-container * {
  margin-bottom: 1rem;
}

#terms .content #terms-container ol {
  margin-bottom: 4rem;
}

#terms h3 {
  font-size: 1.5rem;
  margin-top: 2.5rem;
  font-size: 48px;
  font-weight: 900;
  color: var(--color-foreground);
  line-height: 2.5rem;
}

#terms ol {
  color: var(--color-foreground-level-4);
}

#terms #terms-text li {
  font-size: 3rem;
}

#terms #terms-text ol.little-list li {
  font-size: 1rem;
  color: var(--color-foreground-level-6);
  list-style-type: decimal;
}

#terms #terms-text ol.little-list {
  margin-bottom: 0;
}

@media only screen and (max-width: 30rem) {
  #terms h3,
  #terms #terms-text li {
    font-size: 1.5rem;
    line-height: 1.5rem;
  }
}

#terms ol li {
  list-style-type: upper-roman;
}

#terms ol li a {
  color: var(--color-foreground-level-6);
  border-bottom: 1px solid;
}

#terms h1.headline.druk {
  background: linear-gradient(90.12deg, #f81e00 32.21%, #0029ff 48.39%);
  background-clip: text;
  -webkit-background-clip: text;
}

#terms h1.headline.druk.privacy {
  background: linear-gradient(
    90deg,
    #ff33a1 27.5%,
    #9ab305 61.03%,
    #0593b3 87.46%
  );
  background-clip: text;
  -webkit-background-clip: text;
}

#disclaimer {
  background: var(--color-background);
  color: var(--color-foreground-level-6);
  padding: 1rem 1.2rem;
  border-radius: 1rem;
  margin-top: 3vw;
}

/* FOOTER */

footer {
  position: relative;
  margin: 16rem 0;
  text-align: left;
  background: var(--color-foreground-level-1);
}

.footer-gif {
  left: 20vw;
  position: absolute;
  top: -15vw;
  width: 40rem;
}

@media only screen and (min-width: 90rem) {
  .footer-gif {
    width: 36rem;
    top: -5vw;
    left: 34vw;
  }
}

footer .text {
  max-width: 27.5rem;
  position: relative;
  left: 50%;
  top: 6rem;
}

footer h1 {
  font-size: 17.5rem;
  color: #cc0000;
  line-height: 0.765;
  mix-blend-mode: difference;
}

@media only screen and (max-width: 60rem) {
  footer h1 {
    font-size: 33vw;
  }

  footer .footer-gif {
    width: 60vw;
    top: -18vw;
  }

  footer .text {
    left: inherit;
    top: 3rem;
  }
}

footer h1 span {
  position: relative;
  left: 12vw;
  display: block;
}

@media only screen and (min-width: 50rem) {
  footer h1 span {
    left: 6rem;
  }
}

footer p {
  color: var(--color-foreground);
}

footer p.small {
  margin-top: 1rem;
  color: var(--color-foreground-level-5);
}

footer p.small a {
  color: var(--color-foreground-level-5);
  border-bottom: 1px solid var(--color-foreground-level-3);
}

footer form {
  margin: 2rem 0;
}

footer form input[type="email"] {
  border: 0.0625rem solid var(--color-foreground-level-4);
  color: var(--color-foreground);
  width: 20rem;
  margin-left: 0;
}

@media only screen and (max-width: 30rem) {
  footer form input[type="email"] {
    width: 11.5rem;
  }
}

footer form button {
  color: var(--color-foreground-level-6);
  border-color: var(--color-foreground-level-4);
}

footer form input[type="email"]::placeholder {
  color: var(--color-foreground-level-4);
  opacity: 1;
}

footer form button:hover,
footer form button:focus {
  color: var(--color-background);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* SUBSCRIBE PAGE */

#subscribed .overflow-killer {
  overflow-x: inherit;
}

.subscribe-button {
  margin-top: 2rem;
  z-index: 2;
  background: var(--color-primary);
  color: var(--color-background);
  height: 3rem;
  font-size: 1.25rem;
  border: none;
  padding: 0 1rem;
  position: relative;
}

/* 404 PAGE */

#not-found #headline {
  height: 80vh;
}

#not-found .headline {
  background: linear-gradient(
    90deg,
    #00ffa3 46.51%,
    #028666 49.44%,
    #0555b3 59.04%
  );
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* DOWNLOAD PAGE */

#download {
  padding-bottom: 5rem;
}

#download .headline {
  background: linear-gradient(90.23deg, #ff0000 35.8%, #0517b3 46.14%);
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#download a.try-it,
#download button {
  display: none;
}

#download .headline-gif {
  top: 13vw;
  left: 13vw;
}

#download .content {
  max-width: 102rem;
  margin: 0 auto;
  padding: 0 2rem;
}

#download #text {
  background: var(--color-background);
  padding: 2rem 2.5rem;
  border-radius: 1rem;
  z-index: 1;
  text-align: left;
  position: relative;
  margin: 0 auto;
  width: max-content;
}

#download #text * {
  padding: 0.5rem 0;
}

#download #text h1 {
  padding: 0;
}

#download #text h1 span {
  font-size: 1rem;
  text-transform: uppercase;
  position: relative;
  top: -1.5rem;
}

#download #text a span {
  padding: 0;
}

#download #text p {
  margin-bottom: 1rem;
}

#download #text button {
  background: var(--color-primary);
  color: var(--color-background);
  height: 3rem;
  font-size: 1.25rem;
  border: none;
  margin-bottom: 0.5rem;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

#download #text button#email-me {
  display: none;
}

#download .content {
  z-index: 1;
  align-items: center;
  justify-content: center;
}

@media only screen and (max-width: 30rem) {
  #download #text h1 {
    font-size: 2rem;
  }

  #download #text h1 span {
    font-size: 0.75rem;
    top: -1.25rem;
  }

  #download .headline-gif {
    top: 99vw;
    left: -2vw;
  }

  #download-screenshot {
    top: 17vh;
    width: 101vw;
  }

  #download #text {
    margin-top: 8rem;
    width: 100%;
  }

  #download #text h2 {
    font-size: 1rem;
    font-weight: 600;
  }

  #download #text p {
    font-size: 0.75rem;
    padding-bottom: 0;
  }

  #download #text button {
    display: none;
  }

  #download #text button#email-me {
    display: inherit;
  }
}

/* BLOG OVERVIEW */

#blog .content {
  width: 80vw;
  max-width: 45rem;
  margin: 0 auto;
  text-align: left;
  cursor: text;
}

#blog .overview {
  margin-top: 2.5rem;
}

.post-item h2 {
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: 700;
  padding-top: 1rem;
}

.post-item .meta {
  padding-bottom: 1rem;
  color: var(--color-foreground-level-5);
}

.post-item .meta > span {
  color: var(--color-foreground-level-6);
}

.post-item .read-more button {
  background-color: var(--color-foreground-level-3);
  color: var(--color-foreground-level-6);
  border: none;
  margin: 1rem 0 2rem;
}

.post-item .read-more button:hover {
  background-color: var(--color-foreground-level-2);
}

.post-item .read-more button:active {
  color: var(--color-foreground-level-5);
}

/* BLOG POSTS */

#post .content {
  width: 80vw;
  max-width: 45rem;
  margin: 0 auto 6rem;
  text-align: left;
}
#post .content > * {
  cursor: text;
}

#post .headline {
  font-size: 18vw;
  text-align: center;
}

#post .subtitle {
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: 700;
  text-align: center;
  color: var(--color-foreground);
  padding-bottom: 3rem;
}

#post .content #post-container * {
  margin-bottom: 1rem;
}

#post .content #post-container li {
  margin-bottom: 0.5rem;
}

#post h2 {
  margin-top: 1rem;
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: 900;
  color: var(--color-foreground);
  padding-top: 2rem;
}

#post h3,
blockquote {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 700;
  padding-top: 1rem;
}

#post blockquote {
  color: var(--color-primary);
  font-style: italic;
}

#post dl,
ol,
ul {
  color: var(--color-foreground-level-6);
}

#post dd {
  line-height: 150%;
}

#post dl blockquote {
  padding-top: inherit;
  font-size: 1rem;
  font-weight: inherit;
  color: inherit;
}

#post dd {
  padding-left: 1rem;
  padding-bottom: 0.5rem;
}

#post .ascii,
pre.code {
  font-family: monospace;
  line-height: 1rem;
  color: #5555ff;
  margin: 1em 0;
  overflow: hidden;
}

pre.code {
  color: var(--color-foreground-level-6);
}

#post .ascii pre > code {
  line-height: 0;
}

@media only screen and (max-width: 30rem) {
  #post h2 {
    font-size: 2rem;
    line-height: 2.4rem;
  }
  #post h3,
  blockquote {
    font-size: 1rem;
  }
}

@media only screen and (min-width: 90rem) {
  #post .headline {
    font-size: 12rem;
    line-height: 0.85;
  }
}