[q="q"]::before{
content: "Question.  ";
 background: linear-gradient(to right, red, blue, green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;

}

.answer::before{
color: gardient( to right, red, blue,green);
background: linear-gradient(to right, red, blue, green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;

}


[line="A"]::before{
content: "(A)  Ans :";
padding: 0 5px;


}


[line="B"]::before{
content: "(B)  Ans :";
padding: 0 5px;

}

[line="C"]::before{
content: "(C)  Ans :";
padding: 0 5px;

}

[line="D"]::before{
content: "(D)  Ans :";
padding: 0 5px;

}




  /* Add CSS styles for your quiz here */
        .question {
            margin-bottom: 10px;
        }
        .answer {
            display:flex;
            cursor: pointer;
            padding: 5px 30px;
            margin-bottom: 3px;
            border: 1px solid #ccc;
            color: black;
            background-color: rgba( 57, 236, 249, 0.1 );
            border-radius: 10px;

        }
 .answer:hover{
      
          transform: scale(1.01);



}
        .correct {
            background-color: rgba( 24, 115, 18, 0.4);
            color: white;
            padding: 5px 30px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
             cursor: not-allowed;
            box-shadow: 1px 7px 9px rgba(0, 0, 0, 0.6);
            border-radius: 10px;

        }
    
     
        .incorrect {
            border-radius: 10px;
            margin-bottom: 3px;
            color: white;
            background-color: rgba( 255, 0, 0, 0.3);
            padding: 5px 30px;
            margin: 2px;
            border: 1px solid #ccc;
            
        }
        .student-choice {
            font-weight: bold;
            margin-top: 10px;
        }
        #result {
            font-weight: bold;
            margin-top: 10px;
        }