* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  min-height: 100svh;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  background:
    linear-gradient(
      rgba(0,0,0,.62),
      rgba(0,0,0,.76) 55%,
      rgba(0,0,0,.9)
    ),
    url("../images/gildenbanner.webp?v=02");

  background-size: cover;
  background-position: center 72%;
  background-repeat: no-repeat;

  overflow: hidden;

  font-family: Georgia, serif;

  color: #f1e6c8;

  text-align: center;

  position: relative;
}

.overlay {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at center,
      rgba(212,175,55,.1),
      transparent 62%
    ),
    linear-gradient(
      to bottom,
      transparent 70%,
      rgba(11,11,15,.55)
    );

  pointer-events: none;
}

.content {
  position: relative;
  z-index: 2;

  max-width: 850px;

  padding: 30px;
}

h1 {
  font-size: 82px;

  color: #d4af37;

  margin-bottom: 25px;

  text-shadow:
    0 0 12px rgba(0,0,0,.95),
    0 0 30px rgba(0,0,0,.75),
    0 0 35px rgba(212,175,55,.3);

  animation: glow 2s infinite alternate;
}

p {
  font-size: 22px;

  line-height: 1.8;

  color: #eee;

  text-shadow:
    0 0 10px rgba(0,0,0,.95),
    2px 2px 10px #000;
}

.spinner {
  width: 90px;
  height: 90px;

  margin: 45px auto 0;

  border: 6px solid rgba(255,255,255,.15);
  border-top: 6px solid #d4af37;

  border-radius: 50%;

  animation: spin 1s linear infinite;
}

.loading-text {
  margin-top: 30px;

  color: #d4af37;

  font-size: 18px;

  letter-spacing: 1px;

  text-shadow:
    0 0 10px rgba(0,0,0,.95),
    0 0 18px rgba(212,175,55,.2);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes glow {
  from {
    text-shadow:
      0 0 12px rgba(0,0,0,.95),
      0 0 25px rgba(212,175,55,.18);
  }

  to {
    text-shadow:
      0 0 12px rgba(0,0,0,.95),
      0 0 22px rgba(212,175,55,.75),
      0 0 48px rgba(212,175,55,.38);
  }
}

/* ======================================================
   ULTRAWIDE
====================================================== */

@media (min-aspect-ratio: 21/9) {
  body {
    background-position: center 78%;
  }
}

/* ======================================================
   MOBILE
====================================================== */

@media (max-width: 900px) {
  body {
    background-position: center 70%;
  }
}

@media (max-width: 768px) {
  body {
    background-position: center 68%;
  }

  h1 {
    font-size: 52px;
  }

  p {
    font-size: 18px;
  }

  .spinner {
    width: 74px;
    height: 74px;
    border-width: 5px;
  }
}

@media (max-width: 480px) {
  body {
    background-position: center 66%;
  }

  .content {
    padding: 24px;
  }

  h1 {
    font-size: 42px;
  }

  p {
    font-size: 17px;
  }

  .loading-text {
    font-size: 16px;
  }
}