:root {
  --yellow: #F8D147FF;
  --orange: #ef9b4c;
  --violet: #514394;
  --red: #e44843;
  --blue: #034084;
  --black: #1e1e1c;
  --grey-light: rgba(20, 20, 20, 0.1);
}

.gradient-bg {
  background-size: 100% 100%;
  background-position: 0px 0px,0px 0px,0px 0px,0px 0px;
  background-image: radial-gradient(40% 40% at 15% 0%, #03408496 0%, #03408400 100%),
    radial-gradient(80% 120% at 100% 30%, var(--black) 10%, #1E1E1C00 80%),
    radial-gradient(80% 70% at 90% 100%, var(--blue) 0%, #03408400 100%),
    radial-gradient(150% 110% at 0% 100%, var(--yellow) 0%, var(--orange) 10%, var(--red) 30%, var(--violet) 80%, var(--black) 95%);
}

.main-menu-section {
  background-color: black;
  position: sticky;
  top: 0;
}

.page-content {
  --menu-height: min(8vw, 8vh);
  --_steps-height: min(6vh, 6vw);
}

.steps-display {
  --_step-width: min(25vw, 25vh);
  --_steps-display-width: calc(var(--_step-width) * 4);
  position: sticky;
  top: var(--menu-height);
  width: 100vw;
  height: var(--_steps-height);
  display: flex;
  justify-content: center;
  align-items: center;
  /* border-top: 1px solid rgba(239, 155, 76, 0.2); */
  border-bottom: 1px solid rgba(239, 155, 76, 0.2);
  background-color: white;
  z-index: 10;
}

.step-block {
  border-radius: min(3vw, 3vh);
  padding-block: 0.75%;
  font-size: 145%;
  width: var(--_step-width);
  text-align: center;
  text-decoration: none;
  /* background-position: 0px 0px,0px 0px,0px 0px,0px 0px;
  background-image: radial-gradient(40% 40% at 15% 0%, #03408496 0%, #03408400 100%),
    radial-gradient(80% 120% at 100% 30%, var(--black) 10%, #1E1E1C00 80%),
    radial-gradient(80% 70% at 90% 100%, var(--blue) 0%, #03408400 100%),
    radial-gradient(150% 110% at 0% 100%, var(--yellow) 0%, var(--orange) 10%, var(--red) 30%, var(--violet) 80%, var(--black) 95%); */
}

.step-block[data-status="done"],
.step-block[data-status="current"] {
  color: white;
}

.steps-progress {
  --_left-margin: calc(calc(100vw - var(--_steps-display-width)) / 2);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: calc(var(--_left-margin) + calc(var(--_step-width) * 1) );
  background-image: linear-gradient(0deg, #514394 0%, #5e50a4 75%, #514494 100%);
  border-top-right-radius: calc(var(--_steps-height) / 2);
  border-bottom-right-radius: calc(var(--_steps-height) / 2);
  z-index: -3;
}

/***************/
/* FORMULA SECTION */
/***************/

.formula-choice-section {
  display: flex;
  flex-direction: column;
  width: 80vw;
  margin-inline: 10vw;
}

.formulas-choice-title {
  font-weight: bold;
  font-size: 210%;
  padding-block: min(3vw, 3vh) min(4vw, 4vh);
}

.formulas-wrapper {
  display: flex;
  justify-content: space-between;
}

.formula-card {
  position: relative;
  flex: 0 0 33%;
  padding: 2.2% 2%;
  border: 1px solid rgb(230, 230, 230);
  border-radius: min(0.8vw, 0.8vh);
  display: flex;
  flex-direction: column;
}

.formula-card:hover {
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);
}

.formula-header {
  min-height: 10em;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  margin-bottom: 2em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.formula-title {
  font-size: 175%;
}

.formula-subtitle {
  font-size: 1.2em;
  margin-bottom: auto;
}

.formula-price {
  font-size: 135%;
  margin-bottom: 0.5em;
}

.formula-list-title {
  font-size: 145%;
  font-weight: bold;
}

.formula-description {
  font-size: 135%;
  line-height: 220%;
  padding-left: min(1.4vw, 1.4vh);
  margin-block: min(0.75vw, 0.75vh) min(2.5vw, 2.5vh);
}

.formula-btn {
  cursor: pointer;
  text-align: center;
  font-size: 130%;
  margin-top: auto;
  padding: 2% 1.5%;
  border: 1px solid rgba(3, 63, 132, 0.3);
  border-radius: min(0.8vw, 0.8vh);
  background-color: rgba(3, 63, 132, 0.1);
  transition: border-color 100ms ease-in-out, background-color 100ms ease-in-out, color 100ms ease-in-out;
}

.formula-btn:hover {
  border-color: #034084;
  color: white;
  background-image: linear-gradient(0deg, #034084 0%, #2963a6 80%, #0b509d 100%);
}

@media (pointer: coarse) {
  .page-content {
    --_steps-height: min(6vh, 6rem);
  }
  
  .steps-display {
    --_step-width: min(11rem, 11vh);
  }

  .step-block {
    font-size: 120%;
  }
  
  .formula-choice-section {
    width: 100%;
    margin: 0;
    padding-inline: 7.5%;
  }

  @media (orientation: portrait) {
    .formulas-wrapper {
      flex-direction: column;
    }
    
    .formula-card {
      padding: 11%;
      margin-bottom: 2rem;
    }
  }
  
  @media (orientation: landscape) {
    .page-content {
      --_steps-height: min(4vw, 4rem);
    }
    
    .steps-display {
      --_step-width: min(16vw, 16rem);
    }
    
    .formula-choice-section {
      padding-inline: 3%;
      margin-bottom: 2rem;
    }
    
    .formula-card {
      padding: 2% 4%;
    }
  }
}

.disclaimer {
  margin-block: min(10%,4em);
  text-align: center;
  width: 100vw;
}