/* YOGURT 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: #f2f7fc;			/* used in the background pattern, hover effects, other flourishes */
	--accent-1: #d1b9d9;		/* header/footer color, even level headings */
	--accent-2: #ffdef6;	/* inner border color, odd level heading backgrounds */
	--accent-3: #ff78d8;	/* links and some heading text */
	--border-color: #ff78d8;	/* outer border color */
	
	--headingfont: "chelsea market";
	--bodyfont: "dynapuff";
	
.chelsea-market-regular {
  font-family: "Chelsea Market", system-ui;
  font-weight: 400;
  font-style: normal;
}
  
.dynapuff-<uniquifier> {
  font-family: "DynaPuff", system-ui;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

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%;
}

img {
  float: left;
  width: 280px;
  height: auto;
  padding: 10px;
}

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: 3px; /* 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: 250%;
	text-align: center;
	align-content: center;
	justify-content: center;
	text-wrap: balance;
	overflow: hidden;
	font-weight: bold;
	letter-spacing: 2px;
}
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: #161c76;
}

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; }		
}
  
  /* Touching any CSS below this can break the gallery. Proceed with caution */
.gallery {
  padding-top: 1em;
  /* base number of columns, can make this 1 to ?? at bigger numbers it'll look funny 
     if you edit this, you may want to update the columns in the mobile sizing starting on line 105
  */
  columns: auto 3;
  text-align: center;
}

.gallery img {
  border: 0px solid black; /* You can remove the border if you want */
  width: 90%;
}

figure {
  display: inline-block;
  margin: 0;
  margin-bottom: 15px;
}

.spotlightImage {
  display: block;
  margin: 0 auto;
}

/* Below changes the number of columns in the gallery for smaller screens
   If you changed the column number on line 85, you might have to edit it here too
   (it's not exactly mobile and tablet sizing)
    */
@media only screen and (max-width: 800px) {
  .gallery {
    columns: auto 2;
  }
}

@media only screen and (max-width: 500px) {
  .gallery {
    columns: auto 1;
  }
}