body{ font-family: "Poppins", sans-serif !important;background: black !important;}
main {position: relative;z-index: 9;}
#canvas {position: absolute;top: 0;height: 100% !important;width: 100%;}
header{background: #fff; padding: 10px; border-radius: 10px;margin-top: 10px;position: relative;}
header:before {content: '';position: absolute;bottom: -50px;left: 0;width: 100%;height: 58%;background: url(../img/top-diya.png);background-size: contain;z-index: 9;}
.mainHeading{text-align: center; font-size: 55px; font-weight: 900;font-family: "Style Script", cursive;background: linear-gradient(to right, #ff0000 0%, #330867 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

.leftWhitecontainer{background: #fff; height: 100%; border-radius: 10px;padding: 40px 20px 20px;position: relative;}
.leftWhitecontainer:before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(../img/left-diya.png);background-position: top center;background-size: contain;background-repeat: no-repeat;}
.leftWhitecontainer h1{color: #000000; font-size: 28px; font-weight: 800;position: relative;}
.leftWhitecontainer select{padding: 10px; width: 100%; border: 1px solid #494949;border-radius: 6px;background: #fff;position: relative;z-index: 9;}
.leftWhitecontainer button{ border: none; background: #4FBEED; color: #fff; display: block; text-align: center; margin-top: 30px; width: 100%; padding: 12px; font-size: 25px; font-weight: 600;position: relative;z-index: 9;}
.leftWhitecontainer button:hover{background: #242424;}

.rightwhitecontainer{background: #fff; padding: 40px 20px 20px; border-radius: 10px;}
.rightwhitecontainer strong {
    font-size: 30px;
    font-weight: 700;
    display: block;
    margin-bottom: 10px;
}
.rightwhitecontainer ul {
    padding: 0px;
    margin: 0px;
}
.rightwhitecontainer ul li {
    list-style: none;
    border: 1px solid #84C5FE;
    margin-bottom: 10px;
    padding: 10px 15px;
    border-radius: 4px;
    background: #F0F8FF;
    font-size: 22px;
}
.rightwhitecontainer ul li:hover{
    border: 1px solid #23903C;
    background: #D4EDDA;    
}
.rightwhitecontainer button {
    background: #23903C;
    display: block;
    border: none;
    color: #fff;
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 20px;
    box-shadow: 3px 3px 0px #155724;
}
.rightwhitecontainer button:hover{
    box-shadow: none;
}
.correctanswer {
    margin-top: 30px;
}
.correctanswer textarea {
    width: 100%;
    border-radius: 10px;
    padding: 15px;
    border: 1px solid #23903C;
    background: #D4EDDA;
    height: 100%;
    font-size: 30px;
}