@font-face {
  font-family: "UNI North Regular";
  font-style: normal;
  font-weight: normal;
  src:
    local("UNI North Regular"),
    url("../webfonts/UNINorth-Regular.woff") format('woff');
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: "Dosis", sans-serif;
  font-weight: bold;
  font-size: 14pt;
  background: radial-gradient(ellipse at top, rgb(215, 200, 90) 0%, rgb(10, 65, 0) 100%) fixed;
  color: #fff;
  min-height: 100vh;
}

@media only screen and (max-width: 1000px) {
  html, body {
    font-size: 18pt;
    line-height: 140%;
  }
}

#splash-downlights {
  height: 100vh;
  background-image: url("../images/downlights.webp");
  mix-blend-mode: screen;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-repeat: no-repeat;
  background-position-x: center;
  pointer-events: none;
}

#splash-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  min-height: 100vh;
}

#splash-inner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4vh;
  flex: 1;
}

#splash-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.logo {
  max-height: 60vh;
  max-width: 80vw;
  user-select: none;
  filter: drop-shadow(0px 64px 16px rgba(0, 0, 0, 0.4));
}

#splash {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.splash-video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  margin: 64px 0;
  width: 1280px;
  max-width: 90vw;
  z-index: 1;
  filter: drop-shadow(0px 16px 16px rgba(0, 0, 0, 0.8));
}

.splash-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.splash-section {
  padding: 48px 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  text-align: center;
}

.splash-section > h1 {
  border: 0;
  margin: 0;
  padding: 0;
}

.splash-banners {
  display: flex;
  justify-content: center;
  align-items: center;
}

.splash-banners > a {
  border: 0;
  margin-left: 16px;
  margin-right: 16px;
}

.splash-banners > a > img {
  width: 256px;
  margin: 32px;
  filter: drop-shadow(0px 16px 16px rgba(0, 0, 0, 0.8));
}

.splash-banners > a > img:hover {
  filter: contrast(50%) sepia(50) hue-rotate(10deg) saturate(800%) drop-shadow(0px 16px 16px rgba(0, 0, 0, 0.8));
}

@media only screen and (max-width: 1000px) {
  .splash-banners {
    flex-wrap: wrap;
  }
}

.newsletter-signup-form {
  font-size: 2rem;
  text-align: center;
  margin: 64px;
}

.newsletter-signup-form > div {
  margin: 16px;
  filter: drop-shadow(0px 2px 1px rgba(0, 0, 0, 0.6));
}

.join-discord-section {
  margin-top: 32px;
  margin-bottom: 64px;
  line-height: 150%;
  text-align: center;
  justify-content: center;
  filter: drop-shadow(0px 2px 1px rgba(0, 0, 0, 0.6));
}

.wip-message {
  background-color: #0003;
  margin: 0 0;
  padding: 32px;
  border-radius: 32px;
  max-width: 600px;
  font-size: 1rem;
  line-height: 125%;
}

.wip-message em {
  text-decoration: underline;
}

.newsletter-section h1 {
  border: 0;
  margin-bottom: 32px;
}

#splash-descriptions {
  display: flex;
  width: 1000px;
  max-width: 80vw;
  flex-direction: column;
  justify-content: center;
  margin-top: 128px;
  margin-bottom: 128px;
}

div.splash-description {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 128px;
}

div.splash-description:nth-child(even) {
  flex-direction: row-reverse;
}

div.splash-description:last-child {
  margin-bottom: 0;
}

.splash-description-media {
  width: 384px;
  height: 384px;
  border-radius: 32px;
  border: 4px solid #fff;
  margin-left: 0;
  margin-right: 32px;
}

div.splash-description:nth-child(even) .splash-description-media {
  margin-right: 0;
  margin-left: 64px;
}

.splash-description-text h1 {
  border-bottom: 0;
}

.splash-description-text {
  font-size: 1.2rem;
  line-height: 150%;
  filter: drop-shadow(0px 2px 1px rgba(0, 0, 0, 0.6));
}

@media only screen and (max-width: 1000px) {
  div.splash-description {
    flex-wrap: wrap;
  }

  .splash-description-media {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 64px;
    width: 80vw;
    height: 80vw;
  }

  div.splash-description:nth-child(even) .splash-description-media {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 32px;
  }

  div.splash-description-text {
    font-size: 2.2rem;
    line-height: 140%;
    text-align: center;
  }
}

input {
  border: 0 solid #fff;
  border-radius: 32px;
  padding: 8px 32px;
  font-family: 'Dosis', sans-serif;
  font-weight: bold;
  font-size: 1.2rem;
}

input.email {
  width: 400px;
  color: #000;
  background-color: #fff;
}

input.button {
  color: #fff;
  border: 0;
  background-color: #000a;
  cursor: pointer;
  width: auto;
  margin-top: 16px;
  margin-bottom: 16px;
}

input.button:hover {
  border-color: #ffff;
  background-color: #fff5;
}

a {
  color: #ffdd00;
  text-decoration: none;
  border-bottom: 2px solid #ffdd00; 
}

a:hover {
  color: #ffff00;
  border-color: #ffff00; 
}

#splash-socials {
  margin: 256px;
  text-align: center;
}

#splash-social-links {
  margin: 32px;
  text-align: center;
  display: flex;
}

#splash-social-links a {
  font-size: 4rem;
  border-bottom: 0;
  margin: 32px;
  display: block;
}

#splash-footer {
  margin: 64px;
  text-align: center;
  line-height: 150%;
  font-size: 0.8rem;
}

h1.big-headline {
  font-family: "UNI North Regular", sans-serif;
  z-index: 0;
  color: #120eb7;
  filter: drop-shadow(0px 16px 16px rgba(0, 0, 0, 0.6));
  letter-spacing: 2px;
  position: relative;
  display: flex;
  font-weight: normal;
  font-size: 5rem;
  line-height: 150%;
}

h1.big-headline:before {
  content: attr(data-text);
  position: absolute;
  -webkit-text-stroke: 8px #fff;
  color: #fff;
  z-index: -1;
  line-height: 150%;
}

h1.headline {
  font-family: "UNI North Regular", sans-serif;
  z-index: 0;
  color: #120eb7;
  filter: drop-shadow(0px 8px 8px rgba(0, 0, 0, 0.6));
  letter-spacing: 1px;
  position: relative;
  display: flex;
  font-weight: normal;
  font-size: 2.6rem;
  line-height: 150%;
}

h1.headline:before {
  content: attr(data-text);
  position: absolute;
  -webkit-text-stroke: 6px #fff;
  color: #fff;
  z-index: -1;
  line-height: 150%;
}

@media only screen and (max-width: 1000px) {
  h1.big-headline {
    font-size: 5rem;
    text-align: center;
    justify-content: center;
  }

  h1.big-headline:before {
    -webkit-text-stroke: 12px #fff;
  }

  h1.headline {
    font-size: 3rem;
    text-align: center;
    justify-content: center;
  }

  h1.headline:before {
    -webkit-text-stroke: 10px #fff;
  }
}

p em {
  text-decoration: underline;
}

.splash-inconspicuous {
  width: 256px;
  filter: drop-shadow(0px 16px 16px rgba(0, 0, 0, 0.6));
}

form#mc-embedded-subscribe-form input {
  filter: drop-shadow(0px 16px 16px rgba(0, 0, 0, 0.6));
}