*{

margin:0;

padding:0;

box-sizing:border-box;

font-family:'Manjari',sans-serif;

}

body{

background:#f3f4f6;

padding:20px;

}

.container{

max-width:1000px;

margin:auto;

}

.card{
background:white;
padding:35px;
border-radius:24px;
box-shadow:0 10px 35px rgba(0,0,0,0.08);
margin-bottom:20px;
border:1px solid #e5e7eb;
}

.hidden{

display:none;

}

.logos{

display:flex;

justify-content:center;

gap:20px;

margin-bottom:20px;

}

.logo{

width:100px;

height:100px;

object-fit:contain;

}

h1{

text-align:center;

margin-bottom:15px;

color:#142c6e;

}

.intro{

line-height:1.8;

text-align:center;

margin-bottom:20px;

}

input,select{

width:100%;

padding:15px;

margin-top:15px;

border-radius:10px;

border:1px solid #d1d5db;

font-size:16px;

}

button{

width:100%;

padding:15px;

margin-top:20px;

border:none;

border-radius:12px;

background:#2563eb;

color:white;

font-size:16px;

font-weight:bold;

cursor:pointer;

}

.topbar{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:25px;
font-weight:bold;
font-size:18px;
background:#142c6e;
padding:15px 20px;
border-radius:16px;
color:white;
}

.question{
font-size:30px;
margin-bottom:30px;
line-height:1.9;
color:#111827;
font-weight:700;
padding:20px;
background:#f9fafb;
border-radius:18px;
border-left:6px solid #2563eb;
}	

.options{

display:grid;

gap:15px;

}

.option-btn{
width:100%;
padding:20px 24px;
border:none;
border-radius:18px;
background:white;
border:2px solid #e5e7eb;
color:#111827;
font-size:18px;
font-weight:600;
line-height:1.8;
text-align:left;
cursor:pointer;
transition:all 0.25s ease;
box-shadow:0 4px 10px rgba(0,0,0,0.04);
}

.option-btn:hover{
background:#eff6ff;
border-color:#2563eb;
transform:translateY(-2px);
}

.correct{

background:#22c55e !important;

color:white !important;

}

.wrong{

background:#ef4444 !important;

color:white !important;

}

#result-box{

margin-top:20px;

font-size:20px;

line-height:1.8;

font-weight:bold;

}

#certificate-area{

position:relative;

width:100%;

max-width:1400px;

margin:auto;

}

.certificate-bg{

width:100%;

display:block;

border-radius:20px;

}

.certificate-overlay{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

}

/* NAME */

.certificate-name{

position:absolute;

top:37%;

left:44%;

transform:translateX(-50%);

font-family:'Great Vibes',cursive;

font-size:72px;

color:#142c6e;

}

/* GRADE */

.certificate-grade{

position:absolute;

top:8%;

right:2%;

font-size:18px;

font-weight:bold;

color:#fff8dc;

text-align:right;

text-shadow:0 2px 5px rgba(0,0,0,0.4);

}

/* CERTIFICATE ID */

.certificate-id{

position:absolute;

top:2%;

right:2%;

font-size:12px;

font-weight:bold;

color:#fff8dc;

text-align:right;

line-height:1.6;

text-shadow:0 2px 5px rgba(0,0,0,0.4);

}

@media(max-width:768px){

.certificate-name{

font-size:42px;

top:38%;

}

.certificate-grade{

font-size:10px;

top:6%;

}

.certificate-id{

font-size:12px;

top:6%;

}

}
/* Prevent right-click saving of certificate template */
#certificate-area img {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

#certificate-area {
  -webkit-touch-callout: none;
  user-select: none;
}


@media(max-width:768px){

.question{
font-size:22px;
padding:18px;
}

.option-btn{
font-size:16px;
padding:18px;
}

.topbar{
font-size:14px;
flex-direction:column;
gap:10px;
}

.card{
padding:20px;
}

@media(max-width:768px){

#certificate-area{

overflow-x:auto;

padding:10px;

}

.certificate-bg{

min-width:900px;

height:auto;

display:block;

margin:auto;

}

.certificate-overlay{

min-width:900px;

}

.certificate-name{

font-size:58px;

top:34%;

}

.certificate-grade{

font-size:16px;

top:6%;

right:3%;

}

.certificate-id{

font-size:11px;

top:2%;

right:3%;

}

}


}