@import url('https://fonts.googleapis.com/css?family=Poppins: wght@200; 300;400;500; 600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    background-image: linear-gradient(to right,goldenrod,gold,goldenrod);
}

.app{
background: rgba(255, 255, 255, 0.63) ;
width: 90%;
max-width: 600px;
margin: 100px auto 0;
border-radius: 20px;
padding: 30px;
}
.app h1{
font-weight: 25px;
color: #001e4d;
font-weight: 600;
border-bottom: 2px solid #333;
padding-bottom: 30px;
}
.quiz{
padding: 20px 0;
}
.quiz h2{
font-size: 18px;
color: #001e4d;
font-weight: 600;
}
.btn{
background: #fff;
color: #222;
font-weight: 500;
width: 100%;
border: 1px solid #222;
padding: 10px;
margin: 10px 0;
text-align: left;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
}
.btn:hover:not([disabled]){
    background-color: #ecea45;
    color: #362500;
}
.btn:disabled{
    cursor: no-drop;
}
#next-btn{
background: #001e4d;
color: #fff;
font-weight: 500;
width: 150px;
border: 0;
padding: 10px;
margin: 20px auto 0;
border-radius: 4px;
cursor: pointer;
justify-content: center;
display: none;
}
.correct{
    background: #9aeabc;
}
.incorrect{
 background: #ff9393;
}