.bmr{

    height : 100vh;
    width : 100%;
    display : flex;
    justify-content: center;
    align-items: center;
}

.bmr-det{
    display : flex;
}
.bmr-content{
    border : 2px solid var(--snd-bg-color);
    border-radius : 20px;
    height : 640px;
    width : 500px;
    padding : 25px 23px;
    transform : 0.5s ease-in-out;
}

.bmr-content h2{
    font-size : 4.5rem;
    color : var(--snd-bg-color);
    margin-bottom: 25px;
    margin-left : 25px;
}

.bmr-content.gen-ex{
    display : flex;
}

.gen-ex{
    position : relative;
    margin-bottom : 20px;
}

.gen-ex input {
    border : 1px solid #999;
    border-radius : 5.5px;
    width : 45%;
    height : 40px;
    padding : 0 10px;
    font-size : 1.35rem;
    margin-left : 15px;
}

.gen-ex input:hover{
    border : 1px solid var(--snd-bg-color);
}

.gen-ex input:focus{
    border : 1px solid var(--snd-bg-color);
} 

#genlabel {
    font-size : 1.5rem;
    color : #666;
    margin-left : 20px;
    color: var(--snd-bg-color);
    font-weight: 300;
}
#exlabel{
    font-size : 1.5rem;
    color : #666;
    margin-left : 167px;
    color: var(--snd-bg-color);
    font-weight: 300;
}

.he-we{
    display : flex;
    margin-bottom : 20px;

}
.he-we input{
    border : 1px solid #999;
    border-radius : 5.5px;
    width: 35%;
    height : 40px;
    padding : 0 10px;
    font-size : 1.35rem; 
    margin-left : 15px;
}
.he-we input:hover{
    border : 1px solid var(--snd-bg-color);
}
.he-we input:focus{
    border : 1px solid var(--snd-bg-color);
}
#weight{
    font-size : 1.5rem;
    color : #666;
    margin-left : 20px;
    color: var(--snd-bg-color);
    font-weight: 300;
}
#height{
    font-size : 1.5rem;
    color : #666;
    margin-left : 92px;
    color: var(--snd-bg-color);
    font-weight: 300;
}


.age-fat{
    display : flex;
    position : relative;
    margin-bottom : 15px;
}

.age-fat input {
    border : 1px solid #999;
    border-radius : 5.5px;
    width : 45%;
    height : 40px;
    padding : 0 10px;
    font-size : 1.35rem;
    margin-left : 15px;
}

.age-fat input:hover{
    border : 1px solid var(--snd-bg-color);
}

.age-fat input:focus{
    border : 1px solid var(--snd-bg-color);
} 

#age{
    font-size : 1.5rem;
    color : #666;
    margin-left : 20px;
    color: var(--snd-bg-color);
    font-weight: 300;
}
#bodyfat{
    font-size : 1.5rem;
    color : #666;
    margin-left : 188px;
    color: var(--snd-bg-color);
    font-weight: 300;
}

.nbodyfat a{
    color : blue;
    font-size : 1.4rem;
    margin-left : 270px;
}

.btn-calculate button{
    background-color: rgba(255, 255, 255, 0.508);
    border : 1px solid var(--snd-bg-color);
    margin-top : 20px;
    padding : 1rem 1.5rem;
    font-size : 1.65rem;
    width : 90%;
    height : 45px;
    border-radius : 5.5px;
    margin-left : 15px;
}

.btn-calculate button:hover{
    box-shadow: rgb(1, 0, 34) 0px 0px 5px;
    background-color: var(--snd-bg-color);
    color: var(--text-color);
}

.bmrtext{
    display : flex;
    margin-left : 25px;
    font-size: 2rem;
    font-weight: 450;
    color : black;
    margin-top : 20px;
    margin-bottom: 0px;
    left : 0;
}

.tdeetext{
    display : flex;
    margin-left : 25px;
    font-size: 2rem;
    font-weight: 450;
    color : black;
    margin-top : -5px;
    margin-bottom: 0px;
    left : 0;


}

h2.bmrrate{
    display : flex;
    left : 0;
    height : 43px;
    width : 92%;
    font-size : 2rem;
    justify-content : center;
    border-radius: 5px;
    margin-top : 5px;
    padding : 10px 10px;
    background-color: white;
}
h2.tdee{
    display : flex;
    justify-content : center;
    align-items : center;
    height : 43px;
    width : 92%;
    margin-top : 5px;
    font-size : 2rem;
    border-radius: 5px;
    background-color: white;
}
.error-msg{
    display : flex;
    justify-content : center;
   
    color : #ff0000;
    font-size : 2rem;
    margin-top : 20px;
    margin-left : 15px;
}


.footer{
    position : relative;
    scroll-snap-align : start;
    width : 100%;
    height : 130px;
    display : column;
    background : var(--snd-bg-color);
    margin-top : 45px;
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
}

.socialmedia{
    text-align: center;
    margin : auto; 
    margin-bottom: 40px;
    
}

.socialmedia a{
    font-size: 27px;
    border : 1.5px solid var(--main-color);
    color : var(--main-color);
    height: 50px;
    width: 50px;
    line-height: 50px;
    display : inline-block;
    margin-left: 10px;
    margin-bottom : 20px;
    transform: 0.5s ease-in-out;
    border-radius: 60%;
    margin-top : 20px;
}

.socialmedia a:hover{
    transform: scale(1.1) translatey(-3px); 
    box-shadow: var(--main-color) 0px 0px 10px;
    
}

footer.copyright {
    background-color: var(--snd-bg-color);
    text-align: center;
    margin : auto;
    margin-bottom: 40px;
    font-size : 1.7rem;
    color : var(--text-color);
}

/* Resposive Design */

@media (max-width: 1200px){
    #exlabel{
        margin-left : 173px;
    }
    #height{
        margin-left: 100px;
    }
    #bodyfat{
        margin-left : 191px;
    }
}
@media (max-width:991px){
    #exlabel{
        margin-left : 173px;
    }
    #height{
        margin-left: 100px;
    }
    #bodyfat{
        margin-left : 191px;
    }
}

@media (max-width:618px){
    #exlabel{
        margin-left : 173px;
    }
    #height{
        margin-left: 100px;
    }
    #bodyfat{
        margin-left : 191px;
    }
}

@media (max-width:400px){
    .bmr-content{
        margin-top : 70px;
    }
    .gen-ex input {
        width : 44.5%;   
    }

    .gen-ex input:hover{
        border : 1px solid var(--snd-bg-color);
    }

    .gen-ex input:focus{
        border : 1px solid var(--snd-bg-color);
    } 
    #exlabel{
        margin-left : 111px;
    }
    #height{
        margin-left: 59px;
    }
    #bodyfat{
        margin-left : 129px;
    }
}