/* Properties are sorted as: Box Model > Typography > Visual */

/* Font Face */
@font-face {
  font-family: "Buycat";
  src: url("fonts/buycat.otf");
}

/* Root Variables */
:root {
  --max-vw: 1280px;
}

/* Base Styles */
body {
  /* Typography */
  font-family: "Buycat";
  font-size: min(4vw, calc(var(--max-vw) * 0.04));
  text-align: center;
  /* Visual */
  background-color: skyblue;
  color: white;
  -webkit-text-stroke-color: black;
  -webkit-text-stroke-width: min(0.02em, calc(var(--max-vw) * 0.04) * 0.02);
}

a {
  /* Typography */
  text-decoration: none;
}

a:link {
  /* Visual */
  color: cornflowerblue;
}

a:visited {
  /* Visual */
  color: plum;
}

h2 {
  /* Typography */
  font-size: min(3vw, calc(var(--max-vw) * 0.03)) !important;
  text-align: center;
  /* Visual */
  -webkit-text-stroke-width: min(0.01em, calc(var(--max-vw) * 0.03) * 0.01);
}

li::marker {
  /* Visual */
  color: cornflowerblue;
}

p {
  /* Box Model */
  margin: 0 auto;
  width: min(90vw, calc(var(--max-vw) * 0.9));
}

ul {
  /* Box Model */
  margin: 0 auto;
  /* Typography */
  text-align: left;
  width: min(90vw, calc(var(--max-vw) * 0.9));
}

/* Layout */
header img {
  /* Box Model */
  margin: 0 auto;
  width: min(50vw, calc(var(--max-vw) * 0.5));
}

main {
  /* Typography */
  font-size: min(3vw, calc(var(--max-vw) * 0.03));
}

main img[src$=".gif"] {
  /* Box Model */
  margin: 0 auto;
  width: min(75vw, calc(var(--max-vw) * 0.75));
}

main img:not([src$=".gif"]) {
  /* Box Model */
  margin: 0 auto;
  width: min(50vw, calc(var(--max-vw) * 0.5));
  /* Visual */
  border-radius: min(2vw, calc(var(--max-vw) * 0.02));
  box-shadow: 0 0 0 min(0.2vw, calc(var(--max-vw) * 0.002)) black;
}

footer img {
  /* Box Model */
  width: min(10vw, calc(var(--max-vw) * 0.1));
}

/* Components */
#mc_embed_signup {
  /* Box Model */
  margin: 0 auto;
  padding: min(1vw, calc(var(--max-vw) * 0.01));
  width: min(50vw, calc(var(--max-vw) * 0.5));
  /* Typography */
  font-size: min(3vw, calc(var(--max-vw) * 0.03));
  /* Visual */
  background: lightcoral;
  box-shadow: 0 0 0 min(0.1vw, calc(var(--max-vw) * 0.001)) black;
  -webkit-text-stroke-width: 0;
}

#mc-embedded-subscribe {
  /* Typography */
  font-family: "Buycat";
  font-size: min(2vw, calc(var(--max-vw) * 0.02)) !important;
}

#mce-EMAIL {
  /* Visual */
  box-shadow: 0 0 0 min(0.1vw, calc(var(--max-vw) * 0.001)) black;
}