style.css

:root {
  /* Colors: Primary */
  --pale-blue: rgba(224, 232, 255, 1);
  --bright-blue: hsl(245, 75%, 52%);
  --dull-blue: hsl(245, 46%, 48%);

  /* Colors :Neutral */
  --very-pale-blue: hsl(225, 100%, 98%);
  --dark-blue: hsl(223, 47%, 23%);

  /* Border Radius */
  --border-radius: 1rem;
}

* {
  box-sizing: border-box;
}

body {
  font-family: "Red Hat Display", sans-serif;
  background-image: url("./images/pattern-background-desktop.svg");
  background-repeat: no-repeat;
  background-color: var(--pale-blue);
}

h5 {
  font-weight: 900;
}

span,
.payment-btn {
  font-weight: 700;
}

p {
  font-size: 0.7rem;
}

.payment-btn {
  box-shadow: 8px 10px 10px 1px var(--pale-blue);
  background-color: var(--bright-blue);
  font-size: 0.75rem;
}

.payment-btn:hover {
  box-shadow: 8px 10px 10px 1px var(--pale-blue);
  background-color: var(--dull-blue);
}

.plan-selector {
  background-color: var(--very-pale-blue);
  border-radius: var(--border-radius);
}

.cancel-link {
  text-decoration: none;
  font-weight: 500;
  color: var(--dark-blue);
  font-size: 0.9rem;
}

.cancel-link:hover {
  color: black;
}

.change-link {
  color: var(--bright-blue);
}

.change-link:hover {
  color: var(--bright-blue);
  text-decoration: none;
}

.card {
  border-radius: var(--border-radius);
}

.card-img-top {
  border-radius: 1rem 1rem 0 0;
}