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;
}
/* Study Tips Layout */
.study-page {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 45px;
margin-top: 40px;
}
/* Study Cards */
.study-card {
background-color: #f1f5f8;
border: 2px solid #4f6f8d;
border-left: 8px solid #4f6f8d;
border-radius: 14px;
padding: 25px;
width: 420px;
box-shadow: 0 0 10px rgba(0,0,0,0.10);
text-align: center;
}
.subnet-card {
width: 650px;
}
.study-card h2 {
color: #24445c;
font-size: 30px;
margin-top: 0;
}
.study-card p {
font-size: 18px;
}
/* Dropdown */
#weakArea {
width: 260px;
padding: 10px;
font-size: 17px;
margin: 10px;
}
/* Tip Result Box */
.tip-box {
background-color: #eef3f7;
border: 2px solid #d5e1ea;
border-radius: 10px;
padding: 15px;
margin-top: 20px;
min-height: 60px;
color: #2f4f68;
font-weight: bold;
line-height: 1.5;
}
/* Subnet Table */
.subnet-table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
font-size: 16px;
}
.subnet-table th {
background-color: #000000;
color: white;
padding: 10px;
}
.subnet-table td {
padding: 8px;
text-align: center;
}
.subnet-table tr:nth-child(even) {
background-color: #eeeeee;
}
.subnet-table tr:hover {
background-color: #dbeafe;
}