/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
body { -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* Custom styles */
body {
  font-family: sans-serif;
  line-height: 1.6;
  letter-spacing: 0.05rem;
  background: hsl(200, 90%, 75%);
  color: hsl(200, 40%, 10%);
}
h1 {
  margin: 1.5rem 1rem;
  line-height: 1.2;
}
h2 {
  margin: 1rem 1rem;
  font-size: 2rem;
  line-height: 1.4;
}
h3 {
  margin: .5rem 1rem;
}
p {
  margin: .5rem 1rem;
  font-size: 1.25rem;
}
a {
  text-decoration: none;
  color: hsl(200, 100%, 45%);
  transition: opacity .3s;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  a:hover {
    opacity: .666;
  }
}
img.logo-horizontal {
  height: 6rem;
  width: 12rem;
}
img.download-app {
  height: 4rem;
  border-radius: 1rem;
}
img.download-app.app-store   { width: 11.9664rem; }
img.download-app.google-play { width: 13.4872301397rem; }
/* Font sizes */
h1 { font-size: 3rem; }
h2 { font-size: 2rem; }
@media (max-width: 800px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.5rem; }
}

/* Base */
div#page {
  width: 100%;
  min-height: 100vh;
  background: white;
}
section {
  width: 100%;
  display: flex;
}
section.hero {
  min-height: 100vh;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(to bottom, hsl(200, 90%, 75%), hsl(200, 90%, 95%));
  overflow: hidden;
}
section.hero header {
  display: flex;
}
section.hero header img {
  margin: .25rem 1rem;
}
section.hero div.text-wrapper {
  z-index: 1;
  margin: 4vh 0 auto 0;
  display: flex;
  flex-direction: column;
  text-align: center;
}
section.hero div.text-wrapper div.download-wrapper {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
}

/* PAGE OVERRIDES */

/* legal.html + support.html */
body.legal-page section.hero,
body.support-page section.hero {
  min-height: 50vh;
}

/* fact.html */
body.fact-page section.hero div.text-wrapper {
  margin: auto 0;
  align-items: center;
}
body.fact-page section.hero div.text-wrapper div.download-wrapper {
  margin: calc(3vh + 1.5vw) 0;
}

/* MODULES */

/* Fact card deck */
div.fact-card-deck {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
div.fact-card-deck div.image-wrapper {
  display: flex;
  justify-content: center;
  gap: calc(2vh + 1vw);
  transform: rotate(-11.25deg);
}
div.fact-card-deck div.image-wrapper a {
  display: block;
  width: calc(16vh + 8vw);
  height: calc((16vh + 8vw) * 16 / 9);
  max-height: 40rem;
  max-width: 22.5rem;
  transition: transform .3s;
  transform-origin: center bottom;
}
@media (hover: hover) and (pointer: fine) {
  div.fact-card-deck div.image-wrapper a:hover {
    opacity: 1;
    transform: scale(1.05);
  }
}
div.fact-card-deck div.image-wrapper a img {
  width: 100%;
  height: 100%;
  border-radius: calc(2vh + 1vw);
  transform: translateX(-12rem) scale(1.2) rotate(11.25deg);
  opacity: 0;
  animation: animate-in-hero-image .6s forwards;
}
div.fact-card-deck div.image-wrapper a:nth-child(1) img { animation-delay: .1s; }
div.fact-card-deck div.image-wrapper a:nth-child(2) img { animation-delay: .2s; }
div.fact-card-deck div.image-wrapper a:nth-child(3) img { animation-delay: .3s; }
div.fact-card-deck div.image-wrapper a:nth-child(4) img { animation-delay: .4s; }
div.fact-card-deck div.image-wrapper a:nth-child(5) img { animation-delay: .5s; }
div.fact-card-deck div.image-wrapper a:nth-child(6) img { animation-delay: .6s; }
div.fact-card-deck div.image-wrapper a:nth-child(7) img { animation-delay: .7s; }
@keyframes animate-in-hero-image {
  to { opacity: 1; transform: none; }
}

/* Feature cards */
section.feature-card {
  height: 66vh;
  width: calc(100vw - (2vh + 1vw) * 2);
  max-width: 64rem;
  margin: calc(2vh + 1vw) auto;
  border-radius: calc(2vh + 1vw);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
section.feature-card div.text-wrapper {
  flex: 1;
  max-width: 24rem;
  margin-left: calc(4vh + 2vw);
}
section.feature-card img {
  align-self: flex-start;
  width: calc((100vw - (2vh + 1vw) * 2) / 2);
  max-width: calc(50vh - (2vh + 1vw) * 2);
  margin-top: calc(2vh + 1vw);
}
section.feature-card.discover { background-color: hsl(0,   85%, 70%); }
section.feature-card.collect  { background-color: hsl(300, 65%, 65%); }
section.feature-card.compete  { background-color: hsl(200, 95%, 65%); }
@media (max-width: 800px) {
  section.feature-card {
    flex-direction: column;
    justify-content: flex-start;
  }
  section.feature-card div.text-wrapper {
    margin: calc(2vh + 1vw);
  }
  section.feature-card img {
    width: 66vw;
    max-width: none;
    margin-top: 0;
    align-self: center;
  }
}

/* Text sections */
section.text {
  min-height: 50vh;
  justify-content: center;
  align-items: center;
}
section.text div.text-wrapper {
  flex: 1;
  max-width: 48rem;
  margin: calc(2vh + 1vw);
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Fact cards */
div.fact-card-wrapper {
  width: calc(100vw - (8vh + 4vw));
  height: calc((100vw - (8vh + 4vw)) / 9 * 16);
  max-width: 24rem;
  max-height: calc(24rem / 9 * 16);
  border-radius: calc(24rem * .1);
  background-color: hsla(0, 0%, 0%, .1);
  animation: wiggle 4s 1.6s infinite;
}
@keyframes wiggle {
  20% { transform: none; }
  22% { transform: rotate(-.5deg); }
  24% { transform: rotate(1deg); }
  26% { transform: rotate(-1deg); }
  28% { transform: rotate(.5deg); }
  30% { transform: none; }
}
div.fact-card-wrapper a {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform .3s;
  transform-origin: center bottom;
}
@media (hover: hover) and (pointer: fine) {
  div.fact-card-wrapper a:hover {
    opacity: 1;
    transform: scale(1.05);
  }
}
div.fact-card-wrapper a img {
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: calc(24rem * .1);
  transform: translateX(-12rem) scale(1.2) rotate(11.25deg);
  animation: animate-in-fact-card .8s .8s forwards;
  box-shadow: 0 1rem 3rem hsla(0, 0%, 0%, .333);
  pointer-events: none;
}
@keyframes animate-in-fact-card {
  to { opacity: 1; transform: none; }
}

/* App footer */
footer.app-footer {
  display: flex;
  justify-content: center;
  background-color: hsl(200, 10%, 90%);
}
footer.app-footer div.footer-wrapper {
  flex: 1;
  max-width: 64rem;
  display: flex;
  justify-content: space-around;
  padding: calc(2vh + 1vw) 0;
}
footer.app-footer div.footer-wrapper ul {
  list-style: none;
  padding: 0 calc(2vh + 1vw);
}
footer.app-footer div.footer-wrapper ul li {
  margin: .5rem 0;
}
footer.app-footer div.footer-wrapper ul li a {
  color: currentColor;
}
footer.app-footer div.footer-wrapper ul li:first-child {
  text-transform: uppercase;
  opacity: .25;
}
@media (max-width: 800px) {
  footer.app-footer div.footer-wrapper {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  footer.app-footer div.footer-wrapper > a {
    order: 1;
  }
}