@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border: 0;
}

:root {
  /* colors */
  /* primary */
  --pale-blue: hsl(225, 100%, 94%);
  --bright-blue: hsl(245, 75%, 52%);
  --violet: #766CF1;
  border-radius: 11px;
  /* neutral */
  --very-pale-blue: hsl(225, 100%, 98%);
  --desaturated-blue: hsl(224, 23%, 55%);
  --dark-blue: hsl(223, 47%, 23%);
  --white: hsl(0, 0%, 100%);
  /* shadow */
  --shadow-1: 0px 20px 20px 0px hsla(223, 47%, 23%, 0.19);
  --shadow-2: 0px 20px 20px 0px rgba(56, 42, 225, 0.19);
  /* font */
  --font-family: "Red Hat Display", sans-serif;
  --heading: 900 1.375rem/normal var(--font-family);
  --body: 500 0.938rem/1.5625rem var(--font-family);
  --label-xl: 900 0.9375rem/normal var(--font-family);
  --label-lg: 900 0.875rem/normal var(--font-family);
  --label-md: 500 0.875rem/normal var(--font-family);
  --label-sm: 700 0.8125rem/normal var(--font-family);
}
@media (min-width: 588px) {
  :root {
    --heading: 900 1.75rem/normal var(--font-family);
    --body: 500 1rem/1.875rem var(--font-family);
    --label-xl: 900 0.938rem/normal var(--font-family);
    --label-lg: 900 1rem/normal var(--font-family);
    --label-md: 500 1rem/normal var(--font-family);
    --label-sm: 700 0.875rem/normal var(--font-family);
  }
}

body {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  font-family: var(--font-family);
  background-color: var(--pale-blue);
  background-image: url("../images/pattern-background-mobile.svg");
  background-repeat: no-repeat;
  background-size: 100%;
}
@media (min-width: 23.5rem) {
  body {
    background-image: url("../images/pattern-background-desktop.svg");
  }
}

.site-main {
  padding: 0 24px;
  display: grid;
  place-items: center;
  container: card/inline-size;
}

.card {
  width: min(100%, 28.125rem);
  padding-bottom: 2rem;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--white);
}
.card__hero {
  width: 100%;
  border-radius: 20px 20px 0 0;
}
.card__content {
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card__heading {
  font: var(--heading);
  padding: 2rem 0 1rem 0;
}
.card p {
  padding-bottom: 1.5rem;
  text-align: center;
  font: var(--body);
  color: var(--desaturated-blue);
}
.card__plan-wrapper {
  width: 100%;
  padding: 1rem;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--very-pale-blue);
}
.card__plan-wrapper section:nth-child(1) {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.card__plan-wrapper a {
  font: var(--label-sm);
  color: var(--bright-blue);
  text-underline-offset: 3px;
}
.card__plan-wrapper a:hover {
  color: var(--violet);
  text-decoration: none;
}
.card__plan {
  display: flex;
  flex-direction: column;
}
.card__plan span:nth-child(1) {
  font: var(--label-lg);
  color: var(--dark-blue);
}
.card__plan:nth-child(2) {
  font: var(--label-md);
  color: var(--desaturated-blue);
}
.card__cancel {
  margin-top: 1.5rem;
  font: var(--label-xl);
  color: var(--desaturated-blue);
  text-decoration: none;
}
.card__cancel:hover {
  color: var(--dark-blue);
}
.card__btn {
  width: 100%;
  height: 3.125rem;
  margin-top: 1.5rem;
  border-radius: 11px;
  font: var(--label-xl);
  color: var(--white);
  background-color: var(--bright-blue);
  box-shadow: var(--shadow-1);
}
.card__btn:hover {
  cursor: pointer;
  background-color: var(--violet);
  box-shadow: var(--shadow-2);
}

@container card (min-width: 33.75rem) {
  .card {
    padding-bottom: 3rem;
  }
  .card__content {
    padding: 0 3rem;
  }
  .card__heading {
    padding: 2.813rem 0 0 0;
    padding-bottom: 1.5rem;
  }
  .card p {
    padding-bottom: 1.25rem;
  }
  .card__plan-wrapper {
    padding: 1.5rem;
    margin: 0;
  }
  .card__btn {
    margin-top: 2rem;
  }
  .card__cancel {
    margin-top: 2rem;
  }
}
.attribution {
  height: 4rem;
  display: grid;
  place-items: center;
  font-size: 11px;
  text-align: center;
}
.attribution a {
  color: var(--bright-blue);
}

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