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

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
  font-size: clamp(1.125rem, 1.8vw, 1.8rem);
  color: white;
  background: #000 url("../images/giant-slayers-u-maga-warrior-challenge-event.jpg") center top repeat-y;
  background-size: 100% auto;
}

.signup-image {
  display: block;
  width: clamp(300px, 80vw, 1200px);
  max-width: 100%; /* ✅ prevents overflow on zoom */
  height: auto;
  margin: clamp(20px, 3vh, 40px) auto 0 auto;
}

.text-block {
  max-width: 80ch;
  margin: 5vh auto;
  padding: 0 2vw;
  text-align: left;
  overflow-wrap: break-word; /* ✅ protects long strings from pushing width */
  word-break: break-word;
}

.text-block p {
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.text-block .note {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  opacity: 0.85;
  margin-bottom: 1rem;
}

.optin-note {
  font-size: clamp(0.85rem, 1.5vw, 1.25rem);
  margin-bottom: 1.25rem;
  line-height: 1.5;
  opacity: 0.85;
}

.shadow {
  text-shadow: 0 0 2.5vh #000;
}

a:link {
	color: #04fc6a;
}
a:visited {
	color: #04fc6a;
}

a:hover {
	color: #09b951;
}

@media (max-width: 600px) {
  .signup-image {
    width: 90%;
    margin-top: 1rem;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  html {
    font-size: clamp(1.5rem, 2.7vw, 2.7rem);
  }
}

@media screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
  html {
    font-size: clamp(1.5rem, 2.7vw, 2.7rem);
  }
}

.viewport-lock {
  display: block;
  max-width: 100vw;
  overflow-x: hidden;
  padding: 0;
  margin: 0 auto;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}