:root {
  --bg-color: #fee7a6;

  --light-color1: #d8cfc6;
  --light-color2: #e9ddaf;

  --dark-color1: #004447;

  --logo-size: clamp(150px, 30vw, 200px);
}

html {
  box-sizing: border-box;
  background: var(--bg-color);
  font-family: sans-serif;
  justify-content: center;
  color: var(--dark-color1);
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
  max-width: 820px;
  margin: 0 auto;
  padding:10px;
  margin-bottom: 0;
}

heading {
  background: url("../img/illustration.png") no-repeat;
  background-size: cover;
  aspect-ratio: 960 / 1202;
  display: block;
  text-align: center;
}

heading h4 {
  background: url("../img/logo.png") no-repeat;
  background-size: cover;
  display: block;
  width: 20%;
  aspect-ratio: 202 / 156;
  margin-left:2%;
}

h1, h2, h3, h4, h5, h6,
.caps {
  text-transform: uppercase;
}

section h2,
section p,
section li {
  font-size: clamp(10px, 2vw, 22px);
  font-weight: bold;
}
.bloat {
  display: flex;
  flex-direction: row;
}
.bloat * {
  list-style-type: none;
  margin: 10px;
  padding: 0;
}
.bloat li, .bloat time {
  margin: 0;
}


heading h2 {
  font-size: clamp(10px, 5vw, 40px);
  margin: 0;
}

.flex {
  display: flex;
}
.flex h3 {
  flex-grow: 1;
  margin: 0 20px;
}
.flex :first-child {
  text-align: left;
}
.flex :last-child {
  text-align: right;
}


heading h3 {
  font-size: clamp(10px, 3.5vw, 28px);
  margin: 0;
}

heading h1 {
  font-size: clamp(20px, 12vw, 100px);
  color: #fff;
  line-height: 0.8em;
  margin: 10px;
}
heading h1 span {
  font-size: 0.7em;
}

.bloat blockquote,
.bloat address {
  margin: 0
}
blockquote p {
  font-style: italic;
  font-weight: normal;
}

footer {
  background: var(--dark-color1);
  color: var(--light-color1);
  padding: 1em;
}
footer a,
footer a:visited {
  color: var(--light-color1);
  text-decoration: underline;
}

.facebook {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5em;
}
.facebook svg {
  width: 32px;
  height: 32px;
  background: #3A5795;
  fill: #fff;
  border: 1px solid transparent;
          border-radius: 4px; /* future proofing */
     -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
   -khtml-border-radius: 4px; /* for old Konqueror browsers */
}
.facebook svg:hover {
  fill: #eeeeee;
  border-color: #ffffff;
}

#mc_embed_signup{
}
/* real people should not fill this in and expect good things - do not
   remove this or risk form bot signups */
#mc_embed_signup div {
  position: absolute;
  left: -5000px;
}