/* poppins-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/poppins-v21-latin-regular.woff2")
    format(
      "woff2"
    ); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* pacifico-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Pacifico";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/pacifico-v22-latin-regular.woff2")
    format(
      "woff2"
    ); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* love-ya-like-a-sister-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Love Ya Like A Sister";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/love-ya-like-a-sister-v22-latin-regular.woff2")
    format(
      "woff2"
    ); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* kranky-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Kranky";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/kranky-v28-latin-regular.woff2")
    format(
      "woff2"
    ); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* mystery-quest-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Mystery Quest";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/mystery-quest-v20-latin-regular.woff2")
    format(
      "woff2"
    ); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

.welcome {
  margin-block: 1em;
}
.welcome span {
  margin: 0 auto;
  margin-left: 0.3em;
  display: inline-block;
  position: relative;
}
.shape:before {
  content: "";
  position: absolute;
  top: -0.2em;
  left: -0.2em;
  width: 100%;
  height: 100%;
  padding: 0.2em;
  z-index: -1;
}

.shape-1 {
  font-family: "DynaPuff", sans-serif;
  color: #ffc863;
}
.shape-1::before {
  background: #332929;
  clip-path: polygon(15% 5%, 85% 10%, 95% 85%, 10% 95%);
}
.shape-2 {
  font-style: italic;
  font-family: "Playfair Display", serif;
  color: #023020;
  text-shadow: 0.02em 0.02em 0 #a52a2a, 0.03em 0.03em 0 #a52a2a;
}
.shape-2::before {
  background: #f5deb3;
}
.shape-3 {
  font-family: "Satisfy", cursive;
  font-weight: 400;
  font-style: normal;
  color: #ffeef2;
}
.shape-3::before {
  background: #ac2142;
  clip-path: polygon(20% 0%, 99% 0, 100% 100%, 0% 100%);
}
.shape-4 {
  font-family: "Love Ya Like A Sister", cursive;
  color: #22232e;
}
.shape-4::before {
  background-image: radial-gradient(
    rgba(0, 194, 203, 0.7) 3px,
    transparent 3px
  );
  background-color: #e0ffff;
  background-size: 10px 10px;
  clip-path: polygon(20% 0%, 99% 0, 100% 100%, 0% 100%);
}
.shape-5 {
  font-family: "Poppins", serif;
  color: #00c2cb;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 0.07em rgb(255, 116, 195);
}
.shape-5::before {
  background: rgb(249, 255, 195);
  clip-path: polygon(0 24%, 100% 20%, 100% 86%, 0 82%);
}

.shape-6 {
  font-family: "Kranky", serif;
  color: #073b4c;
}
.shape-6::before {
  background: #8effe1;
  clip-path: polygon(5% 15%, 95% 5%, 90% 90%, 10% 95%);
}
.shape-7 {
  font-family: "Mystery Quest", serif;
  color: #fff644;
}
.shape-7::before {
  background-image: radial-gradient(rgba(171, 192, 255) 1px, transparent 3px);
  background-color: #486dbd;
  background-size: 10px 10px;
  clip-path: polygon(10% 10%, 90% 5%, 95% 90%, 5% 85%);
}

.welcome_container {
  margin: auto;

  text-align: center;
  font-size: 4em;
}

.sprouts {
  color: #ef476f;
}

.sign-in-button {
  font-size: 0.5em;

  padding: 1em;
  text-decoration: none;
  margin-top: 1em;

  display: inline-block;
  position: relative;
}

/* Media queries to make it nice and responsive for mobile devices */
@media (max-width: 768px) {
  .welcome_container {
    font-size: 3em;
  }
}

@media (max-width: 360px) {
  .welcome_container {
    font-size: 2em;
  }
}