@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..9001,14..32,100..900&display=swap");
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  font-size: 62.5%;
}

:root {
  --white: #FFFFFF;
  --black: #000000;
  --grey-500: #5E6E85;
  --grey-300: #ACC1DE;
  --blue-900: #253347;
  --blue-500: #345FF6;
  --blue-300: #B3D3F1;
  --blue-100: #E1E7FE;
  --spacing-0: 0;
  --spacing-100: 0.8rem;
  --spacing-200: 1.6rem;
  --spacing-300: 2.4rem;
  --spacing-400: 3.2rem;
  --spacing-500: 4rem;
  --spacing-600: 4.8rem;
  --spacing-700: 5.6rem;
  --spacing-900: 7.2rem;
  --spacing-1100: 8.8rem;
  --spacing-1200: 9.6rem;
  --spacing-1300: 10.4rem;
  --spacing-1600: 12.8rem;
  --spacing-1800: 14.4rem;
}

fieldset {
  border: 0 none;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}

.hero__text-container h1 {
  color: var(--blue-900);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 6.4rem;
  font-weight: 600;
  line-height: 110%;
  letter-spacing: -0.05em;
}
.hero__text-container p {
  color: var(--grey-500);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0;
}

.form-heading {
  color: var(--blue-900);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 2.9rem;
  letter-spacing: -0.05em;
}

.unit__groups label {
  color: var(--blue-900);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0;
}

.height-weight--metric input {
  color: var(--blue-900);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 2.9rem;
  letter-spacing: -0.05em;
}
.height-weight--metric input::placeholder {
  color: var(--grey-500);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 2.9rem;
  letter-spacing: -0.05em;
}
.height-weight--metric label {
  color: var(--grey-500);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0;
}

fieldset[data-unit=metric] + .height-weight--metric .height-weight--metric-container::after {
  color: var(--blue-500);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 2.9rem;
  letter-spacing: -0.05em;
}

.welcome-result h3 {
  color: var(--white);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 2.9rem;
  letter-spacing: -0.05em;
}
.welcome-result p {
  color: var(--white);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0;
}

.height-weight--imperial legend {
  color: var(--grey-500);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0;
}
.height-weight--imperial input {
  color: var(--blue-900);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 2.9rem;
  letter-spacing: -0.05em;
}
.height-weight--imperial input::placeholder {
  color: var(--grey-500);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 2.9rem;
  letter-spacing: -0.05em;
}
.height-weight--imperial-container div:before {
  color: var(--blue-500);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 2.9rem;
  letter-spacing: -0.05em;
}

.result__text p {
  color: var(--white);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0;
}
.result__text span {
  color: var(--white);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 6.4rem;
  font-weight: 600;
  line-height: 110%;
  letter-spacing: -0.05em;
}
.result__suggestion p {
  color: var(--white);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0;
}
.result__suggestion .weight-range {
  color: var(--white);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 0;
}

.results__explanation h2 {
  color: var(--blue-900);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 4.8rem;
  font-weight: 600;
  line-height: 110%;
  letter-spacing: -0.05em;
}
.results__explanation p {
  color: var(--grey-500);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0;
}

.tip h4 {
  color: var(--blue-900);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 2.9rem;
  letter-spacing: -0.05em;
}
.tip p {
  color: var(--grey-500);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0;
}

.limitations__header h2 {
  color: var(--blue-900);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 4.8rem;
  font-weight: 600;
  line-height: 110%;
  letter-spacing: -0.05em;
}
.limitations__header p {
  color: var(--grey-500);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0;
}

.card h5 {
  color: var(--blue-900);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 2rem;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -0.05em;
}
.card p {
  color: var(--grey-500);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0;
}

@media only screen and (max-width: 65.875rem) {
  .hero__text-container h1 {
    color: var(--blue-900);
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-size: 4.8rem;
    font-weight: 600;
    line-height: 110%;
    letter-spacing: -0.05em;
  }
  .result__text span {
    color: var(--white);
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-size: 4.8rem;
    font-weight: 600;
    line-height: 110%;
    letter-spacing: -0.05em;
  }
  .results__explanation h2 {
    color: var(--blue-900);
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-size: 3.2rem;
    font-weight: 600;
    line-height: 110%;
    letter-spacing: -0.05em;
  }
  .limitations__header h2 {
    color: var(--blue-900);
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-size: 3.2rem;
    font-weight: 600;
    line-height: 110%;
    letter-spacing: -0.05em;
  }
}
.hero {
  display: flex;
  justify-content: center;
  max-width: 144rem;
  min-height: 73.7rem;
  position: relative;
  padding: 7.2rem 0 var(--spacing-1100) 0;
  margin-inline: auto;
}
.hero:before {
  content: "";
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100.2rem;
  width: 100%;
  height: 73.7rem;
  background: linear-gradient(90deg, rgba(214, 252, 254, 0) 0%, #D6E6FE 100%);
  border-radius: 0 0 3.5rem 3.5rem;
  z-index: -10;
}
.hero__content {
  display: flex;
  flex-direction: column;
  gap: 4.2rem;
  max-width: 116rem;
  width: 100%;
}
.hero__text-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--spacing-400);
}
.hero__text-container {
  padding-top: 9.3rem;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-400);
}
.hero__text-container h1 {
  max-width: 47rem;
}
.hero__text-container p {
  max-width: 46.5rem;
}

@media only screen and (max-width: 65.875rem) {
  .hero {
    padding: var(--spacing-400) var(--spacing-500) 0 var(--spacing-400);
  }
  .hero::before {
    max-height: 64rem;
  }
  .hero__content {
    gap: var(--spacing-500);
  }
  .hero__content nav {
    text-align: center;
  }
  .hero__content nav img {
    width: 4rem;
    height: 4rem;
  }
  .hero__text-form {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: var(--spacing-500);
  }
  .hero__text-container {
    text-align: center;
    padding-top: 0;
    gap: var(--spacing-300);
    align-items: center;
  }
  .hero__text-container h1 {
    justify-self: center;
  }
  .hero__text-container p {
    max-width: inherit;
  }
}
@media only screen and (max-width: 43.125rem) {
  .hero {
    padding: var(--spacing-400) var(--spacing-200) 6.1rem var(--spacing-200);
  }
  .hero__content, .hero__text-form {
    gap: var(--spacing-400);
  }
  .height-weight--metric {
    grid-template-columns: 1fr;
  }
}
.results {
  display: flex;
  justify-content: center;
  max-width: 144rem;
  margin-inline: auto;
  min-height: 67.1rem;
  padding-bottom: 8.6rem;
}
.results__content {
  display: grid;
  grid-template-columns: minmax(20rem, 56.4rem) minmax(20rem, 46.5rem);
  justify-content: space-between;
  align-items: end;
  max-width: 116rem;
  width: 100%;
  position: relative;
}
.results__content::before {
  content: url("../assets/images/pattern-curved-line-left.svg");
  display: inline-block;
  position: absolute;
  right: 2.7rem;
  top: 0;
}
.results__content img {
  width: 100%;
}
.results__explanation {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-400);
  margin-bottom: 4.3rem;
}
.results__explanation p {
  max-width: 43.5rem;
}

@media only screen and (max-width: 65.875rem) {
  .results {
    padding-top: 8.8rem;
    padding-bottom: 9.591rem;
    min-height: 41.1rem;
  }
  .results__content {
    max-width: 84.1rem;
    grid-template-columns: minmax(30rem, 43.5rem) minmax(10rem, 33.1rem);
    column-gap: 7.2rem;
    margin-left: -11.6rem;
  }
  .results__content::before {
    display: none;
  }
  .results__explanation p {
    max-width: inherit;
  }
}
@media only screen and (max-width: 43.125rem) {
  .results {
    padding: 0;
  }
  .results__content {
    grid-template-columns: 1fr;
    margin-left: 0;
    row-gap: var(--spacing-600);
    margin-bottom: 6.16rem;
  }
  .results__explanation {
    padding-inline: 2.3rem;
    margin-bottom: 0;
  }
}
.tips {
  display: flex;
  justify-content: center;
  max-width: 144rem;
  padding: var(--spacing-1200) 0;
  max-height: 42.2rem;
  margin-inline: auto;
}
.tips__content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  max-width: 115.9rem;
  width: 100%;
  column-gap: var(--spacing-400);
}

.tip {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-600);
}
.tip img {
  width: 6.4rem;
  height: 6.4rem;
}
.tip__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-300);
}
.tip__text p {
  max-width: 34rem;
}

@media only screen and (max-width: 65.875rem) {
  .tips {
    padding: 5rem 3.9rem;
    min-height: fit-content;
  }
  .tips__content {
    grid-template-columns: 1fr;
    row-gap: var(--spacing-500);
  }
  .tip {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    column-gap: var(--spacing-500);
  }
  .tip__text p {
    min-width: 100%;
  }
}
@media only screen and (max-width: 43.125rem) {
  .tips {
    padding: var(--spacing-600) var(--spacing-300);
  }
  .tip {
    grid-template-columns: 1fr;
    row-gap: var(--spacing-400);
  }
}
.limitations {
  display: flex;
  justify-content: center;
  max-width: 144rem;
  padding-top: var(--spacing-1300);
  padding-bottom: var(--spacing-1300);
  margin-inline: auto;
  min-height: 93.4rem;
}
.limitations__container {
  position: relative;
  max-width: 116rem;
  width: 100%;
  height: 100%;
}
.limitations__header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-400);
  max-width: 56.4rem;
  position: relative;
  height: max-content;
}
.limitations__header p {
  max-width: 51rem;
}
.limitations__header::after {
  content: url("../assets/images/pattern-curved-line-right.svg");
  position: absolute;
  bottom: -19.5rem;
  left: 16.5rem;
}
.limitations__content {
  max-width: 96.1rem;
  width: 100%;
  position: absolute;
  min-height: 72.6rem;
  top: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr;
}
.limitations__content .card {
  position: absolute;
}
.limitations__content .card:first-child {
  right: 9.9rem;
}
.limitations__content .card:nth-child(2) {
  left: 19.9rem;
  top: 26.4rem;
}
.limitations__content .card:nth-child(3) {
  right: 0;
  top: 26.4rem;
}
.limitations__content .card:nth-child(4) {
  left: 0;
  bottom: 0;
}
.limitations__content .card:last-child {
  bottom: 0;
  left: 39.7rem;
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-200);
  max-width: 36.5rem;
  width: 100%;
  padding: var(--spacing-400);
  background: var(--white);
  border-radius: 1.6rem;
  box-shadow: 16px 32px 56px rgba(143, 174, 207, 0.25);
}
.card__title {
  display: flex;
  gap: var(--spacing-200);
  align-items: center;
}

@media only screen and (max-width: 65.875rem) {
  .limitations {
    padding: 9.6rem 4.3rem 9.5rem 3.9rem;
  }
  .limitations__container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-700);
  }
  .limitations__header {
    max-width: inherit;
    text-align: center;
  }
  .limitations__header p {
    max-width: inherit;
  }
  .limitations__header::after {
    display: none;
  }
  .limitations__content {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    max-width: inherit;
    row-gap: var(--spacing-300);
    column-gap: var(--spacing-200);
    justify-content: center;
  }
  .limitations__content .card {
    position: relative;
    max-width: 48%;
  }
  .limitations__content .card:first-child {
    right: 0;
  }
  .limitations__content .card:nth-child(2) {
    left: 0;
    top: 0;
  }
  .limitations__content .card:nth-child(3) {
    top: 0;
  }
  .limitations__content .card:last-child {
    left: 0;
    justify-self: center;
  }
}
@media only screen and (max-width: 43.125rem) {
  .limitations {
    padding: 8.2rem 2.9rem 9.6rem 1.9rem;
  }
  .limitations__content {
    align-self: center;
    max-width: 80%;
  }
  .limitations__content .card {
    min-width: 100%;
  }
}
@media only screen and (max-width: 28.125rem) {
  .limitations__content {
    align-self: center;
    max-width: 100%;
  }
}
.bmi-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-400);
  padding: var(--spacing-400);
  background: var(--white);
  box-shadow: 16px 32px 56px rgba(143, 174, 207, 0.25);
  border-radius: 1.6rem;
}

.unit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--spacing-300);
}
.unit__groups {
  display: flex;
}
.unit__groups label {
  display: flex;
  gap: var(--spacing-200);
  align-items: center;
  cursor: pointer;
  position: relative;
  max-height: 3.1rem;
}
.unit__groups label:hover::before {
  border-color: var(--blue-500);
}
.unit__groups label::before {
  content: "";
  display: block;
  height: 3.1rem;
  width: 3.1rem;
  border-radius: 50%;
  border: 1px solid var(--grey-500);
}
.unit__groups label::after {
  content: "";
  display: none;
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 50%;
  background-color: var(--blue-500);
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
}
.unit__groups input {
  opacity: 0;
  height: 0 !important;
  width: 0 !important;
}
.unit__groups input:checked + label::before {
  border-color: var(--blue-100);
  background-color: var(--blue-100);
}
.unit__groups input:checked + label::after {
  display: block;
}

.height-weight--metric {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--spacing-300);
}
.height-weight--metric-container {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr);
  row-gap: var(--spacing-100);
  position: relative;
}
.height-weight--metric input {
  box-sizing: border-box;
  padding: var(--spacing-200) var(--spacing-900) var(--spacing-200) var(--spacing-300);
  background: var(--white);
  border-radius: 1.2rem;
  border: 1px solid var(--grey-500);
  max-height: 6.1rem;
}
.height-weight--metric input:hover {
  cursor: pointer;
  border-color: var(--blue-500);
}

fieldset[data-unit=metric] + .height-weight--metric .height-weight--metric-container:nth-child(1)::after {
  content: "cm";
  display: block;
  bottom: var(--spacing-200);
  right: var(--spacing-300);
  position: absolute;
}
fieldset[data-unit=metric] + .height-weight--metric .height-weight--metric-container:nth-child(2)::after {
  content: "kg";
  display: block;
  bottom: var(--spacing-200);
  right: var(--spacing-300);
  position: absolute;
}

.height-weight--imperial {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-300);
}
.height-weight--imperial-container {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--spacing-100);
}
.height-weight--imperial-container div {
  position: relative;
}
.height-weight--imperial-container-input-group {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) minmax(10rem, 1fr);
  column-gap: var(--spacing-300);
}
.height-weight--imperial-container-input-group:first-child::before {
  content: "helo";
  display: block;
}
.height-weight--imperial-container-input-group input {
  width: 100%;
  padding: var(--spacing-300) var(--spacing-900) var(--spacing-300) var(--spacing-300);
  border-radius: 1.2rem;
  border: 1px solid var(--grey-500);
}

.height-weight--imperial-container:nth-child(1) div:first-child:before {
  content: "ft";
  display: block;
  color: var(--blue-500);
  position: absolute;
  bottom: var(--spacing-300);
  right: var(--spacing-300);
}

.height-weight--imperial-container:nth-child(1) div:nth-child(2):before {
  content: "in";
  display: block;
  color: var(--blue-500);
  position: absolute;
  bottom: var(--spacing-300);
  right: var(--spacing-300);
}

.height-weight--imperial-container:nth-child(2) div:first-child:before {
  content: "st";
  display: block;
  color: var(--blue-500);
  position: absolute;
  bottom: var(--spacing-300);
  right: var(--spacing-300);
}

.height-weight--imperial-container:nth-child(2) div:nth-child(2):before {
  content: "lbs";
  display: block;
  color: var(--blue-500);
  position: absolute;
  bottom: var(--spacing-300);
  right: var(--spacing-300);
}

fieldset[data-unit=metric] ~ .height-weight--imperial {
  display: none;
}

fieldset[data-unit=metric] ~ .height-weight--metric {
  display: grid;
}

fieldset[data-unit=imperial] ~ .height-weight--metric {
  display: none;
}

fieldset[data-unit=imperial] ~ .height-weight--imperial {
  display: flex;
}

@media only screen and (max-width: 43.125rem) {
  .height-weight--metric {
    grid-template-columns: minmax(5rem, 1fr);
    row-gap: var(--spacing-200);
  }
}
.welcome-result {
  padding: var(--spacing-400);
  background: var(--blue-500);
  border-radius: 1.6rem 10rem 10rem 1.6rem;
}

.welcome-result[data-show=welcome] .result {
  display: none;
}
.welcome-result[data-show=welcome] .welcome {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-200);
}

.welcome-result[data-show=result] .welcome {
  display: none;
}
.welcome-result[data-show=result] .result {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--spacing-300);
  align-items: center;
}
.welcome-result[data-show=result] .result__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-100);
}

@media only screen and (max-width: 28.125rem) {
  .welcome-result {
    border-radius: 1.6rem;
  }
  .welcome-result[data-show=result] .result {
    grid-template-columns: 1fr;
    row-gap: var(--spacing-300);
  }
}

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