*{
    margin : 0;
    padding 0;
    font-family : 'poppins',sans-serif;
    box-sizing : border-box;
}
body{
    background-color: mediumspringgreen;
}
.app{
    background-color: white;
    width : 90%;
    max-width: 600px;
    margin : 100px auto 0;
    border-radius: 10px;
    padding : 30px;
}
.app h1{
    font-size : 25px;
    color : #001e4d
    font-weight : 600px;
    border-bottom : 1px solid #333;
    padding-bottom : 30px;
}
.quiz{
    padding : 20px 0;

}
.quiz h2{
    font-size : 18px;
    color : #001e4d;
    font-weight : 600px;
}
.btn {
    background : white;
    color : #222;
    width : 100%;
    font-weight : 500;
    border : 1px solid #222;
    padding : 10px;
    margin : 10px 0;
    text-align: left;
    border-radius : 4px;
    cursor : pointer;
    transition : all 0.3s;
}
.btn:hover:not([disbaled]){
    background : #222;
    color : white;
}
.btn : disabled{
cursor : no-drop;
}
#next{
    background : #001e4d;
    color :#fff;
    font-weight : 500;
    width : 150px;
    border : 0;
    padding : 10px;
    margin : 20px auto 0;
    border-radius : 4px;
    cursor : pointer;
    display : none;
}
.correct{
    background : #9aeabc;
}
.incorrect{
    background : #ff9393;
}