:root {
  /* Colors */
  --clr-red: hsl(4, 100%, 67%);
  --clr-blue-800: hsl(234, 29%, 20%);
  --clr-blue-700: hsl(235, 18%, 26%);
  --clr-grey: hsl(0, 0%, 58%);
  --clr-white: hsl(0, 0%, 100%);

  /* Typography */
  --ff-primary: "Roboto", sans-serif;

  --fw-regular: 400;
  --fw-bold: 700;
}

@font-face {
  font-family: "Roboto";
  src: url("./assets/fonts/Roboto-Regular.ttf");
  font-weight: 400;
}

@font-face {
  font-family: "Roboto";
  src: url("./assets/fonts/Roboto-Bold.ttf");
  font-weight: 700;
}

/* CSS Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

body {
  line-height: 1.5;
  min-block-size: 100vh;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

img,
picture,
svg {
  display: block;
  max-inline-size: 100%;
}

/* General styling */
body {
  font-family: var(--ff-primary);
  font-size: 1rem;
  font-weight: var(--fw-regular);
  background-color: var(--clr-blue-700);
  color: var(--clr-blue-800);
}

@media (min-width: 48em) {
  body {
    place-content: center;
  }
}

h2 {
  /* @link https://utopia.fyi/clamp/calculator?a=320,1240,24—48&p=fs */
  --fs-24-48: clamp(1.5rem, 0.9783rem + 2.6087vw, 3rem);

  font-size: var(--fs-24-48);
  font-weight: var(--fw-bold);
  color: var(--clr-blue-800);
  line-height: 1.125;
  margin-block-end: 1.5rem;
}

input {
  width: 100%;
}

/* Main content */
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.wrapper {
  max-inline-size: 30rem;
  margin-inline: auto;
  background-color: var(--clr-white);
  display: grid;
}

.description-wrapper {
  padding-block: 2.625rem;
  padding-inline: 5%;
}

.thumbnail-wrapper img {
  width: 100%;
}

.desktop-illustration {
  display: none;
}

@media(min-width: 48em) {
  .desktop-illustration {
    display: block;
    height: 100%;
  }

  .mobile-illustration {
    display: none;
  }
}

@media (min-width: 48em) {
  .wrapper {
    max-inline-size: 58rem;
    width: 94%;
    grid-template-columns: 1fr 45%;
    place-items: center;
    border-radius: 1.5rem;
  }

  .description-wrapper {
    /* @link https://utopia.fyi/clamp/calculator?a=768,1240,30—60&p=space */
    --space-30-60: clamp(1.875rem, -1.1758rem + 6.3559vw, 3.75rem);

    order: 1;
    padding: var(--space-30-60);
  }

  .thumbnail-wrapper {
    order: 2;
    padding-block: 1.5rem;
    padding-inline-end: 1.5rem;
  }
}

h2 + p {
  margin-block-end: 1.5rem;
}

ul {
  margin-block-end: 1.75rem;
}

li {
  background-image: url(./assets/images/icon-list.svg);
  background-repeat: no-repeat;
  background-position: 0 2px;
  padding-inline-start: 2.5rem;
}

li:not(:last-child) {
  margin-block-end: 0.75rem;
}

.flex-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-block: 0.5rem;
}

label {
  font-size: 0.875rem;
  color: var(--clr-blue-800);
  font-weight: var(--fw-bold);
}

#email {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--clr-grey);
  height: 3.5rem;
  padding-inline: 0.875em;
  border-radius: 0.5rem;
  margin-block-end: 0.75rem;
}

#email.invalid {
  border-color: var(--clr-red);
  background-color: hsl(5, 100%, 95%);
  color: var(--clr-red);
}

#email:hover {
  border: 2px solid var(--clr-blue-800);
}

#email:focus-visible {
  border: 0;
  outline: 2px solid var(--clr-blue-800);
}

.button {
  cursor: pointer;
  padding: 1.15em 0.875em;
  width: 100%;
  border: 0;
  border-radius: 0.5rem;
  background-color: var(--clr-blue-800);
  color: var(--clr-white);
  line-height: 1.2;
}

.button:hover {
  background: linear-gradient(45deg, hsl(346, 99%, 66%), hsl(13, 99%, 62%));
  box-shadow: 5px 5px 20px hsla(13, 99%, 62%, 0.75);
}

.button:focus-visible {
  outline: 2px solid var(--clr-blue-700);
  outline-offset: 1px;
}

.successful-message-section {
  background-color: var(--clr-white);
  max-inline-size: 31.5rem;
  margin-inline: auto;
  padding-inline: 5%;
}

@media (min-width: 48em) {
  .successful-message-section {
    padding: 3.75rem;
    border-radius: 1.5rem;
  }
}

@media (width < 48em) {
  .successful-message-wrapper {
    padding-block: 9.125rem 12.5rem;
  }
}

.icon {
  width: 4.125rem;
  aspect-ratio: 1;
  margin-block-end: 2.5rem;
}

.successful-message-description {
  margin-block-end: 2.5rem;
}

.email-address {
  font-weight: var(--fw-bold);
  overflow-wrap: break-word;
}

@media (width < 48em) {
  .dismiss-btn {
    margin-block-end: 2rem;
  }
}

.hide {
  display: none;
}

.active {
  color: var(--clr-red);
  font-size: .875rem;
  font-weight: var(--fw-bold);
}