body {
font-family: Arial, Helvetica, sans-serif;
background-color: #e9edf1;
margin: 0;
padding: 30px;
}
/* Main Wrapper */
#pageWrapper {
max-width: 1400px;
margin: auto;
background-color: #f7f9fb;
border: 6px solid #4f6f8d;
border-radius: 16px;
padding: 30px;
box-shadow: 0 0 20px rgba(0,0,0,0.12);
zoom: 0.8;
}
/* Navigation */
#topNav {
background-color: #4f6f8d;
border-radius: 10px;
padding: 15px 0;
}
#topNav ul {
list-style: none;
display: flex;
justify-content: center;
gap: 50px;
margin: 0;
padding: 0;
}
#topNav a {
text-decoration: none;
color: white;
font-size: 22px;
font-weight: bold;
transition: 0.3s;
}
#topNav a:hover {
color: #111111;
}
/* Header */
#pageHeader {
text-align: center;
padding-top: 40px;
}
#pageHeader h1 {
margin: 0;
font-size: 54px;
color: #2f4f68;
letter-spacing: 2px;
}
#pageHeader p {
margin-top: 10px;
font-size: 22px;
color: #666;
}
/* Main Layout */
#layout {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 60px;
margin-top: 70px;
}
/* Score Guide */
#scoreGuide {
width: 240px;
background-color: #f1f5f8;
padding: 25px;
border-radius: 16px;
border: 2px solid #4f6f8d;
border-left: 8px solid #4f6f8d;
box-shadow: 0 0 10px rgba(0,0,0,0.10);
}
#scoreGuide h2 {
margin-top: 0;
text-align: center;
color: #24445c;
font-size: 30px;
}
#scoreGuide ul {
padding-left: 25px;
}
#scoreGuide li {
margin-bottom: 10px;
font-size: 18px;
}
/* Calculator Area */
#calculatorArea {
text-align: center;
width: 500px;
}
/* Calculator Box */
#calculatorBox {
width: 450px;
margin: auto;
background-color: #f1f5f8;
padding: 25px;
border-radius: 16px;
border: 2px solid #4f6f8d;
border-left: 8px solid #4f6f8d;
box-shadow: 0 0 10px rgba(0,0,0,0.10);
}
#calculatorBox h2 {
margin-top: 0;
color: #24445c;
font-size: 30px;
}
#calculatorBox p {
font-size: 18px;
line-height: 1.5;
}
#calculatorBox label {
font-size: 18px;
font-weight: bold;
}
#calculatorBox input {
width: 180px;
padding: 8px;
font-size: 18px;
text-align: center;
margin-top: 6px;
}
/* Button */
#calculatorBox button {
margin-top: 15px;
padding: 12px 28px;
font-size: 18px;
border: none;
border-radius: 10px;
background-color: #6587a8;
color: white;
cursor: pointer;
}
#calculatorBox button:hover {
background-color: #4f6f8d;
color: #111111;
}
/* Results */
#scoreResult {
margin-top: 20px;
font-size: 22px;
font-weight: bold;
color: #2f4f68;
}
/* Debug Summary */
#debugSummary {
margin-top: 25px;
padding: 15px;
background-color: #eef3f7;
border-left: 6px solid #6587a8;
border-radius: 10px;
text-align: left;
}
#debugSummary h3 {
margin-top: 0;
color: #4f6f8d;
}
#debugSummary p {
font-size: 16px;
line-height: 1.5;
}
/* Error Message */
#scoreError {
margin-top: 15px;
color: red;
font-weight: bold;
font-size: 18px;
}
#scoreError:not(:empty) {
padding: 10px;
background-color: #ffe6e6;
border: 2px solid red;
border-radius: 8px;
}