*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

html{
    scroll-behavior:smooth;
}


body{

    background:
    radial-gradient(circle at top,#1e3a8a33,transparent 35%),
    radial-gradient(circle at bottom,#7B2EFF33,transparent 35%),
    #0f172a;

    color:white;

    padding:40px;

}


/* Container */

.container{

    max-width:900px;

    margin:auto;

}



/* Questions */

.question{

    background:#1e293b;

    border:2px solid transparent;

    border-radius:14px;

    padding:18px;

    margin-bottom:25px;


    background-image:

    linear-gradient(#1e293b,#1e293b),

    linear-gradient(
        to right,
        #00E5FF,
        #7B2EFF,
        #00E5FF
    );


    background-origin:border-box;

    background-clip:
    padding-box,
    border-box;


    box-shadow:
    0 8px 25px rgba(0,0,0,.35);


    transition:.3s;


}



.question:hover{

    transform:
    translateY(-6px)
    scale(1.01);


    box-shadow:

    0 15px 35px rgba(0,229,255,.18);

}




/* Result Box */


.result-box{


    width:90%;

    max-width:500px;


    margin:40px auto;


    padding:30px;


    background:#1e293b;


    border-radius:20px;


    text-align:center;


    border:2px solid transparent;


    background-image:

    linear-gradient(#1e293b,#1e293b),

    linear-gradient(
        to right,
        #00E5FF,
        #7B2EFF,
        #00E5FF
    );


    background-origin:border-box;


    background-clip:
    padding-box,
    border-box;


    font-size:25px;

    font-weight:bold;


    display:none;


    animation:showResult .5s ease;


}



.result-box h2{

    color:#00E5FF;

    margin-bottom:15px;

}



.result-box p{

    color:white;

    font-size:22px;

}




@keyframes showResult{


from{

    opacity:0;

    transform:
    translateY(30px);

}


to{

    opacity:1;

    transform:
    translateY(0);

}

}




/* Titles */


h1,
p{

    font-size:25px;

    font-weight:bold;

    text-align:center;


    background:

    linear-gradient(
        to right,
        #00E5FF,
        #7B2EFF,
        #00E5FF
    );


    background-size:200% auto;


    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;


    animation:

    gradientMove 4s linear infinite;

}



@keyframes gradientMove{


0%{

background-position:0%;

}


100%{

background-position:200%;

}

}

label{
    font-size:18px;
}

@media(max-width:600px){

label{
    font-size:15px;
}

}


/* Question Title */


.question h3{

    display:flex;

    align-items:center;

    color:#00E5FF;

    direction:rtl;

}



.question h3 .number{

    color:#c694ff;

    font-weight:bold;

    min-width:35px;

}



.question h3 span:last-child{

    direction:rtl;

}



/* Code */


pre{


    background:#111827;


    color:#ffffff;


    padding:18px;


    border-radius:14px;


    margin:20px 0;


    overflow:auto;


    font-size:19px;


    line-height:1.8;


    font-family:"Courier New",monospace;


    font-weight:bold;


    direction:ltr;


    text-align:left;



    box-shadow:


    inset 0 0 0 1px #334155,

    0 10px 30px rgba(0,0,0,.35);


}



/* Answers */


label{


    display:flex;

    align-items:center;


    gap:10px;


    font-weight:bold;


    padding:12px 15px;


    margin:10px 0;


    background:#334155;


    border-radius:10px;


    cursor:pointer;


    transition:.3s;


    border:2px solid transparent;

}



label:hover{


    background:#475569;


    transform:
    translateX(-5px);


}



label:has(input:checked){


    border-color:#00E5FF;


    background:#1e3a5f;


}



input[type="radio"]{


    margin-right:10px;


    accent-color:#00E5FF;

}



/* Button */


button{


    display:block;


    margin:30px auto;


   padding:15px 25px;
width:100%;
max-width:350px;


    border:none;


    border-radius:12px;


    background:


    linear-gradient(
        to right,
        #00E5FF,
        #7B2EFF
    );


    color:#000;


    font-size:18px;


    font-weight:bold;


    cursor:pointer;


    transition:.3s;



    box-shadow:


    0 10px 25px rgba(123,46,255,.35);


}



button:hover{


    transform:scale(1.05);


    box-shadow:


    0 0 35px rgba(0,229,255,.5);


}




/* Correct & Wrong */


.correct-answer{


    background:
    rgba(34,197,94,.15)
    !important;


    color:#4ade80;


    border:
    2px solid #22c55e;


}



.wrong-answer{


    background:
    rgba(239,68,68,.15)
    !important;


    color:#f87171;


    border:
    2px solid #ef4444;


}



.disabled{


    pointer-events:none;

}



/* Mobile */

@media(max-width:600px){


body{

    padding:20px;

}


h1,p{

    font-size:21px;

}


pre{

    font-size:16px;

}


.question{

    padding:14px;

}


}