/* YOGURT.CSS v1.1 */
/* HTML/CSS layout template from https://ribo.zone/free/layouts/ */
/* last updated: may 03, 2026 */

:root {
	
	/* QUICK CUSTOMIZATION ZONE */
	/* changing these variables will update the style of mutiple elements at once */
	
	--pagewidth: 70vw;			/* sets the width of the container in units of viewport width */
	--pageheight: 80vh;			/* sets the height of the container in units of viewport height */
	--sidebarwidth: 150px;		/* width of the icon and navigation on the side */
	
	--outerborder: 2px dotted;	/* width and style borders between sections */
	--innerborder: 4px solid;	/* width and style of decorative border within sections + between nav links */
	--border-radius: 10px; 		/* border radius on the main section's header and footer */
	--border-radius-2: calc(var(--sidebarwidth) / 2);	/* some math to make the sidebar round no matter its width */
	
	--text-color: darkslateblue;
	--bg-1: white;				/* main section background color */
	--bg-2: aliceblue;			/* used in the background pattern, hover effects, other flourishes */
	--accent-1: thistle;		/* header/footer color, even level headings */
	--accent-2: lavenderblush;	/* inner border color, odd level heading backgrounds */
	--accent-3: palevioletred;	/* links and some heading text */
	--border-color: steelblue;	/* outer border color */
	
	--headingfont: "Arial";
	--bodyfont: "Times New Roman";
	
}

html, body { margin: 0; padding: 0; }
::selection { color: var(--bg-1); background: var(--accent-3); }
*, *::before, *::after {
	box-sizing: border-box;
	scrollbar-color: var(--accent-1) var(--accent-2);
	scrollbar-width: thin;
	max-width: 100%;
}

body { 
	font-family: var(--bodyfont), serif; 
	color: var(--text-color);
	background: linear-gradient(var(--bg-2) 50%, var(--bg-1) 50%), var(--bg-1); /* this sets the background of the whole page */
	background-size: 6px 6px;
}

.container { 
	display: grid;
	grid-template-areas:
		"head ."
		"main icon"
		"main nav"
		"foot .";
	width: var(--pagewidth);
	height: var(--pageheight);
	margin: calc((100vh - var(--pageheight)) / 2) auto;
	max-width: calc(70rem + var(--sidebarwidth)); /* this prevents the main section from getting too wide to read comfortable on large monitors */
	grid-template-columns: auto var(--sidebarwidth);
	grid-template-rows: min-content var(--sidebarwidth) auto min-content;
	gap: 2px; /* the space between sections. if you change the --outerborder variable above, you'll probably will want to adjust this too */
}

header { 
	grid-area: head; 
	background: var(--accent-1);
	outline: var(--outerborder) var(--border-color);
	border-radius: var(--border-radius) var(--border-radius) 0 0;
	font-family: var(--headingfont), sans-serif;
	font-size: 125%;
	text-align: center;
	align-content: center;
	justify-content: center;
	text-wrap: balance;
	overflow: hidden;
	font-weight: bold;
	letter-spacing: 1px;
}
header span { 
	display: block;
	padding: 5px;
}

.container > figure {
	grid-area: icon;
	margin: 0; padding: 0;
}
.container > figure img { 
	width: 100%; 
	object-fit: cover;
	aspect-ratio: 1 / 1;
	border-radius: 0 var(--border-radius-2) 0 0;
	border: var(--innerborder) var(--accent-2);
	outline: var(--outerborder) var(--border-color);
}

nav {
	grid-area: nav;
	overflow: auto;
	border: var(--innerborder) var(--accent-2);
	outline: var(--outerborder) var(--border-color);
	border-radius: 0 0 var(--border-radius-2) 0;
	background: var(--bg-1);
	align-self: start;
	max-height: 100%;
	line-height: 1;
	scrollbar-width: none;
}
nav p { 
	font-family: var(--headingfont), sans-serif;
	font-weight: bold;
	margin: 0;
	padding: 5px 8px;
	background: var(--accent-1);
	border-bottom: var(--innerborder) var(--accent-2);
	line-height: 1;
}
nav p:not(:first-child) { border-top: var(--innerborder) var(--accent-2); }
nav ul { display: grid; list-style-type: none; margin: 0; padding: 0; overflow: visible; }
nav li:not(:first-child) { border-top: var(--innerborder) var(--accent-2); }
nav a { display: block; padding: 5px 8px; text-decoration: none; line-height: 1; }
nav a:hover, nav a:focus { background: var(--bg-2); }

main { 
	grid-area: main;
	background: var(--bg-1);
	border: var(--innerborder) var(--accent-2);
	outline: var(--outerborder) var(--border-color);
	overflow-Y: scroll;
	max-height: 100%;
}

footer { 
	grid-area: foot;
	background: var(--accent-1);
	outline: var(--outerborder) var(--border-color);
	border-radius: 0 0 var(--border-radius) var(--border-radius);
}
footer p { margin: 4px; font-size: 80%; padding: 0; text-align: center; }
footer a { color: inherit; }

h1, h2, h3, h4 { 
	font-family: var(--headingfont), sans-serif;
	outline: 2px solid var(--bg-2);
	padding: 0.5rem 1rem;
	margin: 0;
	line-height:1;
}
h1, h3 { background: var(--accent-2); color: var(--accent-3); }
h2, h4 { background: var(--accent-1); }
h2, h3, h4 { margin: 1rem 0; }

a { 
	position: relative;
	color: var(--accent-3);
	text-decoration-color: var(--border-color);
	text-decoration-style: dotted;
}
a:hover, a:focus {
	color: var(--border-color);
}

main a:hover, main a:focus { 
	top: 1px;
	box-shadow: inset 0 -5px var(--bg-2);
}
p, ul, ol, dl, details, table, pre code, blockquote {
	margin: 1rem;
}
p, li, dd, dt, cite, code { 
	line-height: 1.4;
}
sup, sub { 
	line-height: 0;
}
s, del { 
	text-decoration-color: var(--accent-1); 
	text-decoration-thickness: 2px;
}
ul, ol {
	padding-left: 1rem;
}
ul ul, ol ul {
	margin: 0;
}
li {
	margin: 0;
}
dd {
	margin-left: 1rem;
}
dd + dt {
	margin-top: 0.5rem;
}
table { 
	border: 2px solid var(--bg-2);
	width: fit-content;
	max-width: 100%;
	overflow-x: auto;
	display: block;
}
th, td { 
	padding: 3px 5px;
}
th { 
	color: var(--section);
	background: var(--accent-1);
	border: 2px solid var(--link);
}
td { 
	background: var(--accent-2);
}
code { 
	display: inline-block;
	border-radius: var(--border-radius);
	padding: 2px 5px;
	background: var(--bg-2);
}
pre code { 
	display: block;
	overflow-x: auto;
}
details {
	border: var(--outerborder) var(--border-color);
	border-radius: var(--border-radius);
}
summary { 
	padding: 0.5rem;
	cursor: pointer;
	border-radius: var(--border-radius);
}
summary:hover {
	background: var(--bg-2);
}
details[open] summary {
	margin-bottom: -0.5rem;
	border-radius: var(--border-radius) var(--border-radius) 0 0;
}
blockquote {
	border-left: var(--innerborder) var(--accent-1);
	border-radius: var(--border-radius);
	padding: 0.25rem 0.5rem;
}
blockquote p, blockquote cite { 
	margin: 0.5rem;
	display: block;
}

/* adjustments for mobile */
@media (max-width: 700px) {
	.container { 
		grid-template-areas:
			"head icon"
			"nav nav"
			"main main"
			"foot foot";
		width: calc(100% - 20px);
		height: fit-content;
		margin: 10px;
		grid-template-columns: auto var(--sidebarwidth);
		grid-template-rows: var(--sidebarwidth) var(--sidebarwidth) auto min-content;
}
	nav { border-radius: 0; }
	header { border-radius: var(--border-radius) 0 0 0; }
	.container > figure img { border-radius: 0 var(--border-radius) 0 0; }
	:root { --sidebarwidth: 125px; }		
}