:root{
    --primary-color:#e879f9;
}
/**navigation style**/
.list-item{
display: inline; 
padding: 0rem 0.5rem;   
text-decoration: none;
text-align: right;
font-weight: bold;
}
.Un-list{
    list-style: none;
}
.nav-container{
    background-color: var(--primary-color);
    border-radius: 0.3rem;
    padding: 1rem;
}
.nav-header{
    font-size: 1.7rem;
    font-weight:bold;
    color:black;
}
body{
    background-color: black;
    color:var(--primary-color);
    text-align: center;
    }
    /**button styles**/
.btn{ 
    background-color:var(--primary-color);
    border-color: hwb(292 18% 48%);
    padding: 1rem;
    border-radius: 1.5rem;
    font-size: large;
    cursor: pointer;
    margin: 1rem auto;
    display: block;
    color:black;
} 
/** hypotenuse styles**/  
.input-lable{
    display: block;
    width: 300px;
    font-size: large;
    padding: 1rem;
    margin: auto;
} 
.container{
    padding: 7rem;
    width: fit-content;
    margin: auto;
}
/**area Page**/
.base{
    display: block;
    padding: 0.5rem;
    font-size: larger;
    font-weight: bold;
    padding: 1.5rem;
}
.height{
    display: block;
    padding: 1.5rem;
    font-weight: bold;
    font-size: larger;
}
.input-box{
    display: block;
    margin: auto;
    height: 40px;
    width: 30%;
    border-radius: 15px;

}
.input-text.angle-input{
    font-size: 14px;
    outline: #fff;
    
    margin: 1rem;
    border-radius: 0.5rem;
    width: 100%;
    max-width: 300px;
    height: 40px;
}
.side-input{
    font-size: 14px;
    outline: #fff;
    padding: 1rem 1rem;
    border-radius: 0.5rem;
    width: 100%;
    max-width: 258px;
    display: block;
    margin: auto;
}
.output{
    font-size: large;
    margin:1rem;
    font-weight: BOLD;
}
/**quiz page **/
.form{
    text-align:center;
}
.question-container{
    padding: 1rem;
    border-color:var(--primary-color);
    border-style:outset;
    border-width: 15px;
}
.question{
    text-align:justify;
}
.options{
    border-radius: 50%;
    top:0;
    left:0;
}