[data-animate] {
  opacity: 0;
}
[data-animate].visible {
  opacity: 1;
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-animate].stars.visible {
  transition-delay: 0.2s;
}
[data-animate].footer-flower.visible {
  transition-delay: 0.3s;
}
[data-animate].cloud-svg {
  transition-delay: 0.6s;
}

[data-animate=slideUp] {
  transform: translateY(30%);
}
[data-animate=slideUp].visible {
  transform: none;
}

[data-animate=scaleUp] {
  transform: scale(0.7);
}
[data-animate=scaleUp].visible {
  transform: none;
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  background-color: #fffbf8;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  max-width: 100vw;
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-direction: column;
  position: relative;
  /* prevent transformed/absolutely positioned children creating horizontal scroll */
  -webkit-overflow-scrolling: touch;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
}

/* Set core body defaults */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 14ex;
}

main {
  flex: 1 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  max-width: 1400px;
  width: 100%;
  max-width: 100vw;
  max-height: 100vh;
  padding: 0.5rem;
  margin-inline: auto;
}

.text-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 4px solid #a47cf2;
  transition: border-bottom-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.text-link:hover, .text-link:focus {
  border-bottom-color: #1d2372;
}

@font-face {
  font-family: "Flowers of Nineties";
  font-display: swap;
  src: url("../../assets/fonts/flowers-of-nineties-bold.woff2") format("woff2"), url("./../assets/fonts/flowers-of-nineties-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Urbanist";
  font-display: swap;
  src: url("../../assets/fonts/subset-Urbanist-Regular.woff2") format("woff2"), url("../../assets/fonts/subset-Urbanist-Regular.woff") format("woff");
  font-weight: 300 700;
  font-style: normal;
}
@font-face {
  font-family: "Urbanist";
  font-display: swap;
  src: url("../../assets/fonts/subset-Urbanist-Italic.woff2") format("woff2"), url("../../assets/fonts/subset-Urbanist-Italic.woff") format("woff");
  font-weight: 300 700;
  font-style: italic;
}
h1,
h2,
h3,
h4 {
  font-family: "Flowers of Nineties", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
}

html {
  font-family: "Urbanist", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
}

.font-xl {
  font-size: clamp(3rem, 1.2vw + 2.76rem, 3.81rem);
  line-height: clamp(1.6363636364rem, 0vw + 1.64rem, 1.6363636364rem);
}

h1,
.heading-1 {
  font-size: clamp(1.94rem, 1.57vw + 1.62rem, 3rem);
  line-height: clamp(1.6363636364rem, 0vw + 1.64rem, 1.6363636364rem);
}

h2,
.heading-2 {
  font-size: clamp(1.56rem, 0.56vw + 1.45rem, 1.94rem);
  line-height: clamp(1.6363636364rem, 0vw + 1.64rem, 1.6363636364rem);
}

h3,
.heading-3 {
  font-size: clamp(1.25rem, 0.46vw + 1.16rem, 1.56rem);
  line-height: clamp(1.6363636364rem, 0vw + 1.64rem, 1.6363636364rem);
}

h4,
.heading-4 {
  font-size: clamp(1.25rem, 0.46vw + 1.16rem, 1.56rem);
  line-height: clamp(1.6363636364rem, 0vw + 1.64rem, 1.6363636364rem);
}

h5,
.heading-5,
.signup-label {
  font-size: clamp(1.13rem, 0.37vw + 1.05rem, 1.38rem);
  line-height: clamp(1.6363636364rem, 0vw + 1.64rem, 1.6363636364rem);
}

h6,
p {
  font-size: clamp(1rem, 0vw + 1rem, 1rem);
  line-height: clamp(1.6363636364rem, 0vw + 1.64rem, 1.6363636364rem);
}

.logo {
  width: min(100%, 15rem);
  height: auto;
  margin-inline: auto;
}
@media (max-width: 500px) {
  .logo {
    width: 45%;
  }
}

.cloud {
  width: 60%;
  height: 80%;
}
@media (max-width: 1000px) {
  .cloud {
    width: 80%;
  }
}
@media (max-width: 600px) {
  .cloud {
    width: 100%;
  }
}

.cloud-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px 60px;
  color: #1d2372;
  text-align: center;
}
@media (max-width: 700px) {
  .cloud-inner {
    padding: 0 20px;
  }
}

.cloud-svg {
  display: block;
  width: 100%;
  height: auto;
  padding-bottom: 4rem;
  overflow: visible;
}
@media (max-width: 500px) {
  .cloud-svg {
    padding-bottom: 6rem;
  }
}

.cloud-background {
  transform-box: fill-box;
  transform-origin: center;
}
@media (max-width: 700px) {
  .cloud-background {
    transform: scale(1.15);
  }
}

.cloud-shadow {
  fill: #ffc7eb;
}

.cloud-shape {
  fill: #fffbf8;
  stroke: #1d2372;
  stroke-width: 8;
  stroke-linejoin: round;
}

.cloud-content {
  overflow: visible;
}

.cloud-inner h1 {
  margin: 0;
}
@media (max-width: 700px) {
  .cloud-inner h1 {
    font-size: 3.5rem;
    line-height: 1.25;
  }
}

.cloud-wave {
  display: block;
  width: 100px;
  height: 20px;
  margin: 30px 0 25px;
}

.cloud-inner p {
  margin: 0;
}
@media (max-width: 1000px) {
  .cloud-inner p {
    font-size: 1.5rem;
    line-height: 1.25;
  }
}
@media (max-width: 700px) {
  .cloud-inner p {
    font-size: 2.5rem;
    line-height: 1.25;
  }
}

footer {
  flex-shrink: 0;
  position: relative;
  overflow: visible;
}
footer .footer-wave {
  position: absolute;
  top: -6rem;
  width: 100%;
  height: 110px;
}
@media (max-width: 800px) {
  footer .footer-wave {
    height: 70px;
    top: -4rem;
  }
}

.footer-inner {
  position: relative;
  background-color: #c1f4d0;
  overflow: hidden;
  padding: 2rem;
}
@media (max-width: 1000px) {
  .footer-inner {
    padding-top: 0.5rem;
  }
}

.signup-section {
  max-width: 600px;
  margin: 2rem auto 0 auto;
  text-align: center;
}
@media (max-width: 500px) {
  .signup-section {
    margin-top: 0.5rem;
  }
}

.signup-label {
  font-family: "Flowers of Nineties", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  display: block;
  margin-bottom: 1rem;
  font-weight: 700;
  color: #1d2372;
}

.signup-form {
  display: flex;
  align-items: stretch;
  background: #fffbf8;
  border: 4px solid #1d2372;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 8px 8px 0 #ffc7eb;
}

.signup-form input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  color: #1d2372;
  outline: none;
  align-self: stretch;
  height: auto;
}

.signup-form input::placeholder {
  color: rgba(29, 35, 114, 0.85);
}

.signup-form button {
  border: none;
  outline: none;
  background: #1d2372;
  color: #fffbf8;
  font-weight: 700;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s ease;
  align-self: stretch;
}
@media (max-width: 380px) {
  .signup-form button {
    padding-inline: 0.5rem;
  }
}
.signup-form button .button-icon {
  display: none;
  visibility: hidden;
}
@media (max-width: 435px) {
  .signup-form button .button-text {
    display: none;
    visibility: hidden;
  }
  .signup-form button .button-icon {
    display: block;
    visibility: visible;
  }
}

.signup-form button svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

.signup-form button:hover {
  background: #ffc7eb;
  color: #1d2372;
}

.signup-form button:active {
  transform: scale(0.98);
}

.after-message {
  color: #1d2372;
  font-style: italic;
}

.footer-icons {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1.25rem;
}
.footer-icons a:hover svg circle, .footer-icons a:focus svg circle {
  fill: #1d2372;
}
.footer-icons svg circle {
  transition: fill 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-flower {
  position: absolute;
  top: -13rem;
  width: min(50%, 225px);
  z-index: 100;
}
@media (max-width: 1000px) {
  .footer-flower {
    width: 160px;
    top: -11rem;
  }
}
@media (max-width: 800px) {
  .footer-flower {
    width: 120px;
    top: -8rem;
  }
}
@media (max-width: 550px) {
  .footer-flower {
    width: 100px;
    top: -7rem;
  }
}
@media (max-width: 400px) {
  .footer-flower {
    width: 80px;
    top: -5rem;
  }
}

.purple-flower {
  left: 1rem;
}

.pink-flower {
  right: 1rem;
}

.wavey-lines {
  position: absolute;
  bottom: -1.75rem;
}
@media (max-width: 700px) {
  .wavey-lines {
    display: none;
    visibility: hidden;
  }
}
.wavey-lines.line-left {
  left: -3.95rem;
  rotate: -140deg;
  width: min(100%, 250px);
}
.wavey-lines.line-right {
  right: -2.55rem;
  rotate: -40deg;
  width: min(100%, 225px);
}

.stars {
  position: absolute;
  left: 4rem;
  top: 3rem;
  width: min(100%, 150px);
  height: auto;
}
@media (max-width: 750px) {
  .stars {
    width: 100px;
    left: 2rem;
  }
}
@media (max-width: 500px) {
  .stars {
    width: 80px;
  }
}

.corner-cloud {
  position: absolute;
  width: min(100%, 250px);
  height: auto;
}
.corner-cloud.right {
  top: -8rem;
  right: -5rem;
  rotate: 130deg;
}
@media (max-width: 570px) {
  .corner-cloud.right {
    right: -9rem;
  }
}
.corner-cloud.left {
  rotate: 58deg;
  top: -11rem;
  left: -7rem;
}

.single-star {
  position: absolute;
  top: 2rem;
  right: 9rem;
  width: min(100%, 125px);
  height: auto;
}
@media (max-width: 1000px) {
  .single-star {
    width: 80px;
    right: 10rem;
  }
}
@media (max-width: 750px) {
  .single-star {
    display: none;
    visibility: hidden;
  }
}

/*# sourceMappingURL=main.css.map */