* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #000;
}

body {
  display: flex;
  justify-content: center;
  overflow-x: hidden;
}

.site {
  position: relative;
  width: min(100vw, 1920px);
  aspect-ratio: 1920 / 1600;
  background: #000;

  /* Makes the site itself the sizing reference */
  container-type: inline-size;
}

.template {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* All overlay text scales relative to .site, NOT the browser window */
.copy,
.contact {
  position: absolute;
  color: #f8d56d;
  font-family: Georgia, "Times New Roman", serif;
  text-align: center;
  line-height: 1.35;
  text-shadow: 0 1px 0 #000;
}

.copy p {
  margin: 0;
}

/* First panel */
.box-one {
  left: 25%;
  top: 40.3%;
  width: 50%;
  font-size: 1.23cqw;
}

/* Second panel */
.box-two {
  left: 27%;
  top: 60.2%;
  width: 45%;
  font-size: 1.23cqw;
}

/* Contact information */
.contact {
  left: 15%;
  top: 82.5%;
  width: 27%;
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  font-size: 1.05cqw;
}

.contact a {
  color: #f8d56d;
  text-decoration: none;
}

.contact a:hover,
.contact a:focus-visible {
  text-decoration: underline;
  outline: none;
}

/* Invisible click targets over social icons */
.socials a {
  position: absolute;
  top: 81.5%;
  height: 3.4%;
  border-radius: 18%;
}

.socials a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.discord {
  left: 62.45%;
  width: 3.55%;
}

.instagram {
  left: 66.85%;
  width: 3.55%;
}

.reddit {
  left: 72.55%;
  width: 3.55%;
}

.x {
  left: 77.55%;
  width: 3.55%;
}

/* Mobile */
@media (max-width: 700px) {
  .copy {
    line-height: 1.2;
  }

  .contact {
    line-height: 1.2;
    gap: 0.25em;
  }
}