*,
*::after,
*::before {
  box-sizing: border-box;
}

:root {
  font-size: 15px;
}

body {
  --color-text: #fff;
  --color-bg: #000;
  --color-link: #fff;
  --color-link-hover: #fff;
  --font-size-s: 13vw;
  --font-size-m: 16vw;
  --font-size-l: 24vw;
  --font-size-xl: 26vw;
  --font-family: widescreen-ex, sans-serif;
  --font-weight: 900;
  --content-offset: 20vh;
  --font-case: uppercase;
  --color-rep-text: var(--color-text);
  --color-rep-text-main: var(--color-text);
  --color-rep-outline: var(--color-text);
  --color-rep-bg: var(--color-bg);
  /* Adjust these depending on your font */
  --font-factor: 0.059;
  --font-line: 0.745;
  color: var(--color-text);
  background-color: var(--color-bg);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.demo-2 {
  --color-bg: #8d8e98;
  --content-offset: 10vh;
  --font-family: widescreen-mixed, sans-serif;
  --font-size-l: 20vw;
  --font-size-xl: 24vw;
}

.demo-3 {
  --color-bg: #525fdc;
  --content-offset: 10vh;
  --color-rep-bg: transparent;
}

.demo-4 {
  --color-bg: #1f1d1c;
  --color-text: #d14521;
  --color-rep-text: #d14521;
  --content-offset: 10vh;
  --font-family: bely-display, serif;
  --font-weight: 400;
  --font-factor: 0.059;
  --font-line: 0.745;
  --font-case: lowercase;
  --color-rep-bg: transparent;
  --font-size-xl: 34vw;
}

.demo-5 {
  --color-bg: #c5c3c7;
  --color-text: #b61e1e;
  --color-link: #000;
  --content-offset: 10vh;
  --color-rep-bg: transparent;
}

/* Page Loader */
.js .loading::before,
.js .loading::after {
  content: "";
  position: fixed;
  z-index: 1000;
}

.js .loading::before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-bg);
}

.js .loading::after {
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  opacity: 0.4;
  background: var(--color-link);
  animation: loaderAnim 0.7s linear infinite alternate forwards;
}

@keyframes loaderAnim {
  to {
    opacity: 1;
    transform: scale3d(0.5, 0.5, 1);
  }
}

a {
  text-decoration: none;
  color: var(--color-link);
  outline: none;
}

a:hover {
  color: var(--color-link-hover);
  outline: none;
}

/* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
a:focus {
  /* Provide a fallback style for browsers
	 that don't support :focus-visible */
  outline: none;
  background: lightgrey;
}

a:focus:not(:focus-visible) {
  /* Remove the focus indicator on mouse-focus for browsers
	 that do support :focus-visible */
  background: transparent;
}

a:focus-visible {
  /* Draw a very noticeable focus style for
	 keyboard-focus on browsers that do support
	 :focus-visible */
  outline: 2px solid red;
  background: transparent;
}

.unbutton {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
}

.unbutton:focus {
  outline: none;
}

.frame {
  text-align: center;
}

.frame__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
}

.frame__links {
  margin: 0.5rem 0 2rem;
}

.frame__links a:not(:last-child) {
  margin-right: 1rem;
}

.hover-line,
.cda-sponsor-link {
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

.hover-line::before,
.cda-sponsor-link::before {
  content: "";
  height: 1px;
  width: 100%;
  background: currentColor;
  position: absolute;
  top: 92%;
  transition: transform 0.3s;
  transform-origin: 0% 50%;
}

.hover-line:hover::before,
.cda-sponsor-link:hover::before {
  transform: scaleX(0);
  transform-origin: 100% 50%;
}

.content {
  margin: var(--content-offset) 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content p {
  hyphens: auto;
  max-width: 500px;
  font-size: 1.25rem;
  line-height: 1.8;
  margin: 10vh auto;
}

p.footer {
  padding-top: 25vh;
  font-size: 1rem;
  opacity: 0.5;
}

.content__title--size-s {
  --size: var(--font-size-s);
}

.content__title--size-m {
  --size: var(--font-size-m);
}

.content__title--size-l {
  --size: var(--font-size-l);
}

.content__title--size-xl {
  --size: var(--font-size-xl);
}

.content__title {
  font-size: var(--size);
  margin: 0;
  display: grid;
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  text-transform: var(--font-case);
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.content__title--left {
  margin-right: auto;
}

.content__title--right {
  margin-left: auto;
}

.text-rep span {
  grid-area: 1 / 1 / 2 / 2;
  /*background: #f3f4f6;*/
  line-height: var(--font-line);
  padding-bottom: calc(var(--font-factor) * var(--size));
  will-change: transform;
}

/*.text-rep span:not(:last-child) {
  color: var(--color-rep-text);
}*/

.demo-2 .text-rep span,
.demo-3 .text-rep span:not(:last-child) {
  -webkit-text-stroke: 1px var(--color-rep-outline);
  text-stroke: 1px var(--color-rep-outline);
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  color: transparent;
}

.demo-3 .text-rep span,
.demo-4 .text-rep span,
.demo-5 .text-rep span {
  padding-bottom: 0;
}

@media screen and (min-width: 53em) {
  .frame {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-areas: "title demos demos sponsor" "links links links links";
    grid-column-gap: 3vw;
    grid-row-gap: 1rem;
    justify-content: space-between;
    text-align: left;
  }
  .frame__title {
    grid-area: title;
  }
  .frame__links {
    margin: 0;
    grid-area: links;
  }
  .frame__links--demos {
    grid-area: demos;
  }
}