:root {
	--bg: #f5f0e1;
	--paper: #fffdf7;


	--text: #202020;
	--muted: #666;

	--border: #333;
	--border-light: #bdb7aa;

	--code-bg: #f4f0e5;

	--link: #0044aa;
	--link-hover: #aa3300;


}

/* ======================================== */
/* Sakura Background */
/* ======================================== */

html {
    background: var(--bg);
}

body {
    position: relative;
}

/* Layer 1 */

body::before {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;
    z-index: -2;

    opacity: 0.2;

    background-image:
        url("/images/pixel-sakura.svg"),
        url("/images/pixel-sakura.svg"),
        url("/images/pixel-sakura.svg"),
        url("/images/pixel-sakura.svg"),
        url("/images/pixel-sakura.svg");

    background-repeat: no-repeat;

    background-size:
        80px,
        120px,
        60px,
        100px,
        140px;

    background-position:
        8% 12%,
        87% 18%,
        25% 72%,
        78% 55%,
        92% 85%;

}

/* Layer 2 */

body::after {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;
    z-index: -3;

    opacity: 0.035;

    background-image:
        url("/images/pixel-sakura.svg"),
        url("/images/pixel-sakura.svg"),
        url("/images/pixel-sakura.svg"),
        url("/images/pixel-sakura.svg");

    background-repeat: no-repeat;

    background-size:
        160px,
        90px,
        130px,
        70px;

    background-position:
        18% 42%,
        62% 24%,
        72% 78%,
        42% 92%;

}

/* ======================================== */
/* Page */
/* ======================================== */

body {
	position: relative;


	max-width: 860px;

	margin: 2rem auto;
	padding: 0 1rem;

	background: transparent;
	color: var(--text);

	font-size: 16px;
	line-height: 1.6;

	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;


}

/* ======================================== */
/* Main Content Area */
/* ======================================== */

main {
	position: relative;


	background: var(--paper);

	border: 2px solid var(--border);

	padding: 1.5rem 1.75rem;

	box-shadow:
		4px 4px 0 rgba(0, 0, 0, 0.05);

	overflow-wrap: break-word;


}

/* corner accents */

main::before {
	content: "";

	position: absolute;

	top: 8px;
	left: 8px;

	width: 18px;
	height: 18px;

	border-top: 1px solid var(--border-light);
	border-left: 1px solid var(--border-light);

	pointer-events: none;


}

main::after {
	content: "";


	position: absolute;

	right: 8px;
	bottom: 8px;

	width: 18px;
	height: 18px;

	border-right: 1px solid var(--border-light);
	border-bottom: 1px solid var(--border-light);

	pointer-events: none;


}

/* ======================================== */
/* Header */
/* ======================================== */

.title {
	font-size: 2rem;


	text-transform: uppercase;
	letter-spacing: 2px;

	margin: 0 0 .3rem;


}

.article-meta {
	color: var(--muted);
	margin-bottom: .75rem;
}

/* ======================================== */
/* Navigation */
/* ======================================== */

.menu {
	margin: .75rem 0 1rem;
	padding: 0;
}

.menu li {
	display: inline-block;
	margin-right: .35rem;
}

.menu a {
	text-decoration: none;


	padding: .2rem .55rem;

	border: 1px solid var(--border-light);

	color: var(--text);


}

.menu a:hover {
	background: #efeadb;
}

/* ======================================== */
/* Typography */
/* ======================================== */

h1,
h2,
h3,
h4 {
	font-weight: 600;
}

h1 {
	margin: 1.25rem 0 .5rem;
}

h2 {
	margin: 1rem 0 .35rem;
	font-size: 1.3rem;
}

h3 {
	margin: .8rem 0 .3rem;
	font-size: 1.1rem;
}

h4 {
	margin: .7rem 0 .25rem;
}

p {
	margin: .55rem 0;
}

/* ======================================== */
/* Lists */
/* ======================================== */

ul,
ol {
	margin: .5rem 0;
	padding-left: 1.4rem;
}

li {
	margin: .15rem 0;
}

/* ======================================== */
/* Links */
/* ======================================== */

a {
	color: var(--link);
}

a:hover {
	color: var(--link-hover);
}

/* ======================================== */
/* Code */
/* ======================================== */

pre {
	background: var(--code-bg);


	border: 1px solid var(--border-light);
	border-left: 4px solid #444;

	padding: .8rem;

	margin: .75rem 0;

	overflow-x: auto;

	line-height: 1.5;

	font-size: 0.9rem;


}

code {
	font-size: 0.9rem;
}

:not(pre)>code {
	background: var(--code-bg);

	border: 1px solid var(--border-light);

	padding: .08rem .3rem;


}

pre code {
	background: transparent;
	border: none;
	padding: 0;
}

/* ======================================== */
/* Quotes */
/* ======================================== */

blockquote {
	margin: .75rem 0;

	padding: .2rem 0 .2rem .8rem;

	border-left: 3px solid var(--border-light);

	color: var(--muted);

}

/* ======================================== */
/* Images */
/* ======================================== */

img,
video,
iframe {
	display: block;

	max-width: 100%;
	height: auto;

	margin: 1rem auto;

	background: white;

	border: 1px solid var(--border-light);

	padding: 6px;

	box-sizing: border-box;

}

img:hover {
	border-color: var(--border);
}

figcaption {
	text-align: center;


	font-size: .9rem;

	color: var(--muted);

	margin-top: -.5rem;
	margin-bottom: .75rem;


}

/* ======================================== */
/* Tables */
/* ======================================== */

table {
	width: 100%;


	border-collapse: collapse;

	margin: .75rem 0;


}

th {
	background: #f4f0e5;
}

th,
td {
	border: 1px solid var(--border-light);


	padding: .35rem .5rem;


}

/* ======================================== */
/* Divider */
/* ======================================== */

hr {
	border: none;


	border-top: 1px dashed var(--border-light);

	margin: 1rem 0;


}

/* ======================================== */
/* Footer */
/* ======================================== */

footer {
	margin-top: 1.5rem;
	padding-top: .5rem;

	color: var(--muted);


}

/* ======================================== */
/* Selection */
/* ======================================== */

::selection {
	background: #222;
	color: #fffdf7;
}