*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body{font-family:  sans-serif;
margin: auto;
padding:0;
}
    .card{
        padding-top: 20px;
        background-color: #0b3b50;
        border-radius: 5px;
        border: none;
        height: 100vh;
    }
    .card .quiz-info {
        width: 100%;
        display: flex;
        position: relative;
        color:#0f4755 ;
        padding:15px;
        font-size: 20px;
        font-weight: bold;
        border-radius: 70px 70px 10px  10px;
        padding-bottom: 20px;
        margin: 10px auto;
  background-color: #ccdae2;
  justify-content: space-around;
    }
     .quiz-info .category{
        max-width: 45% ;
        flex: 1;
        text-align: left;
       
    }
    .quiz-info .count{
        text-align: right;
        max-width: 50% ; flex: 1;
       
    }
    
    
    .quiz-area{
        background-color: #ccdae2;
        margin: 10px auto;
        height: 90px;
        color:#0f4755 ;
        padding: 5px;
        text-align: left;
        width: 100%;
        border-radius: 10px 10px 3px 3px;
        
    }
    .quiz-area h2{
        margin-left: 30px;
    }
    .answer-area{
        padding: 20px;
        margin: 5px auto;
        background-color: #ccdae2;
        color:#0f4755 ;
        font-weight: bold;
        font-size: 20px;
        width: 100%;
        border-radius: 3px;
        }

        .answer{
            margin-left: 0;
            padding:8px;
            
        }
        .answer:not(:last-child){
            border-bottom: 2px solid #1a6d81;
        }
        .answer input[type="Radio"]:checked + label{
            color: #0075ff;
        }
        .answer label{
            cursor: pointer;
            margin-left: 8px;
            }

  .btn{
    padding: 6px;
    font-weight: bold;
    color:#eaedee ;
    font-size: 18px;
    cursor: pointer;
    display: block;
    margin: 10px auto;
    background-color: hwb(204 14% 27%);
border: none;   
width: 100%; }

.submit-button:focus{
    outline: none;
}
.btn:hover{
    background-color: #ccdae2;
    color: #052f3a;
}

.bullets{
    background-color: #ccdae2;
    padding: 15px;
    width: 100%;
    margin: 10px auto;
    color:#1a6d81 ;
    font-weight: bold;
    position: relative;
    border-radius: 10px 10px 70px  70px;
    text-align: center;
    
    }
    .bullets .spans{
        flex: 1;
        display: flex;
       margin: auto;
        justify-content: space-between;
        align-items: center;
        font-weight: bold;
    }
    .bullets .spans span{
        width: 25px;
        height: 25px;
        background-color: #1a6d81 ;
        margin-right: 8px;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        align-items: center;
        display: flex;
        color:  #e3e7eb;
    }


.countDown{
display: flex;
justify-content: center;
margin: 8px auto;
}
.countDown .bi{
margin-right: 8px ;
margin-top: 3px;
}


    .spans span.on{
        background-color: #ccdae2;
        border: 3px solid rgb(32, 110, 141);
        color:#0f4755 ;
    }
    
    .resu{
        background-color: rgba(19, 71, 83, 0.692);
       padding-top:60px ;
        text-align: center;
        line-height: 50px;
       height: 200px;
       border-radius:4px ;
       margin: 10px auto;
    }
    .result{
        color:#7eb4c2 ;
        font-size: 24px;
        line-height: 20px;
    }
    .result span{
        font-weight: bold;
    }
    .result span.bad{
        color:#bb0e0e ;
        font-size: 30px;
    }
    .result span.good{
        color:#1a6d81 ;
        font-size: 30px;
    }
    .result span.perfect{
        color:#0ebce7 ;
        font-size: 30px;
    }
    
    .countDown{
text-align: right;
    }
    @media (max-width:500px){
        .card{height: 128vh;
            border-radius: 0;
        padding-top: 0;}
        .quiz-area{
            margin: 10px auto;
            height: 116px;
            text-align: left;
            width: 100%;
            border-radius: 3px;
            display: flex;
            justify-content: baseline;
            align-items: center;
        }

        .quiz-area h2{
            font-size: 19px;
            font-weight: bold;
            width: 100%;
        }
        .answer{
            
            height: 70px;
            font-size: 17px;
            font-weight: bold;
        }

        .quiz-info .category{
            width: 50% ;
            flex: 1;
           font-size: 17px;
            font-weight: bold;
            margin-left: 7px;
        }
        .quiz-info .count{
            text-align: right;
            width: 50% ;
            font-size: 17px;
            font-weight: bold;
        }
        .bullets{
       display:flex;
       justify-content: center;
       align-items: center;
       text-align: center;
            }

            .resu{
                margin-top: 180px auto;
                background-color: rgba(19, 71, 83, 0.692);
               padding-top:10px ;
                text-align: center;
                line-height: 50px;
               height: 200px;
               border-radius:4px ;
               margin: 10px auto;
            }

            .card .quiz-info {
                width: 100%;
                display: flex;
                position: relative;
                color:#0f4755 ;
                padding:15px;
                font-size: 20px;
                font-weight: bold;
                border-radius: 30px 30px 10px  10px;
                padding-bottom: 20px;
                margin: 10px auto;
          background-color: #ccdae2;
          justify-content: space-around;
            }
    
        }