@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
:root{
    --primary-color:#007FFF;
    --dark-gray:#6B7280;
    --off-white:#F3F4F6;
}
body{
    font-family: 
    'Montserrat',
     sans-serif;
     display: block;
     margin:0;
  
}
.link{
    text-decoration: none;
    padding:0.5rem 1rem;
}
.list-non-bullet{
    list-style:none;
}
.list-item-inline{
    display:inline;
    padding: 0rem 0.5rem;
}
.navigation{
    background-color: var(--primary-color);
    color:white;
    padding: 1rem;
    border-bottom-left-radius: 1rem;
}

.navigation .nav-brand{
    font-weight: bold;
    
}

.navigation .nav-pills{
    text-align: right;
}

.navigation .link{
    color:white;
}

.navigation .link-active{
    font-weight: bold;
}
.container{
    padding:0rem 1rem;/**Paddin:TRBL,Top Right Bottom Left**/
}

.container-center{
    max-width: 600px;
    margin:auto
}
.section{
    padding:2rem;
    text-align: center;
   
}
.section h1{
    text-align: center;
    font-size: 3rem;
    
}
.ow{
    background-color: var(--off-white);
}

label{
    text-align: center;
    color: var(--primary-color);
    font-size: 2rem;
}
input{
    padding: 1rem 1rem 0.5rem 0.5rem;
    border-radius: 1rem;
    border-color:  var(--primary-color);
    text-align: center;
}
#is-triangle-btn{
    background-color: var(--primary-color);
    border-radius: 1rem;
    color: white;
    border-color: var(--primary-color);
    width: 10rem;
    height: 3rem;
    
}
#submit-answer-btn{
    background-color: var(--primary-color);
    border-radius: 0.5rem;
    color: white;
    border-color: var(--primary-color);
    width: 10rem;
    height: 3rem;
}
#area-button{
    background-color: var(--primary-color);
    border-radius: 0.5rem;
    color: white;
    border-color: var(--primary-color);
    width: 10rem;
    height: 3rem;
}

#hypotenuse-button{
    background-color: var(--primary-color);
    border-radius: 0.5rem;
    color: white;
    border-color: var(--primary-color);
    width: 10rem;
    height: 3rem;
}
.question-container{
 font-size: 1.5rem;
}
@media(max-width:768px){
    html{
        font-size:45%;
    }
}
@media(max-width:998px){
    html{
        font-size: 55%;
    }
}