@font-face { font-family: 'typewriter'; src: url('./typewriter.woff2') format('opentype'); font-display: swap; }
:root {
	--bg-color: #F4F0E6;
	--text-main: #333333;
	--text-dim: #7f7f7f;
	--font-stack: 'typewriter';
}
body {
	background-color: var(--bg-color);
	color: var(--text-main);
	font-family: var(--font-stack);
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	background-image: url(bg.avif);
	background-size: 15%;
	background-repeat: repeat;
}
.menu-toggle {
	display: none;
	position: fixed;
	top: 20px;
	left: 20px;
	z-index: 1000;
	background: var(--bg-color);
	border: 1px solid var(--text-main);
	padding: 8px 12px;
	cursor: pointer;
	font-family: var(--font-stack);
	font-size: 0.8rem;
	box-shadow: 1px 1px 0px var(--text-main);
}
.menu-toggle:active {
	box-shadow: none;
	transform: translate(2px, 2px);
}
.wrapper {
	display: flex;
	justify-content: center;
	width: 100%;
	min-height: 100vh;
}
.discord-logo-wrapper {
	text-align: center;
}
.discord-logo {
	opacity: 0.5;
	display: inline-block;
	vertical-align: middle;
}
.ARR {
	color: var(--text-dim);
	text-align: center;
	font-size: 80%;
	margin-top: 0px;
	margin-bottom: -40px;
}
aside {
	width: 260px;
	padding: 30px 30px;
	border-right: 1px solid #e0e0de;
	border-left: 1px solid #e0e0de;
	position: sticky;
	top: 0;
	height: 100vh;
	box-sizing: border-box;
	background-color: var(--bg-color);
	background-image: url(bg.avif);
	background-repeat: repeat;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 999;
	background-size: 40%;
}
.sidebar-title {
	font-size: 0.75rem;
	letter-spacing: 2px;
	color: var(--text-dim);
	text-transform: uppercase;
	margin-bottom: 30px;
}
.post-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.post-item {
	margin-bottom: 15px;
}
.post-item a {
	text-decoration: none;
	color: var(--text-dim);
	font-size: 0.9rem;
	display: inline-block;
	line-height: 1.4;
}
.post-item.active a {
	color: var(--text-main);
}
.post-item.active::before {
	content: "> ";
	color: #d9534f;
	margin-left: -15px;
	position: absolute;
}
main {
	flex: 1;
	padding: 60px 60px;
	max-width: 1000px;
}
header { margin-bottom: 30px; }
.date { font-size: 90%; color: var(--text-dim); margin-bottom: 10px; text-align: right; }
h1 { font-size: 1.7rem; font-weight: normal; margin: 0; line-height: 1.2; }
.content { font-size: 1.05rem; line-height: 1.5; }
p { margin-bottom: 10px; }
pre {
	background: #f1f1ee;
	padding: 20px;
	font-size: 0.9rem;
	overflow-x: auto;
	border-left: 3px solid var(--text-main);
	margin: 35px 0;
}
@media (max-width: 850px) {
	.menu-toggle {
		display: block;
	}
	aside {
		position: fixed;
		left: 0;
		transform: translateX(-100%);
		box-shadow: 10px 0 30px rgba(0,0,0,0.05);
		padding: 70px 30px;
	}
	aside.open {
		transform: translateX(0);
	}
	main {
		padding: 70px 30px 40px 30px;
		width: 100%;
	}
	.ARR {
		margin-bottom: -20px;
	}
}
@media (min-width: 850px) {
	.overlay.active {
		display: none !important;
	}
}
.overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0,0,0,0.1);
	z-index: 998;
}
.overlay.active {
	display: block;
}