body{
    background-color:#333 ;
    font-family: 'Inter', sans-serif;
}

.bmi-calc{
    width: 500px;
    height: 900px;
    margin: 5% auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(#864860 , #1F1D36);
    color: #fff;
    border-radius: 30px;
   box-shadow: -2px 0 20px rgb(114, 103, 103);
}


/*-------------------------------------------------------------------First Page--------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------*/
h1{
    margin: 25px 5px;
}
.gender{
    padding: 5%;
    margin: 10px 5px;
    box-sizing: border-box;
    
}

.gender .border-wrap{
    border-radius: 15px;
    background: linear-gradient(to right, rgb(218, 57, 57), rgb(80, 80, 231), rgb(134, 58, 189), violet);
    padding: 2px;
   
}

.gender .gender-pic{
    width: 196px;
    background-color:#151329;
    border-radius: 15px;
    border:none
}

.click{
    box-shadow: 8px 20px 28px #0d0d25;
}

.gender .gender-pic img{
    height: 100px;
}


/*-------------------------------------------------------------------AGE------------------------------------------------------------------*/

#rangeValue {
    position: relative;
    display: inline-block;
    text-align: center;
    font-size: 4em;
    color: #fff;
    font-weight: 400;
    background-color: #1F1D36;
    padding: 8px 35px;
    border-radius: 50%;
    margin: 10px auto;
}

.age-range {
    width: 400px;
    height: 15px;
    -webkit-appearance: none;
    background: #111;
    outline: none;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);
    margin: 20px auto;
}

  .age-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #f560d5;
    cursor: pointer;
    border: 4px solid #333;
    box-shadow: -407px 0 0 400px #b45ba1;
  }

  /*-------------------------------------------------------------------WEIGHT------------------------------------------------------------------*/

 .weight {
      margin: 30px auto;
      background-color: #2e2b50;
      padding: 8%;
      border-radius: 30% 30% 15% 15%;
      display: inline-block;
      border: 5px solid #1a1922;
      box-shadow: 0 10px 16px rgb(63, 57, 57);
  }
.weight .weight-range{
    background: #1a1922;
    -webkit-appearance: none;
    outline: none;
    border-radius: 15px;
    overflow: hidden;

}
.weight-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fadff4;
    cursor: pointer;
    border: 4px solid #1a1922;
    box-shadow: -407px 0 0 400px #fff;
  }

  #weightRange {
    position: relative;
    display: inline-block;
    text-align: center;
    font-size: 3em;
    color: #1F1D36;;
    font-weight: 400;
    background-color: #fff;
    padding: 15px 20px;
    border-radius: 50%;
    margin: 10px auto;
  }
 /*-------------------------------------------------------------------BUTTON------------------------------------------------------------------*/

 a{
     text-decoration: none;
     color: #fff;
 }
 a:hover{
     color: #fff;
 }

 .button{
    display: inline-block;
    width: 80px;
    margin: 10px auto;
    background-color: #181530;
    padding: 10px;
    border-radius: 15px;
    border: 2px solid #502647;

 }

 .button:hover{
     background-color: #502647;
     box-shadow: 0 8px 5px #2c2b2c;
 }

/*-------------------------------------------------------------------Second Page--------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------*/
h3{
    margin: 20px auto;
   
}
.scale{
    position: relative;
}
.scale .centi{
    background-color:  #b18ea9;
    display: inline-block;
    padding: 3%;
    width: 80px;
    border-radius: 15px 0 0 15px;
    cursor: pointer;
    text-align: center;
}
.scale .feet{
    background-color:  #b18ea9;
    display: inline-block;
    padding: 3%;
    width: 80px;
    border-radius: 0 15px 15px 0;
    cursor: pointer;
    
}

.scale .select{
    background-color: #1F1D36;
     border: 2px solid #b18ea9;
}


.height-range input{
    position: relative;
    transform: rotate(-90deg);
    float: right;
    top: 250px;
    right: 150px;
    width: 600px;
    overflow: hidden;
    background: #1F1D36;
    -webkit-appearance: none;
    outline: none;
}

.height-range input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    background: #e7cf46;
    cursor: pointer;
    border: 3px solid #333;
    box-shadow: -407px 0 0 400px #e7b017;
  }


.height-image img{

      position: relative;
      top: 120px;
      height: 440px;
      width: 330px;
      display: inline-block;
  }

.scale .height-value{
    position: relative;
    top: 30px;
    padding: 10px;
    margin: 5px auto;
    background-color: #1F1D36;
    border: 2px solid #b18ea9;
    border-radius: 15px;
}

.hb{
    position: relative;
    top: 180px;
}

/*-------------------------------------------------------------------Third Page--------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------*/

.result{
    display: inline-block;
    background:linear-gradient( to bottom right  , rgb(221, 3, 50)   , rgb(14, 10, 68));
    padding: 40px 55px;
    margin: 20px auto 10px;
    border-radius: 50px;
    box-shadow: 0 15px 30px rgb(31, 29, 29);
    border: 3px solid #b18ea9;
    height: 250px;
    width: 250px;
}
.body-composition{
    margin: 50px auto 10px;
}
.compo{
    margin: 5px auto;
    background-color: #12121d;
    display: inline-block;
    padding: 30px;
    height: 125px;
    width: 300px; 
    border-radius: 15px;
    font-size: 1.8rem;
}
.content{
    font-size: 1.8rem;
    color: rgb(255, 208, 0);
}

.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  
  /* The actual popup (appears on top) */
  .popup .popuptext {
    visibility: hidden;
    width: 280px;
    background-color: #1F1D36;
    color: #ffffff ;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    top: 125%;
    left: 40%;
    margin-left: -80px;
  }
  
  /* Popup arrow */
  .popup .popuptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 30%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }
  
  /* Toggle this class when clicking on the popup container (hide and show the popup) */
  .popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
  }
  
  /* Add animation (fade in the popup) */
  @-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
  }
  
  @keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
  }