/* A good default so padding/borders don't break layouts */
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
background: #ffc300;
line-height: 1.5;
}
/* Header */
.header {
padding: 48px 16px;
text-align: center;
background: white;
}
/* Navigation bar */
.navbar {
overflow: hidden; /* keeps floats contained */
background: #333;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a.right {
float: right;
}
.navbar a:hover {
background: #444;
}
/* Layout: main + side */
.row {
display: flex;
gap: 16px;
padding: 16px;
max-width: 1000px;
margin: 0 auto;
}
.main {
flex: 3; /* takes ~75% */
background: white;
padding: 16px;
}
.side {
flex: 1; /* takes ~25% */
background: white;
padding: 16px;
}
/* Footer */
.footer {
text-align: center;
padding: 16px;
background: #ddd;
}
/* Responsive: stack columns on smaller screens */
@media (max-width: 700px) {
.row {
flex-direction: column;
}
}
/* Responsive: stack nav links on very small screens */
@media (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
#content-placeholder p {
text-align: justify;
hyphens: auto;
line-height: 1.6;
}