{
margin: 0;
line-height: 1.5; /* Added for better text readability */
}
/* Everything goes inside here. */
.wrapper {
width: 900px;
margin: 0 auto;
/* Clears floats to ensure the wrapper contains the sidebar */
overflow: hidden;
}
/* Added spacing between major vertical sections */
.sidebar-img, .footer, .title, .links, .box {
margin-top: 25px;
margin-bottom: 25px; /* Added bottom margin for consistent "air" */
}
.title, .links, .footer {
text-align: center;
}
/* Navigation links */
.links ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.links li {
display: inline-block;
margin: 0 5px; /* Added horizontal space between links */
}
/* Special characters around navigation links */
.links li:before {
content: "ใ";
}
.links li:after {
content: "ใ ยท ";
}
.links .last:after {
content: "ใ";
}
.links li:before, .links li:after {
letter-spacing: 0.1em;
}
/* Basic box code */
.box {
border: 1px solid black;
padding: 1.5em; /* Increased padding inside boxes */
display: block; /* Changed from inline-block to block */
width: 100%; /* Ensures it fills the column width */
box-sizing: border-box; /* Prevents padding from breaking width */
break-inside: avoid; /* Modern way to prevent splitting across columns */
}
/* Goes inside the box class */
.inner {
/* Placeholder for extra styling */
}
/* Prevent image overflow */
.box img, .sidebar img {
max-width: 100%;
height: auto;
}
/* Wrapper for the sidebar */
.sidebar {
width: 200px;
float: left;
}
/* Container for the sidebar image */
.sidebar-image {
border: 1px solid black;
margin-bottom: 20px;
}
/* Remove extra padding line at bottom of image */
.sidebar-image img {
display: block;
}
/* This is where the title, navbar, and main content all go */
.main-wrapper {
margin-left: 225px; /* Creates the gap between sidebar and content */
}
/* Two columns by default */
.main {
columns: 2;
column-gap: 30px; /* Increased gap between columns */
}
.single-column {
columns: 1;
}
.footer {
margin-top: 50px; /* More space before the footer */
padding-bottom: 25px;
clear: both; /* Ensures footer stays below the sidebar float */
}
/* Responsive adjustments */
@media(max-width:915px) {
.wrapper {
width: 95%;
}
.main-wrapper {
margin-left: 225px;
width: auto;
}
}
@media (orientation: portrait), (max-width: 480px) {
.wrapper {
width: 100%;
}
.main-wrapper, .sidebar, .footer {
margin: 0 auto;
width: 90%;
float: none; /* Disables floating on mobile */
}
.sidebar-image {
margin: 25px auto;
width: 50%; /* Slightly larger for mobile visibility */
}
.main {
columns: 1; /* Force single column on small screens */
}
}