*{
    box-sizing: border-box;
}
body{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.quiz-app{
    margin: 20px auto;
    width: 800px;
    background-color: aqua;
    padding: 15px;
}
.quiz-app .quiz-info{
    display: flex;
    background-color: rgb(243, 119, 187);
    justify-content: space-evenly;
    border-radius: 20px;
    padding: 10px 0;
}
.quiz-app .quiz-area{
    background-color: white;
    padding: 1px 20px;
    border-radius: 20px;
    margin: 30px 0;
}
.quiz-app .answers-area{
    background-color: rgb(227, 223, 255);
    padding: 20px;
    border-radius: 20px;
}
.quiz-app .answers-area .answer{
    background-color: rgb(252, 199, 242);
    padding: 10px 5px;
    font-size: 20px;
}
.quiz-app .answers-area .answer:not(:last-child){
    border-bottom: 1px solid white;
}
.quiz-app .answers-area .answer input[type="Radio"]:checked +label{
   color: rgb(66, 66, 232);
}
.quiz-app .answers-area .answer label{
   cursor: pointer;
   font-weight: bold;
   margin-left: 15px;
}
.quiz-app .submit-button{
    background-color: transparent;
    padding: 7px 17px;
border: 1px solid blue;
border-radius: 20px;
font-weight: bold;
margin: 20px auto;
font-size: 15px;
display: flex;
justify-content: center;
cursor: pointer;
}
.quiz-app .submit-button:hover{
   background-color: blue;
    color: white;
}
.quiz-app .bullets{
    border-top: 1px solid rgb(232, 86, 205);
    background-color: white;
    text-align: center;
    padding: 20px;
    display: flex;
}
.quiz-app .bullets .spans{
    flex: 1;
    display: flex;

}
.quiz-app .bullets .spans span{
    width: 20px;
    height: 20px;
    background-color: #DDD;
    margin-right: 5px;
    border-radius: 50%;
    
}
.quiz-app .bullets .spans span.on{
 background: linear-gradient(blue,white,red);
}
.quiz-app .results{
    margin: 20px;
    text-align: center;
    font-weight: bold;
}
.quiz-app .results span{
   font-size: 18px;
   margin-right: 5px;
}
.quiz-app .results span.bad{
color: red;
}
.quiz-app .results span.good{
    color: rgb(159, 142, 244);
}
    .quiz-app .results span.perfect{
    color: blue;
}