@font-face {
  font-family: 'Graphik-Bold';
  src: url(00832443904fee4c15271313a38cf193.eot);
  src: url(00832443904fee4c15271313a38cf193.eot?#iefix) format("embedded-opentype"), url(8577b4fc6385b8212ef28adeb9eb7429.woff2) format("woff2"), url(fae408ba8c850b22ac30219504eed4ea.woff) format("woff");
  font-weight: 500;
  font-style: normal;
  font-stretch: normal; }

html {
  font-family: 'Graphik-Bold', sans-serif;
  font-size: 100vw;
  text-align: center;
  text-transform: uppercase; }

body {
  border: calc( 0.14634 * (40.18px + 64.82 * ((1rem - 320px) / 390))) solid currentColor;
  margin: 16px;
  padding: 0 8px; }
  @media screen and (min-width: 710px) {
    body {
      border: calc( 0.14634 * 105px) solid currentColor; } }
  @media screen and (min-width: 710px) {
    body {
      font-size: 105px; } }

header {
  font-size: calc(13.85px + 12.65 * ((1rem - 320px) / 390));
  margin-top: 1em; }
  @media screen and (min-width: 710px) {
    header {
      font-size: 26.5px; } }

footer {
  font-size: calc(8.82px + 6.18 * ((1rem - 320px) / 390));
  margin: 2em 0; }
  @media screen and (min-width: 710px) {
    footer {
      font-size: 15px; } }

footer p {
  margin: 0.25em; }

footer a {
  color: inherit;
  text-decoration: none; }

header a {
  color: #FF00A3;
  position: relative;
  text-decoration: none; }
  header a:after {
    background: currentColor;
    bottom: -0.05em;
    content: "";
    left: 0;
    position: absolute;
    height: 0.1em;
    width: 100%; }

main h1 {
  font-size: calc(205.8px + 344.2 * ((1rem - 320px) / 390));
  line-height: 0;
  margin: 0; }
  @media screen and (min-width: 710px) {
    main h1 {
      font-size: 550px; } }

.heading__large {
  color: #FF00A3;
  display: block;
  font-size: 1em;
  font-size: 1em;
  line-height: 1; }

.heading__small {
  display: inline;
  font-size: calc(40.18px + 64.82 * ((1rem - 320px) / 390));
  line-height: 1;
  border-bottom: 0.14634em solid currentColor;
  border-top: 0.14634em solid currentColor;
  vertical-align: top; }
  @media screen and (min-width: 710px) {
    .heading__small {
      font-size: 105px; } }

.explanation {
  border: calc( 0.14634 * (40.18px + 64.82 * ((1rem - 320px) / 390))) solid currentColor;
  border-top: none;
  border-left: none;
  border-right: none;
  line-height: 1.2;
  font-size: calc(13.5px + 15 * ((1rem - 320px) / 390));
  margin: 1.6em auto 0;
  width: calc(2 * (120.64px + 179.36 * ((1rem - 320px) / 390))); }
  @media screen and (min-width: 710px) {
    .explanation {
      border: calc( 0.14634 * 105px) solid currentColor; } }
  @media screen and (min-width: 710px) {
    .explanation {
      font-size: 28.5px;
      width: 614px;
      border-top: none;
      border-left: none;
      border-right: none; } }

.cta {
  color: #FF00A3;
  font-size: calc(120.64px + 179.36 * ((1rem - 320px) / 390));
  position: relative; }
  @media screen and (min-width: 710px) {
    .cta {
      font-size: 300px; } }
  @media (hover: hover) {
    .cta {
      color: blue; } }

.cta a {
  color: inherit;
  line-height: 1;
  display: block;
  position: relative; }
  @media (hover: hover) {
    .cta a:before, .cta a:after {
      content: "BUY";
      position: absolute;
      left: 0;
      color: yellow;
      font-size: 1em;
      text-align: center;
      transition: transform 50ms;
      width: 100%; }
    .cta a:after {
      color: #FF00A3;
      top: 0;
      transition: transform 75ms; } }

.cta--animate a:before {
  transform: translate(10px, -10px); }

.cta--animate a:after {
  transform: translate(20px, -20px); }

.cta a {
  display: block;
  font-size: 1em;
  font-size: calc(120.64px + 179.36 * ((1rem - 320px) / 390));
  left: -0.075em;
  margin: 0 auto;
  text-decoration: none;
  position: relative;
  width: calc(2 * (120.64px + 179.36 * ((1rem - 320px) / 390))); }
  @media screen and (min-width: 710px) {
    .cta a {
      font-size: 300px;
      margin: 0 auto;
      width: 614px; } }