/* Based on https://www.joshwcomeau.com/css/custom-css-reset/ */
*,
*::after,
*::before {
  box-sizing: border-box;
}

* {
  margin: 0;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

/* reset end */
:root {
  --color-background-note: hsl(248, 33%, 49%);
  --color-background-btn: hsl(154, 59%, 51%);
  --color-background-btn-hover: hsl(154, 65%, 68%);
  --color-background-card: hsl(0, 0%, 100%);
  --color-border-input: hsl(0, 0%, 87%);
  --color-text-main: hsl(0, 0%, 100%);
  --color-text-input-placeholder: hsla(248, 9%, 26%, 0.75);
  --color-text-input: hsl(248, 9%, 26%);
  --color-text-accent: hsl(0, 100%, 74%);
  --color-text-terms: hsl(247, 25%, 77%);
  --box-shadow-note: 0 8px 0 0 hsla(0, 0%, 0%, 0.15);
  --box-shadow-btn: inset 0 -4px 0 0 hsla(0, 0%, 0%, 0.09);
  font-family: "Poppins", serif;
  font-weight: 400;
}

body {
  background-image: url("../assets/images/bg-intro-desktop.png");
  background-position-x: 14px;
  background-color: var(--color-text-accent);
  display: flex;
  align-items: center;
  padding: clamp(4.8125rem, -2.7989821883vw + 6.1560114504rem, 5.5rem) clamp(1.5rem, 22.8571428571vw + -3.8571428571rem, 3rem);
  min-height: 100dvh;
  color: var(--color-text-main);
}

.text-bold {
  font-weight: 700;
}

.text-accent {
  color: var(--color-text-accent);
}

.container {
  margin-bottom: 4rem;
}

.title {
  margin-bottom: clamp(1.5rem, 0.7511737089vw + 1.323943662rem, 2rem);
  font-size: clamp(1.75rem, 2.0657276995vw + 1.2658450704rem, 3.125rem);
  font-weight: 700;
  line-height: clamp(2.25rem, 1.7840375587vw + 1.8318661972rem, 3.4375rem);
  letter-spacing: -0.01875rem;
  text-align: center;
}

.description {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.625;
  text-align: center;
}

.sign-up {
  width: 100%;
}

.card {
  background-color: var(--color-background-card);
  border-radius: 0.625rem;
  box-shadow: var(--box-shadow-note);
  padding: clamp(1.5rem, 1.5023474178vw + 1.1478873239rem, 2.5rem);
}
.card__terms-and-services {
  padding: 0 0.9375rem;
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: clamp(1.3125rem, 0.4694835681vw + 1.2024647887rem, 1.625rem);
  text-align: center;
  color: var(--color-text-terms);
}

.trial-note {
  background-color: var(--color-background-note);
  border-radius: 0.625rem;
  box-shadow: var(--box-shadow-note);
  padding: 1.13em 20%;
  margin-bottom: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  letter-spacing: 0.01875rem;
  text-align: center;
}

.btn {
  background-color: var(--color-background-btn);
  border-radius: 0.3125rem;
  border: none;
  box-shadow: var(--box-shadow-btn);
  transition: background-color 250ms ease-in;
  padding: 1em;
  font-size: 0.9375rem;
  line-height: 1.7;
  font-weight: 600;
  letter-spacing: 0.0625rem;
  color: inherit;
  text-transform: uppercase;
}
.btn:hover {
  cursor: pointer;
  background-color: var(--color-background-btn-hover);
}

.sign-up-form ul.form-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 0.3755868545vw + 0.911971831rem, 1.25rem);
  padding: 0;
}
.sign-up-form ul.form-list > li.form-list-item {
  display: flex;
  flex-direction: column;
  position: relative;
}
.sign-up-form .form-item {
  border-radius: 0.3125rem;
  border: 0.0625rem solid var(--color-border-input);
  padding: 1em clamp(1.25rem, 1.1267605634vw + 0.985915493rem, 2rem);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.85;
  letter-spacing: 0.015625rem;
  color: var(--color-text-input);
}
.sign-up-form .form-item:focus-visible {
  outline: 0.0625rem solid var(--color-background-note);
}
.sign-up-form .invalid {
  outline: 0.125rem solid var(--color-text-accent);
  color: var(--color-text-accent);
}
.sign-up-form .invalid + .validation-message::before {
  content: url("../assets/images/icon-error.svg");
  display: block;
  position: absolute;
  top: 1rem;
  right: 1.6875rem;
}
.sign-up-form .invalid + .validation-message {
  padding-top: 0.25rem;
}
.sign-up-form .validation-message {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: clamp(1.3125rem, 0.4694835681vw + 1.2024647887rem, 1.625rem);
  line-height: normal;
  color: var(--color-text-accent);
  font-style: italic;
  text-align: right;
}
.sign-up-form .form-item-label {
  position: absolute;
  left: clamp(1.25rem, 1.1267605634vw + 0.985915493rem, 2rem);
  top: 1.1em;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.85;
  letter-spacing: 0.015625rem;
  color: var(--color-text-input-placeholder);
}
.sign-up-form .form-item-label.moved {
  position: absolute;
  left: 0;
  top: -1.75em;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: clamp(1.3125rem, 0.4694835681vw + 1.2024647887rem, 1.625rem);
  color: var(--color-text-input-placeholder);
}

@media (min-width: 52.5rem) {
  .container {
    margin: 0;
    align-self: center;
  }
  .title, .description {
    text-align: left;
  }
  .sign-up {
    display: grid;
    grid-template-columns: repeat(2, minmax(min-content, 1fr));
    gap: 1.875rem;
    max-width: 69.375rem;
    margin: 0 auto;
  }
}

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