/* Healthy Water Goals splash page: deliberately plain, like a simple review page. */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #fff;
  color: #2b2b2b;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 19px;
  line-height: 1.45;
}

/* the page sits in a white "sheet" with thin lines left and right, like a printed page */
.box {
  max-width: 1120px;
  margin: 0 auto;
  background: #fff;
  border-left: 1px solid #cfcfcf;
  border-right: 1px solid #cfcfcf;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .3);
  padding-bottom: 28px;
}

.learn-more {
  display: inline-block;
  margin: 10px 0 0 18%;
  color: #551a8b;
  font-size: 22px;
  font-weight: bold;
  text-decoration: none;
}
.learn-more:hover { text-decoration: underline; }

.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 22px 16px 30px;
  text-align: center;
}


h1 {
  color: #1a5fa8;
  font-size: clamp(26px, 6vw, 36px);
  line-height: 1.2;
  font-weight: bold;
  margin-bottom: 14px;
}

/* picture that links to the presentation */
.video {
  position: relative;
  display: block;
  max-width: 700px;
  margin: 0 auto;
  border: 3px solid #333;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
  overflow: hidden;
}
.video img { display: block; width: 100%; height: auto; }

/* red rounded play button on top of the one that is part of the image */
.play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22%;
  height: 28%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  background: #e52d27;
  border-radius: 18% / 26%;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .4);
  transition: background .15s;
}
.play svg { width: 42%; height: 60%; margin-left: 4%; fill: #fff; }
.video:hover .play { background: #c41e18; }

.video-note {
  font-size: 16px;
  font-weight: 800;
  color: #111;
  margin-top: 6px;
}

.button {
  display: inline-block;
  margin-top: 28px;
  padding: 14px 40px;
  background: #ffe500;
  border: 1px solid #c9b400;
  border-radius: 3px;
  color: #222;
  font-size: 26px;
  font-weight: bold;
  text-decoration: none;
}
.button:hover { background: #ffd900; }
.button:focus-visible, .video:focus-visible { outline: 3px solid #1a5fa8; outline-offset: 3px; }

.disclosure {
  font-size: 13px;
  color: #555;
  margin: 8px auto 0;
  max-width: 460px;
}

.copy { margin-top: 34px; }
.copy p { margin-bottom: 22px; }
sup { font-size: 11px; line-height: 0; color: #555; }

.footer {
  max-width: 1000px;
  margin: 40px auto 0;
  padding: 30px 16px 40px;
  text-align: center;
  font-size: 13px;
  color: #444;
}
.footer p { margin-top: 16px; }
.footer a { color: #0645ad; }
.footer-links a { display: inline-block; margin: 0 6px; font-size: 14px; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.sources a { color: #444; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

@media (max-width: 480px) {
  body { font-size: 18px; }
  .button { display: block; padding: 14px 16px; font-size: 23px; }
}

@media (max-width: 480px) {
  .learn-more { margin-left: 16px; font-size: 20px; }
}