body{
    background-color: #faf0e6;
    margin: 0;
    padding: 0rem;
    line-height: 3rem;
     font-family: candara; 

    
    
}

nav{

    background-color: #a32638;
    padding: 1.5rem;
    
    margin-bottom: 2rem;

}
a{
    text-decoration: none;
    color: #f9fafb;
    padding: 0.5rem;
    font-size: larger;
  
    padding-left: 3rem;
    
}
.container{
    width: 90%;
	margin: auto;
}
#head{
    text-align:center
}
.angle-input
{
    display: block;
    margin-left:33vw;
    width:27rem;
    height:1.8rem;
   


}
.angle{
    margin-left:33vw;
    font-size: large;
}
.btn{
    margin-left:33vw;
    width:27.5rem;
    height:2.5rem;
    border-radius: 1px;
    background-color:  #a32638;
    color: #f9fafb;
    border-style: none;
   
    font-weight: bold;
    font-size:18px
}
#output-div{
    text-align: center;
    font-size: x-large;
}

#hypotenuse-btn{
    margin-left:33vw;
    width:25.5rem;
    height:2.5rem;
    border-radius: 1px;
    background-color:  #a32638;
    color: #f9fafb;
    border-style: none;
    font-size: large;
    

}




/* Quiz triangle styles are follow */

label,input{
    display: inline;
}

#div1{
    
    padding:1rem;
    margin-left:25rem;
    margin-right:25rem;
    height: 130px;
    border-radius: 0.5rem;
    border: 2px solid #a32638;
}
.quiz-form{
    line-height: 1.5rem;
    
    
}

#div2{
    
    padding:1rem;
    margin-left:25rem;
    margin-right:25rem;
    height: 120px;
    border-radius: 0.5rem;
    border: 2px solid #a32638;
    margin-bottom: 1rem;
} 


#div3{
    
    padding:1rem;
    margin-left:25rem;
    margin-right:25rem;
    height: 150px;
    border-radius: 0.5rem;
    border: 2px solid #a32638;
    margin-bottom: 1rem;
}


#quiz-heading{
    text-align: center;
}

#submit-ans-btn{
   width:28rem ;
   margin-left:28.5rem;
   height: 2.8rem;
   background-color: #a32638;
   border-style: none;
   color: #f9fafb;
   border-radius: 4px;
   font-size: 18px;

}
#output{
    text-align: center;
    font-size: x-large;
}

/* Chech Hypotenuse styles are follow */

h2{
    text-align: center;
}
#formula-hypotenuse{         
    border: 2px solid  #a32638;
    margin-left: 23rem;
    margin-right:25rem;
    height: 40px;
    padding: 0.5rem;
    text-align: center;
    
}
.hypo{
    margin-left:32vw;
    font-size: larger;

}
.side-input{
    display: block;
    margin-left:32vw;
    width:27rem;
    height:1.8rem;
    padding-left: 0.5rem;
   
}

#hypotenuse_btn{
    margin-left:33vw;
    width:24.5rem;
    height:2.5rem;
    border-radius: 1px;
    background-color: #5b21b6;
    color: #f9fafb;
    border-style: none;
    font-weight: bold;
}

/* Chech Area of Triangle styles are follow */

#base{
    display: block;
    margin-left:27vw;
    width:27rem;
    height:1.8rem;
   
}
#height{
    display: block;
    margin-left:27vw;
    width:27rem;
    height:1.8rem;
   
}
.hypo-area{
    margin-left:27vw;
    font-size: large;

}

#check-area-btn{
    
        margin-left:28vw;
        width:26.5rem;
        height:2.5rem;
        border-radius: 1px;
        background-color: #a32638;
        color: #f9fafb;
        border-style: none;
        
        font-weight: bold;
      
}
#output-h2{
    text-align: center;
    font-size: x-large;
}






.link{
    text-decoration: none;
    padding: 0rem 1rem;
    margin-bottom: 1rem;
    margin-top: 1rem;
} 
  
.link-secondary{
    
    
  
    background-color:var(--primary-color);
    border-radius: 0.5rem;
    color: #a32638;
    margin-left: 37rem;
    font-size: 1.4rem;
    padding: 0.5rem;
    border: 1px solid #a32638;
}