/* --- CLASSIC 90s AESTHETIC --- */
body {
		/* Pure black background with a CSS starry pattern */
		background-color: #000;
		background-image: 
				radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 4px),
				radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 3px),
				radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 4px),
				radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 3px);
		background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
		background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
		color: #c0c0c0;
		font-family: Arial, Helvetica, sans-serif;
		margin: 20px;
}

/* The main "Table" container */
.wrapper {
		max-width: 800px;
		margin: 0 auto;
		background-color: #000;
		border: 6px ridge #808080;
}

/* Header section */
header {
		text-align: center;
		border-bottom: 6px ridge #808080;
		padding: 10px;
		background-color: #000080; /* Navy Blue */
}

h1 {
		font-family: "Times New Roman", Times, serif;
		color: #ffff00; /* Yellow */
		text-shadow: 2px 2px #ff0000; /* Red shadow */
		margin: 5px 0;
		font-size: 2.5em;
}

marquee {
		color: #00ff00; /* Lime Green */
		font-weight: bold;
		font-family: "Courier New", Courier, monospace;
		background: #000;
		padding: 2px;
}

/* Split Layout using modern flex, but styled to look old */
.content-area {
		display: flex;
}

/* Sidebar for navigation and badges */
.sidebar {
		width: 200px;
		border-right: 6px ridge #808080;
		padding: 15px;
		background-color: #111;
}

.sidebar h3 {
		color: #ff00ff; /* Magenta */
		border-bottom: 1px dashed #ff00ff;
		margin-top: 0;
}

.sidebar ul {
		list-style-type: square;
		padding-left: 20px;
}

.sidebar a {
		color: #00ffff; /* Cyan */
		text-decoration: none;
}

.sidebar a:hover {
		color: #fff;
		text-decoration: underline;
}

.badges {
		margin-top: 30px;
		text-align: center;
}

/* Placeholder for 88x31 buttons */
.badge-placeholder {
		display: inline-block;
		width: 88px;
		height: 31px;
		border: 1px solid #fff;
		color: #fff;
		font-size: 10px;
		line-height: 31px;
		margin-bottom: 5px;
		background: #333;
}

/* Main Blog Area */
.main-blog {
		flex: 1;
		min-width: 0;
		flex-grow: 1;
		padding: 20px;
		line-height: 1.4;
}

.blog-post {
		margin-bottom: 30px;
}

.blog-date {
		color: #00ff00;
		font-family: "Courier New", Courier, monospace;
		font-weight: bold;
		border-bottom: 1px solid #333;
		display: block;
		margin-bottom: 10px;
}

.blog-post h2 {
		margin: 0 0 10px 0;
		color: #fff;
		font-family: "Times New Roman", Times, serif;
}

.main-blog a {
		color: #00ffff;
		text-decoration: underline;
		font-weight: bold;
}

.main-blog a:visited {
		color: #ff66ff;
}

.main-blog a:hover {
		color: #ffff00;
		background-color: #000000;
		text-decoration: none;
}

.main-blog a:active {
		color: #ff0000;
}

img {
		max-width: 100%;
		height: auto;
}

/* Classic 3D Horizontal Rule */
hr {
		border: 0;
		height: 4px;
		background: #808080;
		border-top: 2px solid #fff;
		border-bottom: 2px solid #333;
		margin: 20px 0;
}

/* Recreating the <blink> tag using modern CSS */
.blink {
		animation: blinker 1s linear infinite;
		color: #ff0000;
		font-weight: bold;
}
@keyframes blinker {
		50% { opacity: 0; }
}

/* Footer */
footer {
		text-align: center;
		border-top: 6px ridge #808080;
		padding: 10px;
		font-size: 0.8em;
		background-color: #000080;
		color: #fff;
}

/* Mobile responsiveness (The 90s didn't have this, but we need it!) */
@media (max-width: 600px) {
		.content-area { flex-direction: column; }
		.sidebar { width: auto; border-right: none; border-bottom: 6px ridge #808080; }
}