@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  --blue-50: hsl(240, 78%, 98%);
  --gray-650: hsl(233, 13%, 49%);
  --gray-700: hsl(232, 13%, 33%);
}

body {
  font-family: "Montserrat", sans-serif;
  color: var(--gray-650);
  font-size: 0.9375rem;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 5rem auto;
  background-color: var(--blue-50);
  background-image: url("./images/bg-top.svg"), url("./images/bg-bottom.svg");
  background-repeat: no-repeat;
  background-position: top right -10%, bottom 10% left;
  background-size: 30%, 25%;
  font-weight: 700;
}

h1 {
  font-size: 2rem;
  text-align: center;
}

/* toggle button */

small {
  color: hsla(233, 13%, 49%, 0.5);
  font-size: 0.9375rem;
}

.toggle {
  width: 3.125rem;
  height: 1.75rem;
  background: linear-gradient(90deg, hsl(237, 73%, 79%), hsl(238, 63%, 64%));
  border-radius: 6.25rem;
  position: relative;
  cursor: pointer;
}

.toggle:hover {
  opacity: 0.7;
  transition: all 0.3s ease;
}

.circle-annually {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 6.25rem;
  background-color: var(--blue-50);
  position: absolute;
  top: 0.1875rem;
  left: 0.25rem;
}

.circle-monthly {
  width: 1.3125rem;
  height: 1.3125rem;
  border-radius: 6.25rem;
  background-color: var(--blue-50);
  position: absolute;
  top: 0.1875rem;
  right: 0.25rem;
  opacity: 0;
}

.label-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  margin: 2.5rem 0 3.625rem 0;
}

/* white cards */

main {
  display: flex;
  margin-bottom: 3.75rem;
}

h2 {
  font-size: 1.0625rem;
  text-align: center;
}

.price--black--monthly,
.price--black--annually {
  font-size: 4rem;
  color: var(--gray-700);
  margin: 1.5rem 0;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  width: 17rem;
}

.price--black--monthly {
  display: none;
}

.ul--black {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.ul--black li {
  padding: 1rem 0;
  border-top: 0.0625rem solid hsla(233, 13%, 49%, 0.2);
  width: 100%;
  text-align: center;
}

.ul--black li:last-child {
  border-bottom: 0.0625rem solid hsla(233, 13%, 49%, 0.2);
}

.btn--purple {
  border: none;
  font-family: "Montserrat", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.0875rem;
  color: var(--blue-50);
  background: linear-gradient(90deg, hsl(237, 73%, 79%), hsl(238, 63%, 64%));
  padding: 1rem 1.5rem;
  border-radius: 0.625rem;
  display: flex;
  justify-content: center;
  cursor: pointer;
  margin-top: 2.5rem;
}

.btn--purple:hover {
  background: transparent;
  outline: 0.0625rem solid hsl(238, 63%, 64%);
  color: hsl(238, 63%, 64%);
}

.card--white1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: white;
  padding: 2.5rem;
  border-radius: 1.25rem 0 0 1.25rem;
  max-width: 22.5rem;
  margin: 1.5rem 0;
  box-shadow: 0.625rem 0.625rem 1.25rem 0.0625rem hsla(238, 63%, 64%, 0.2);
}

.card--white2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: white;
  padding: 2.5rem;
  border-radius: 0 1.25rem 1.25rem 0;
  max-width: 22.5rem;
  margin: 1.5rem 0;
  box-shadow: 0.625rem 0.625rem 1.25rem 0.0625rem hsla(238, 63%, 64%, 0.2);
}

span {
  font-size: 2.5rem;
}

/* purple card */

.h2--white {
  font-size: 1.0625rem;
  color: white;
  text-align: center;
}

.price--white--annually,
.price--white--monthly {
  font-size: 4rem;
  color: white;
  margin: 1.5rem 0;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  width: 17rem;
}

.price--white--monthly {
  display: none;
}

.ul--white {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}

.ul--white li {
  padding: 1rem 0;
  border-top: 0.0625rem solid rgba(255, 255, 255, 0.3);
  width: 100%;
  text-align: center;
}

.ul--white li:last-child {
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.3);
}

.btn--white {
  border: none;
  font-family: "Montserrat", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.0875rem;
  color: hsl(238, 63%, 64%);
  background: white;
  padding: 1rem 1.5rem;
  border-radius: 0.625rem;
  display: flex;
  justify-content: center;
  cursor: pointer;
  margin-top: 2.5rem;
}

.btn--white:hover {
  background: transparent;
  outline: 0.0625rem solid white;
  color: white;
}

.card--purple {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(135deg, hsl(237, 73%, 79%), hsl(238, 63%, 64%));
  padding: 3.75rem 2.5rem;
  border-radius: 1.25rem;
  max-width: 22.5rem;
  box-shadow: 0.625rem 0.625rem 1.25rem 0.0625rem hsla(238, 63%, 64%, 0.3);
}

/* responsive */

@media (max-width: 68.75rem) {
  .price--black--monthly,
  .price--black--annually,
  .price--white--monthly,
  .price--white--annually {
    font-size: 3rem;
    width: 11.25rem;
  }
  .card--white,
  .card--purple {
    padding: 3.75rem 3.75rem;
  }
}

@media (max-width: 52.5rem) {
  .price--black--monthly,
  .price--black--annually,
  .price--white--monthly,
  .price--white--annually {
    font-size: 2.5rem;
    width: 11.25rem;
  }
  .card--white,
  .card--purple {
    padding: 3.75rem 2.5rem;
  }
}

@media (max-width: 48.125rem) {
  body {
    background-image: url("./images/bg-top.svg");
    background-repeat: no-repeat;
    background-position: top -2rem right -40%;
    background-size: 40%;
  }
  main {
    flex-direction: column;
    align-items: center;
    width: 100vw;
    gap: 1.5rem;
  }
  .card--white1,
  .card--white2,
  .card--purple {
    border-radius: 1.25rem;
    max-width: 90vw;
    width: 100%;
  }
  .price--black--monthly,
  .price--black--annually,
  .price--white--monthly,
  .price--white--annually {
    font-size: 4rem;
    width: 100%;
  }
}