@import url('https://fonts.googleapis.com/css2?family=Cookie&family=Poppins&family=Roboto:wght@300&display=swap');
*{
margin:0;  
padding:0;
box-sizing:border-box;
}

body{
display:flex;  
justify-content:center;
align-items:center;
height:100vh;
overflow:hidden;
font-family: 'poppins', sans-serif;
background:#090221;
}

.title{
color:white; 
position:absolute;
left:50%;
transform:translate(-50%,-50%);
margin-top:23px;
font-size:15px;
}

.container{
height:430px;
width:330px;
background:#0C1033;
border-radius:5px;
}

.height-container,.weight-container{
height:150px;    
width:300px;
background:#14183B;
position:relative;
top:120px;
left:50%;
transform:translate(-50%,-50%);
}

.weight-container{
top:135px;     
}

.calculate-button{
all:unset; 
width:280px;
padding:10px;
color:white;
border-radius:5px;
background:#F90064;
position:relative;
top:95px;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
cursor:pointer;
font-size:14px;;
}

.height-title,.height-value,.weight-title,.weight-value{
color:#9CA1B5;
position:absolute;
top:17%;
left:50%;
transform:translate(-50%,-50%);
font-size:16px;
}

.height-value,.weight-value{
top:51%;  
font-size:40px;
color:white;
}

.cm,.kg{
font-size:18px;  
color:#9CA1B5;
}

.height-range,.weight-range{
-webkit-appearance:none;
height:2px;
width:270px;
background:#9CA1B5;
position:absolute;
top:83%;
left:50%;
transform:translate(-50%,-50%);
}

.height-range::-webkit-slider-thumb,.weight-range::-webkit-slider-thumb{
-webkit-appearance:none;
height:15px;
width:15px;
border-radius:50%;
background:#F90064;
transition:all .3s;
}

.height-range::-webkit-slider-thumb:hover,.weight-range::-webkit-slider-thumb:hover{
box-shadow:0 0 0 10px rgba(249,0,100,.1);      
}

.result-div{
height:350px;  
width:250px;
background:#1D2033;
border-radius:5px;
position:absolute;
top:51%;
left:50%;
transform:translate(-50%,-50%);
display:none;
transition:all 1s;
}

.result-div > span{
position:absolute;
left:50%;
transform:translate(-50%, -50%);
font-family: 'poppins', sans-serif;
}

.health_status{
color:#4AC38D;   
top:10%;
white-space:nowrap;
}

.bmi_value{
color:white;   
top:27%;
font-size:60px;
}

.normal_bmirange{
top:47%;
color:#9CA1B5;
white-space:nowrap;
}

.normalbmi_value{
top:55%;
color:white;
white-space:nowrap;
}

.status-text{
color:white; 
position:absolute;
top:66%;
text-align:center;
font-weight:300;
font-size:15px;
}

.your-result-title{
color:white;  
font-size:20px;
position:relative;
top:-40px;
left:-20px;
}

.go-back-btn{
all:unset; 
color:white;
background:#191A2E;
padding:5px;
text-align:center;
width:150px;
position:relative;
top:280px;
left:50%;
transform:translate(-50%,-50%);
}

.setting-div{
transition:all 1s;
}

a{
position:absolute; 
left:50%;
bottom:10px;
transform:translate(-50%,-50%);
white-space:nowrap;
font-family:montserrat;
font-size:10px;
color:black;
font-family: 'Poppins', sans-serif;
padding:10px;
background:white;
border-radius:5px;
width:330px;
text-decoration:none;
text-align:center;
font-size:18px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}