:root {
  --Soft-Cyan: hsl(174, 77%, 80%); /* (Full Slider Bar) */
  --Strong-Cyan: hsl(174, 86%, 45%); /* (Slider Backround) */
  --Light-Grayish-Red: hsl(14, 92%, 95%); /* (Discount Background)*/
  --Light-Red: hsl(15, 100%, 70%); /* (Discount Text) */
  --Pale-Blue: hsl(226, 100%, 87%); /*  (CTA Text)*/
  --White: hsl(0, 0%, 100%); /* (Pricing Component Background) */
  --Ver-Pale-Blue: hsl(230, 100%, 99%); /*  (Main Background)*/
  --Light-Grayish-Blue: hsl(224, 65%, 95%); /*  (Empty Slider Bar)*/
  --Light-Grayish-Blue-Toggle: hsl(223, 50%, 87%); /*  (Toggle Background)*/
  --Grayish-Blue: hsl(225, 20%, 60%); /*  (Text)*/
  --Dark-Desaturated-Blue: hsl(227, 35%, 25%); /* (Text & CTA Background) */

  --fs: 0.94rem;
}

* {
  font-family: "Manrope", sans-serif;
}

html,
body {
  height: 100%;
}

body {
  background-color: var(--Ver-Pale-Blue);
  background-image: url(images/bg-pattern.svg);
  background-repeat: no-repeat;
}

.container {
  max-width: 600px;
}

header {
  background-image: url(images/pattern-circles.svg);
  background-position: center;
  background-repeat: no-repeat;
}

h1,
.price {
  font-weight: 800;
  color: var(--Dark-Desaturated-Blue);
}

header p {
  color: var(--Grayish-Blue);
}

section {
  background-color: var(--White);
  -webkit-box-shadow: 2px 10px 34px 3px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 2px 10px 34px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 2px 10px 34px 3px rgba(0, 0, 0, 0.1);
}

.top-row {
  border-bottom: 1px solid var(--Light-Grayish-Blue);
}

h2 {
  color: var(--Grayish-Blue);
  letter-spacing: 2px;
  font-weight: 800;
}

.price {
  font-size: 2.5rem;
}

.per-month {
  color: var(--Grayish-Blue);
}

/* RANGE */

.sr-only {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

input[type="range"] {
  appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type="range"]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type="range"]::-ms-track {
  width: 100%;
  cursor: pointer;

  /* Hides the slider so custom styles can be added */
  background: transparent;
  border-color: transparent;
  color: transparent;
}

/* Special styling for WebKit/Blink */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 40px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--Strong-Cyan);
  background-image: url(images/icon-slider.svg);
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  box-shadow: 0px 20px 20px 8px rgba(16, 213, 194, 0.2);
  /* Add cool effects to your sliders! */
}

/* All the same stuff for Firefox */
input[type="range"]::-moz-range-thumb {
  height: 40px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--Strong-Cyan);
  background-image: url(images/icon-slider.svg);
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  margin-top: -14px;
  box-shadow: 0px 135px 123px 8px rgba(16, 213, 194, 0.27);
}

/* All the same stuff for IE */
input[type="range"]::-ms-thumb {
  height: 40px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--Strong-Cyan);
  background-image: url(images/icon-slider.svg);
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  margin-top: -14px;
  box-shadow: 0px 135px 123px 8px rgba(16, 213, 194, 0.27);
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
}

input[type="range"]::-moz-range-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
}

/*  SWITCH  */

label {
  color: var(--Grayish-Blue);
  font-size: var(--fs);
}

.switch-label {
  position: relative;
  width: 50px;
  height: 26px;
  display: inline-block;
}

.switch-label input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch {
  position: absolute;
  cursor: pointer;
  background-color: var(--Light-Grayish-Blue-Toggle);
  border-radius: 2rem;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.switch:hover {
  background-color: var(--Soft-Cyan);
}

.switch::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 3px;
  background-color: var(--White);
  border-radius: 50%;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .switch {
  background-color: var(--Soft-Cyan);
}

input:focus + .switch {
  box-shadow: 0 0 1px #2196f3;
}

input:checked + .switch::before {
  /* left: calc(100% - 2px);
  transform: translateX(-100%); */
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.discount {
  color: var(--Light-Red);
  background-color: var(--Light-Grayish-Red);
  font-size: var(--fs);
  top: 0;
  right: -7rem;
}
/* 
.discount.active {
  opacity: 1;
} */

ul li {
  color: var(--Grayish-Blue);
  font-size: var(--fs);
}

button {
  background-color: var(--Dark-Desaturated-Blue);
  color: var(--Pale-Blue);
}

.attribution {
  font-size: 0.8rem;
}

/* RESPONSIVE */

@media (max-width: 576px) {
  header p {
    padding-inline: 4rem;
  }

  label {
    font-size: 0.8rem;
  }
}

@media (max-width: 768px) {
  .discount {
    right: -3rem;
  }
}