:root {
  --white: #f3ebe2;
  --orange: #ef946c;
  --blue: #454372;
}

* {
  box-sizing: border-box;
}

@keyframes gradient-shift {
  0% {
    background-position-y: 0;
  }
  25% {
    background-position-y: 20%;
  }
  50% {
    background-position-y: 0%;
  }
  75% {
    background-position-y: -10%;
  }
  100% {
    background-position-y: 0;
  }
}

html {
  background-image: linear-gradient(
    to bottom,
    var(--orange),
    var(--blue) 75vh,
    var(--blue) 150vh,
    var(--orange) 225vh
  );
  background-repeat: repeat-y;
  background-size: 100vw 250vh;
  animation: gradient-shift 30s infinite;
}

@font-face {
  font-family: "DM Sans";
  src: url("/DMSans-VariableFont_opsz_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  --outer-spacing: 72px;
  padding: var(--outer-spacing);
  @media screen and (width <= 1024px) {
    --outer-spacing: 48px;
  }
  @media screen and (width <= 640px) {
    --outer-spacing: 24px;
  }

  font-family: "DM Sans", sans-serif;
  color: var(--white);
  font-size: 1.5rem;
  font-weight: 200;
  letter-spacing: -2%;
  text-rendering: geometricPrecision;
}

#page-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  --page-border-width: 3px;
  border: var(--page-border-width) solid var(--white);
  border-bottom: none;
  padding: 1.5rem;
  padding-block-end: 3rem;
}

footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: calc(var(--page-border-width) * -1);
  width: calc(100% + var(--page-border-width) * 2);
  translate: 0 50%;
}

footer::before,
footer::after {
  content: "";
  display: block;
  height: var(--page-border-width);
  background-color: var(--white);
}

#footer-icons {
  padding-inline: 2.5rem;
  display: flex;
  align-items: center;
  column-gap: 2.25rem;

  .fb-icon {
    width: 0.8125rem;
    height: auto;
  }

  .insta-icon {
    width: 1.25rem;
    height: auto;
  }
}

header {
  flex: 2;
  margin-block-end: 1.5rem;
  display: flex;
  flex-direction: column;

  h1 {
    margin-block-start: auto;
    display: flex;
    justify-content: center;

    img {
      width: min(640px, 100%);
      max-width: 1200px;

      @media screen and (width <= 520px) {
        width: 100%;
        min-width: auto;
      }
    }
  }
}

main {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex: 3;
}

main p {
  text-align: center;
  margin: 0;
  line-height: 1.325;
}

#mission-statement {
  text-wrap: pretty;
}

#coming-soon {
  font-weight: 300;
  font-size: 5rem;
  margin-block: 3rem;
  line-height: 0.825;
}

#queer-owned {
  font-size: 1rem;
  margin-block-start: auto;
}