* {
  box-sizing: border-box;
}

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

body {
  min-height: 100vh;
}

/* =========================
   MAIN PAGE
   ========================= */

.home-page {
  background-image: url("background.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;

  min-height: 100vh;

  font-family: "Times New Roman", Times, serif;
}

/* Main centered content */

.home-container {
  width: 100%;
  max-width: 850px;

  margin: 0 auto;

  padding-top: 45px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 60px;

  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* =========================
   BINGO PORTRAIT
   ========================= */

.portrait {
  width: 600px;
  height: 450px;

  max-width: 100%;
  height: auto;

  object-fit: contain;

  display: block;
}

/* =========================
   RAINBOW TITLES
   ========================= */

.rainbow-title {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-weight: bold;

  text-align: center;

  line-height: 1;

  margin-left: 0;
  margin-right: 0;

  word-spacing: 0;
}

/* =========================
   SATURATED 90s RAINBOW
   ========================= */

.rainbow-title span:nth-child(7n + 1) {
  color: #ff0000;
}

.rainbow-title span:nth-child(7n + 2) {
  color: #ff6600;
}

.rainbow-title span:nth-child(7n + 3) {
  color: #ffff00;
}

.rainbow-title span:nth-child(7n + 4) {
  color: #00cc00;
}

.rainbow-title span:nth-child(7n + 5) {
  color: #0066ff;
}

.rainbow-title span:nth-child(7n + 6) {
  color: #6600ff;
}

.rainbow-title span:nth-child(7n + 7) {
  color: #ff00cc;
}

/* =========================
   MAIN TITLE
   ========================= */

h1.rainbow-title {
  font-size: clamp(42px, 7vw, 72px);

  margin-top: 18px;
  margin-bottom: 20px;

  letter-spacing: 1px;

  word-spacing: 0;
}

/* =========================
   DESCRIPTION
   ========================= */

.description {
  max-width: 720px;

  margin: 0 auto;

  color: white;

  font-family: "Times New Roman", Times, serif;

  font-size: 21px;

  line-height: 1.45;

  text-align: center;

  text-shadow:
    2px 2px 3px black,
    -1px -1px 2px black;

  margin-bottom: 28px;
}

/* =========================
   HOTLINE LINK
   ========================= */

.hotline-link {
  display: inline-block;

  font-size: clamp(24px, 3.8vw, 42px);

  text-decoration: none;

  cursor: pointer;

  transition: transform 0.15s ease;

  line-height: 1;
}

.hotline-link:hover {
  transform: scale(1.06);
}

.hotline-link:active {
  transform: scale(0.98);
}

/* =========================
   MOBILE MAIN PAGE
   ========================= */

@media (max-width: 650px) {

  .home-container {
    padding-top: 25px;
  }

  .portrait {
    width: 100%;
    max-width: 600px;
  }

  h1.rainbow-title {
    font-size: 42px;
  }

  .description {
    font-size: 18px;
  }

  .hotline-link {
    font-size: 30px;
  }
}


/* =========================================================
   CALL PAGE
   ========================================================= */

.call-page {
  background-image: url("background.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;

  min-height: 100vh;

  font-family: "Times New Roman", Times, serif;
}

/* Main call page container */

.call-container {
  width: 100%;
  max-width: 850px;

  margin: 0 auto;

  padding-top: 100px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 60px;

  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* =========================
   CALL PAGE TITLE
   ========================= */

.call-title {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;

  font-weight: bold;

  font-size: clamp(38px, 6vw, 68px);

  line-height: 1;

  text-align: center;

  margin-top: 0;
  margin-bottom: 35px;

  letter-spacing: 1px;

  word-spacing: 0;
}

/*
   Makes sure the special spaces used
   by the title don't become huge gaps.
*/

.call-title span {
  margin-left: 0;
  margin-right: 0;
}

/* =========================
   PHONE FORM
   ========================= */

.call-form {
  width: 100%;
  max-width: 520px;

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Phone number label */

.call-form label {
  font-family: "Times New Roman", Times, serif;

  font-size: 22px;

  font-weight: bold;

  color: white;

  margin-bottom: 8px;

  text-shadow:
    2px 2px 3px black,
    -1px -1px 2px black;
}

/* =========================
   PHONE NUMBER BOX
   ========================= */

.call-form input[type="tel"] {
  width: 100%;

  height: 58px;

  padding: 12px 16px;

  border: 3px solid #0066ff;

  border-radius: 8px;

  background: white;

  color: #000000;

  font-family: "Times New Roman", Times, serif;

  font-size: 22px;

  text-align: center;

  outline: none;

  box-shadow:
    0 3px 0 #000,
    0 5px 8px rgba(0, 0, 0, 0.5);
}

/* Placeholder */

.call-form input[type="tel"]::placeholder {
  color: #0066ff;

  opacity: 1;
}

/* Focus */

.call-form input[type="tel"]:focus {
  border-color: #0000ff;

  box-shadow:
    0 3px 0 #000,
    0 0 12px rgba(0, 102, 255, 0.7);
}


/* =========================
   CALL ME BUTTON
   ========================= */

.call-button {
  width: 100%;

  height: 64px;

  margin-top: 18px;

  border: 3px solid #0066ff;

  border-radius: 8px;

  background: white;

  color: #0066ff;

  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;

  font-size: 34px;

  font-weight: bold;

  letter-spacing: 1px;

  cursor: pointer;

  box-shadow:
    0 4px 0 #000,
    0 6px 10px rgba(0, 0, 0, 0.5);

  transition:
    transform 0.1s ease,
    background 0.1s ease;
}

.call-button:hover {
  background: #eeeeee;

  transform: scale(1.02);
}

.call-button:active {
  transform: translateY(4px);

  box-shadow:
    0 1px 0 #000;
}

.call-button:disabled {
  opacity: 0.5;

  cursor: wait;
}


/* =========================
   DISCLAIMER
   ========================= */

.disclaimer {
  max-width: 650px;

  margin-top: 30px;
  margin-bottom: 25px;

  color: white;

  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;

  font-size: clamp(16px, 2.5vw, 25px);

  font-weight: bold;

  line-height: 1.2;

  text-align: center;

  text-shadow:
    2px 2px 3px black,
    -1px -1px 2px black;
}


/* =========================
   CONSENT CHECKBOX
   ========================= */

.consent {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  padding: 10px 16px;

  background: white;

  border-radius: 6px;

  color: #000000;

  font-family: "Times New Roman", Times, serif;

  font-size: 18px;

  font-weight: bold;

  box-shadow:
    0 3px 0 #000,
    0 5px 8px rgba(0, 0, 0, 0.5);

  cursor: pointer;
}

.consent input {
  width: 20px;
  height: 20px;

  accent-color: #0066ff;

  cursor: pointer;
}


/* =========================
   STATUS MESSAGE
   ========================= */

.status {
  min-height: 24px;

  margin-top: 20px;

  font-family: "Times New Roman", Times, serif;

  font-size: 18px;

  font-weight: bold;

  color: white;

  text-shadow:
    2px 2px 3px black;
}

.status.success {
  color: #00ff00;
}

.status.error {
  color: #ff0000;
}


/* =========================
   BACK TO MAIN PAGE
   ========================= */

.back-link {
  display: inline-block;

  margin-top: 25px;

  color: white;

  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;

  font-size: 20px;

  font-weight: bold;

  text-decoration: none;

  text-shadow:
    2px 2px 3px black;

  transition: transform 0.15s ease;
}

.back-link:hover {
  transform: scale(1.05);
}


/* =========================
   CALL PAGE MOBILE
   ========================= */

@media (max-width: 650px) {

  .call-container {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .call-title {
    font-size: 40px;

    margin-bottom: 28px;
  }

  .call-form {
    max-width: 100%;
  }

  .call-form input[type="tel"] {
    height: 54px;

    font-size: 19px;
  }

  .call-button {
    height: 58px;

    font-size: 30px;
  }

  .disclaimer {
    font-size: 18px;
  }

  .consent {
    font-size: 16px;
  }
}