body{

font-family:Arial, Helvetica, sans-serif;
background:#eef7ff;
text-align:center;

}

.container{

width:420px;
margin:40px auto;
background:white;
padding:30px;
border-radius:15px;
box-shadow:0px 0px 12px lightgray;

}

table{

margin:auto;
font-size:42px;
border-collapse:collapse;

}

td{

width:60px;
height:60px;
text-align:center;

}

hr{

border:2px solid black;

}

input{

margin-top:20px;
padding:10px;
font-size:22px;
width:170px;
text-align:center;

}

button{

margin:12px;
padding:10px 18px;
font-size:18px;
cursor:pointer;
border:none;
border-radius:8px;
background:#2c7be5;
color:white;

}

button:hover{

background:#1b5fc4;

}

#feedback{

margin-top:20px;
font-size:24px;
font-weight:bold;

}

#hint{

margin-top:20px;
font-size:18px;
color:#d35400;
font-weight:bold;

}

.good{

color:green;

}

.bad{

color:red;

}
/* Back to Home Button */

.back-home{
    text-align:center;
    margin:40px 0 20px;
}

.back-home a{
    display:inline-block;
    padding:14px 28px;
    background:#2563eb;
    color:#fff;
    text-decoration:none;
    font-size:18px;
    font-weight:bold;
    border-radius:10px;
    transition:0.3s;
    box-shadow:0 5px 12px rgba(0,0,0,0.15);
}

.back-home a:hover{
    background:#1d4ed8;
    transform:translateY(-3px);
}

/* Footer */

.footer{
    text-align:center;
    padding:20px;
    font-size:16px;
    color:#555;
}
/* ===========================
   Quick Help Section
=========================== */

.quick-help{
    max-width:360px;
    margin:20px auto;
    padding:10px;
    text-align:center;
    background:#f8fffe;
    border:1px solid #14b8a6;
    border-radius:8px;
    font-size:13px;
    line-height:1.4;
}

.quick-help strong{
    color:#0f766e;
}

.quick-help-btn{
    display:inline-block;
    margin-top:8px;
    padding:6px 14px;
    background:#25D366;
    color:#fff;
    text-decoration:none;
    font-size:13px;
    font-weight:bold;
    border-radius:5px;
}

.quick-help-btn:hover{
    background:#1ebe5d;
}

/* Mobile */

@media (max-width:600px){

    .quick-help{
        max-width:300px;
        padding:8px;
        font-size:12px;
    }

    .quick-help-btn{
        font-size:12px;
        padding:6px 12px;
    }

}