@charset "UTF-8";
:root {
  --blue:#003c79;
  --red:red;
  --yellow:#eec307;
  --dred:darken(var(--red),15%);
  --font:'panno-text', 'Arial Narrow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --montserrat:'montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --nickel:'nickel-gothic-variable', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

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

body {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font: 400 20px var(--font);
  background: white;
}

img {
  max-width: 100%;
}

a, button {
  border-radius: 0;
  cursor: pointer;
}

button {
  all: unset;
  cursor: pointer;
  padding: 0.5em 1em;
  background: var(--blue);
  color: white;
  border-radius: 0;
  font-family: inherit;
}

sup {
  line-height: 1em;
  vertical-align: super;
  display: inline-block;
  position: static;
}

input {
  border-radius: 0;
}

iframe {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

* ::-moz-selection {
  color: #fff;
  background-color: var(--red);
}
* ::-moz-selection * {
  color: #fff;
}
* ::-moz-selection {
  color: #fff;
  background-color: var(--red);
}
* ::selection {
  color: #fff;
  background-color: var(--red);
}
* ::-moz-selection * {
  color: #fff;
}
* ::selection * {
  color: #fff;
}

.container {
  max-width: 1200px;
}

.top {
  padding: clamp(35px, 3.90625vw, 50px) 15px;
  background: var(--blue);
}
.top img {
  display: block;
  max-width: 960px;
  margin: 0 auto 30px auto;
  filter:drop-shadow(3px 3px 4px rgba(0,0,0,0.3));
}

.cta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(35px, 3.90625vw, 50px);
  color: white;
}
.cta div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.cta div span {
  font: 900 20px var(--montserrat);
  text-transform: uppercase;
  display: inline-block;
}
.cta div a {
  text-decoration: none;
  outline: none;
  transition: color 0.3s;
  color: white;
  font-size: 26px;
}
.cta div a:hover {
  color: var(--yellow);
}
.cta .donate {
  background: #52a0f0;
  color: white;
  text-decoration: none;
  display: inline-block;
  padding: 10px clamp(35px, 3.90625vw, 50px);
  border-radius: 0;
  outline: none;
  font: 900 20px var(--montserrat);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
  transition: background 0.3s;
}
.cta .donate:hover {
  background: var(--yellow);
}

.intro {
  background: #002245;
  padding: clamp(35px, 3.90625vw, 50px) 15px;
  text-align: center;
}
.intro h1 {
  color: white;
  font: 900 clamp(25.9px, 2.890625vw, 37px)/1.1em var(--montserrat);
  margin: 0 auto 1.5em auto;
  text-transform: uppercase;
  text-align: center;
}
.intro h1 strong {
  display: block;
  font-variation-settings: "slnt" -15, "wdth" 100;
  font: italic 400 clamp(35px, 3.90625vw, 50px)/1.1em var(--nickel);
  color: var(--yellow);
  text-transform: none;
}
.intro ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: clamp(21px, 2.34375vw, 30px);
  line-height: 1em;
  color: white;
  max-width: 550px;
  display: inline-block;
  text-align: left;
}
.intro ul li {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
  padding-left: clamp(28px, 3.125vw, 40px);
}
.intro ul li::before {
  content: "★";
  margin-top: 0.05em;
  color: var(--yellow);
  font-size: clamp(28px, 3.125vw, 40px);
  display: inline-block;
  width: clamp(35px, 3.90625vw, 50px);
  margin-left: clamp(-50px, -3.90625vw, -35px);
  text-align: left;
}
.intro ul li span {
  flex: 1;
}
.intro ul li:not(:last-child) {
  margin-bottom: 1em;
}

.meet {
  background: white url(jacksonville.jpg) right bottom/100% no-repeat;
  padding: clamp(35px, 3.90625vw, 50px) 15px;
}
.meet .wrap {
  max-width: clamp(476px, 53.125vw, 680px);
  margin: auto;
}
.meet h2 {
  font: italic 400 clamp(35px, 3.90625vw, 50px)/1.1em var(--nickel);
  color: var(--blue);
  margin-bottom: 1em;
  text-align: center;
}
.meet img {
  display: block;
  margin: auto;
}

footer {
  background: var(--blue);
  padding: clamp(35px, 3.90625vw, 50px) 15px;
}
footer hr {
  height: 2px;
  margin: clamp(28px, 3.125vw, 40px) auto;
  max-width: clamp(350px, 39.0625vw, 500px);
  background: linear-gradient(to right, transparent, #52a0f0, transparent);
  border: none;
}
footer h2 {
  font: 900 clamp(17.5px, 1.953125vw, 25px) var(--montserrat);
  color: #52a0f0;
  text-align: center;
  margin: 0 0 1em 0;
}
footer form {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 1.5625vw, 20px);
  max-width: clamp(560px, 62.5vw, 800px);
  margin: 0 auto clamp(42px, 4.6875vw, 60px) auto;
  flex-wrap: wrap;
}
footer form input {
  border: none;
  outline: none;
  text-decoration: none;
  background: white;
  color: black;
  font: 400 20px/1em var(--font);
  padding: 10px;
}
footer form input::-moz-placeholder {
  color: #959595;
}
footer form input::placeholder {
  color: #959595;
}
footer form button {
  padding: 10px clamp(21px, 2.34375vw, 30px);
  background: var(--yellow);
  color: black;
  text-transform: uppercase;
}
footer p {
  color: #3687d9;
  margin: 0;
  text-align: center;
  font-size: 17px;
}

@media(max-width:599px){
  footer form, footer .cta{
    flex-direction: column;
  }
  .intro h1 strong{
    font-size:30px;
  }
  .meet{
    background: white url(jacksonville.jpg) right bottom/1800px no-repeat;
  }
}