/*
		 * ------------------------------------------------------------
		 * Index
		 * ------------------------------------------------------------
		 */
		 
		* {
			box-sizing: border-box;
		}

		html,
		body {
			margin: 0;
			padding: 0;
			min-height: 100%;
						
			scrollbar-gutter: stable; /* <-- Faux Scrollbar On Short Pages, So The Loady Mug Doesn't Get Shifted To The Left When The Scrollbar Appears :) */
		}
		@media (prefers-reduced-motion: reduce) { /* <-- Smooth Scrolling Mitigation For Users Who Have Requested Otherwise */
			html {
				scroll-behavior: auto;
			}
		}
		:where(body) {
			background-color: #f4f2f1;

			background-image:  linear-gradient(
				to bottom, 
				rgba(244, 242, 241, 0.3) 0%,     /* If desired: Completely transparent at the top */
				rgba(244, 242, 241, 0.3) 100%    /* If desired: Matches your solid background color at the bottom */
				), url('/img/_bg_pale_coffee_beans_37pt5_percent.png');
			/* background-attachment: fixed; */  /* <-- Uncomment If You Want The Background To Remain Still As You Scroll */
			color: #1e1e1e;
			font-family: Arial, Helvetica, sans-serif;
						
			margin: 0; /* <-- So The Loady Mug Doesn't Get Shifted To The Left When The Scrollbar Appears :) */
		}

		main {
			padding: 4rem 5vw;
		}
		
		input[type="submit"], button[type="submit"], input[type="button"], button[type="button"] {
		  border: none;
		  outline: none;
		}

		/* Add a custom highlight when the user tabs into the button, note that ":where" drops the specificity so it can be overridden later :) */
		:where(input[type="submit"]:focus, button[type="submit"]:focus, input[type="button"]:focus, button[type="button"]:focus) {
		  outline: 2px solid #00AAAA; /* Choose a visible highlight color */
		  box-shadow: 0 0 5px rgba(0, 95, 204, 0.5); /* Optional glowing effect */
		}		
				
		/* Hyperlink Formatting (Defaults) */
		a {
		  text-decoration: none; /* No Underline */
		}					
		a:link {
		  color: #00AAAA;
		}
		a:visited {
		  color: #00AAAA;
		}
		a:hover {
		  color: #80CC80;
		}
		a:active {
		  color: #DDE5DD;
		}
		
		.moonlighty {			
		  font-family: Georgia, Palatino, "Palatino Linotype", "Book Antiqua", serif;
		  font-size: 1.25rem;
		}	
		.moonlighty.full {			
		  opacity: 0.8;
		}
		.moonlighty.gibbous {			
		  opacity: 0.7;
		}
		.moonlighty.half {			
		  opacity: 0.6;
		}
		@media (max-width: 640px) {
			.moonlighty {
				display: none;
			}
		}
		.moonlighty:link {
		  color: #FFFFFF;
		}
		.moonlighty:visited {
		  color: #FFFFFF;
		}
		.moonlighty:hover {
		  color: #E0E0FF;
		}
		.moonlighty:active {
		  color: #E0FFE0;
		}	

		/*
		 * ------------------------------------------------------------
		 * Colors
		 * ------------------------------------------------------------
		 */		
		 
		 .color-red {
		  color: #AA0000;
		 }
		 
		 .color-orange {
		  color: #AA5500;
		 }

		 .color-yellow {
		  color: #AAAA00;
		 }
		 
		 .color-green {
		  color: #00AA00;
		 }
		 
		 .color-cyan {
		  color: #00AAAA;
		 }
		 
		 .color-blue {
		  color: #0000AA;
		 }
		 
		 .color-purple {
		  color: #AA00AA;
		 }
		 
		 .color-deepred {
		  color: #B50400;
		 }

		 .color-white {
		  color: #AAAAAA;
		 }
		 
		 .color-gray {
		  color: #555555;
		 }

		 /*
		 * ------------------------------------------------------------
		 * <center>, <br>, etc. equivalents
		 * ------------------------------------------------------------
		 */		
		 
		.center { /*<center>*/
		  text-align: center;
		}
		
		:root {
		  --brrr: 20; /* Don't include "px", That Gets Automatically Appended Back In Later When We Multiply By 1px */
		}
		.nobr {
			margin-bottom: calc(var(--brrr) * -1px);
		}
		.br { /*<br>*/
			margin-bottom: calc(var(--brrr) * 1px);
		}
		.brbr { /*<br>*/
			margin-bottom: calc(var(--brrr) * 2px);
		}
		 
		.lynky { /*<a>*/
		  font-family: Georgia, Palatino, "Palatino Linotype", "Book Antiqua", serif;
		  font-size: 1.15rem;
		  filter: drop-shadow(-3px 4px 4px rgba(128, 128, 128, 0.25));
		}
		.lynky-button { /* <buttons> that look like <a> links */
		  font-family: Georgia, Palatino, "Palatino Linotype", "Book Antiqua", serif;
		  font-size: 1.15rem;
		  filter: drop-shadow(-3px 4px 4px rgba(128, 128, 128, 0.25));
		  background: transparent;
		  border: none;
		  padding: 0;
		  color: #00AAAA;
		  text-decoration: none;
		  cursor: pointer;
		  outline: none;
		  box-shadow: none;
		}

		.lynky-button:hover {
		  color: #80CC80;
		}
		.lynky-button:active {
		  color: #DDE5DD;
		}
		@media (max-width: 640px) {
			.lynky-button:hover {
			  color: #00AAAA; /* <-- On Mobile, Hover Seems To Linger After A Click, So It Looks Better If We Just Keep It The Standard Color */
			}
		}
		.lynky-button:focus {
		  /* Nothing For The Moment :) */
		}
		.lynky-button:focus-visible {
		  outline: 2px solid #DDE5DD; /* Shows a nice ring ONLY if someone uses the 'Tab' key */
		  outline-offset: 2px;
		}
		ul {                     /* Used In Our Navigation Menu */
		  list-style-type: none; /* Removes the bullets */
		  padding: 0;            /* Removes default indentation */
		  margin: 0;             /* Removes default vertical spacing */
		}
		
		/*
		 * ------------------------------------------------------------
		 * Haruno Animations
		 * ------------------------------------------------------------
		 */
		 
		@media (prefers-reduced-motion: reduce) { /* <-- Mitiagation For Users Who Have Requested Reduced Motion --> */
			*,
			*::before,
			*::after {
				animation-duration: 0.01ms !important;
				animation-iteration-count: 1 !important;
				transition-duration: 0.01ms !important;
				scroll-behavior: auto !important;
			}
		}		 
		
		:root {
		  --hall-opacity-var: 0.45;    /* <-- Full opacity on desktop */
		  --haruno-opacity-var: 0.375; /* <-- Full opacity on desktop */
		  .hall-img {
			  background-image: url('img/hall_img.png');
		      animation: harunoFadeIn 0.3s ease-in-out forwards;
		  }
		  .haruno-img {
			  background-image: url('img/haruno_img.png');
		      animation: harunoFadeIn 0.3s ease-in-out forwards;
		  }
		}

		@media (max-width: 768px) {
		  :root {
			--hall-opacity-var: 0.275;   /* Decreased opacity on mobile */
			--haruno-opacity-var: 0.275; /* Decreased opacity on mobile */
			.hall-img {
			  top: -50px;
			  background-image: url('img/hall_img.png');
			}
			.haruno-img {
			  top: -50px;
			  background-image: url('img/hall_img.png'); /* Haruno Looks Too Busy When We're On Mobile, Just Symmetrize The Other Image Instead */
			  transform: scaleX(-1);
			}
			.mugsteam-img {
				opacity: 0 !important;
			}
		  }
		}
		.go-left { /* <-- Hall Image To The Left */
		  position: absolute;
		  left: 10px;
		}
		.go-right { /* <-- Haruno Image To The Right */
		  position: absolute;
		  right: 10px;
		}
		.go-mug { /* <-- Mug Steam To A Specific Position Relative To Haruno Image */
		  position: absolute;
		  top: 200px;
		  right: 150px;
		  z-index: 10;
		}
		.hall-img {
		  display: inline-block;

		  opacity: 0;
		  visibility: hidden;
		  pointer-events: none;
		}
		.hall-img.visible {
			opacity: var(--hall-opacity-var);
			visibility: visible;
			pointer-events: none;
		    width: 219px;
			height: 700px;
		}
		
		.haruno-img {
		  display: inline-block;
		  opacity: 0;
		  visibility: hidden;
		  pointer-events: none;
		}		
		.haruno-img.visible {
			opacity: var(--haruno-opacity-var);
			visibility: visible;
			pointer-events: none;
		    width: 219px;
		    height: 700px;
		}
		
		.mugsteam-img {
		  display: inline-block;

		  opacity: 0;
		  visibility: hidden;
		  pointer-events: none;
		}		
		.mugsteam-img.visible {
			opacity: var(--haruno-opacity-var);
			visibility: visible;
			pointer-events: none;
		    width: 70px;
		    height: 70px;		
		    background-image: url('img/mug_steam.gif');
			
			animation: harunoFadeIn 0.3s ease-in-out forwards;
		}

		@keyframes hallFadeIn {
		  0% {
			opacity: 0;
		  }
		  100% {
			opacity: var(--hall-opacity-var);   /* Fades in only to a certain earlier-specified opacity */
		  }
		}
		@keyframes harunoFadeIn {
		  0% {
			opacity: 0;
		  }
		  100% {
			opacity: var(--haruno-opacity-var); /* Fades in only to a certain earlier-specified opacity */
		  }
		}
		
		/*
		 * ------------------------------------------------------------
		 * Blog Grid ("Older" Page Button Should Probably Be Offset To The Right Of "Load More" On The "archives_newest" Page, Make Sure The Parent Is Set To position: relative; To Provide Positioning Context)
		 * ------------------------------------------------------------
		 */
		
		.olderer {			
			position: absolute;
			right: 24px;
			font-size: 0.85rem;
			transition: color 0.2s ease;
		}
		
		@media (max-width: 600px) {
			.load-more {
				transform: translateY(100%); /* <-- So It Doesn't Overlap With "olderer" On Mobile */
			}
		}

		/*
		 * ------------------------------------------------------------
		 * Support Us
		 * ------------------------------------------------------------
		 */
		 
		 .center-support-us {
			 display: flex;
			 justify-content: center;
			 width: 100%;
		 }
		 .center-support-us-button {
			 width: 100%;
			 max-width: 400px;
		 }
		/*
		 * ------------------------------------------------------------
		 * Header
		 * ------------------------------------------------------------
		 */
		 
		 /* Top-Left Mug Image */
		.muggy {
			height:40px;
			width:auto;
			opacity:0.5;
		}

		/* Green Header */
		.heady {
			height: 12.5vh;
			min-height: 70px;

			background-color: #a0ddbb;
			/* PERSINFO START */ 
			background-image:  linear-gradient(
				to bottom, 
				rgba(160, 221, 187, 0.7) 0%,    /* If desired: Completely transparent at the top */
				rgba(160, 221, 187, 0.7) 100%   /* If desired: Matches your solid background color at the bottom */
				), url('/img/_bg_green_coffee_beans_20_percent.png');
			/* PERSINFO END */ 

			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 3vw;
			box-shadow: 0 5px 10px rgba(0, 0, 0, 0.35);
		}

		#mainTitle {
			cursor: pointer;
			user-select: none;
			-webkit-user-select: none; /* Safari */
		}
		/* Top-Left Page Name Of The Site */
		.titly {
			margin: 0;
			font-size: clamp(2rem, 3vw, 3rem);
			letter-spacing: 0.02em;
		}
		
		.titly-color {		
			color: #507070;
		}

		.slady {
			color: #4e4e4e; /* Grayer Text */
		}

		.slaty {
			color: #1e1e1e; /* Grayish Text */
		}

		/*
		 * ------------------------------------------------------------
		 * Footer
		 * ------------------------------------------------------------
		 */

		.disclaimy { /* "Copyright" Notice */
		  font-size: 0.85rem;
		  color: #5b5149;
		}
		
		.footy { /* Footer With Box Shadow */
		  width: 100%;
		  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.12);
		  
		  opacity: 0;
		  visibility: hidden;
		  pointer-events: none;
		}
		
		.footy.visible {
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
		}

		.tootsy { /* Center The Footer Interior */
		  position: relative;
		  max-width: 1200px;
		  margin: 0 auto;
		  min-height: 64px;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  padding: 0 24px;
		  box-sizing: border-box;
		}

		.returni { /* Footer's "Go Back" Off To The Left */
		  position: absolute;
		  left: 24px;
		  font-size: 0.85rem;
		  transition: color 0.2s ease;
		  opacity: 0.375;
		}
		
		.returny { /* Footer's "Return To Top" Off To The Right */
		  position: absolute;
		  right: 24px;
		  font-size: 0.85rem;
		  transition: color 0.2s ease;
		}

		@media (max-width: 600px) { /* These styles only apply when the screen is 600px wide or narrower */
		  .tootsy {
			/* flex-direction: column; */ /* <-- Uncomment If You're OK With "Go Back", "Copyright", And "Return To Top" Stacking On Top Of Each Other On Mobile */
			gap: 8px;
			padding: 16px 24px;
		  }

		  .returni {
			position: static;
		  }
		  .returny {
			position: static;
		  }
		}
		
		/*
		 * ------------------------------------------------------------
		 * Hamburger button
		 * ------------------------------------------------------------
		 */
		 
		/* Hamburger Shadow */
		.hammy {
			/* These four lines are for the hamburger to scroll with the page! */
			position: fixed;
			top: 3vh;
			right: 3vw;
			transition: opacity 0.15s ease;

			filter: drop-shadow(-3px 4px 4px rgba(128, 128, 128, 0.25));
			border: none;
			background: transparent;
			color: #BB9090;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 2.5rem;
			font-weight: normal;
			line-height: 1;
			cursor: pointer;
			padding: 0.2rem 0.5rem;

			/*
			 * Makes the button feel clickable without changing
			 * the basic appearance.
			 */
			transition: opacity 0.15s ease;
		}
		
		@media (max-width: 640px) {
			.hammy {
				opacity: .75;
			}
		}	
		

		.hammy:hover {
			opacity: 0.75;
		}

		.hammy:focus-visible {
			outline: 2px solid white;
			outline-offset: 4px;
			border-radius: 3px;
		}

		/*
		 * ------------------------------------------------------------
		 * Loady Mug
		 * ------------------------------------------------------------
		 */
		 
		.loading-screen {
			position: fixed;
			inset: 0;
			z-index: 9999;

			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			opacity: 0;
			visibility: hidden;
			pointer-events: none;

			transition: opacity 0s ease, visibility 0s ease;
			animation: fadeIn 0.3s ease-in-out forwards;
		}

		@keyframes fadeIn {
			from {
				opacity: 0;
			}
			to {
				opacity: 1;
			}
		}
		
		.loading-screen.visible {
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
		}

		.loading-coffee {
			width: 150px;
			height: 150px;
			object-fit: contain;
		}
		 
		/*
		 * ------------------------------------------------------------
		 * Navigation menu: part that appears when we click hammy :)
		 * ------------------------------------------------------------
		 */

		.navvy {			
			/* The following two lines are for the navigation menu to scroll with the hamburger and therefore with the page! */
			position: fixed;
			top: calc(3vh + 3rem); /* Makes the menu's position relative to the hamburger, rather than hard-coding 12.5vh. */

			right: 3vw;
			width: min(280px, 80vw);
			background-color: #ffffff;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
			z-index: 9999;
		}

		/* Each menu entry */
		.menu {
			border-bottom: 1px solid #e6e6e6;
		}

		.menu:last-child {
			border-bottom: none;
		}

		/* Each menu entry's stuff, often links :D */
		.linky {
			display: block;
			width: 100%;
			padding: 0.9rem 1.2rem;
			border: none;
			background: white;
			color: #1e1e1e;
			font: inherit;
			font-size: 1rem;
			text-align: left;
			text-decoration: none;
			cursor: pointer;
			
			transition:
				background-color 0.15s ease,
				color 0.15s ease;
		}

		.linky:hover {
			background-color: #f0f0f0;
		}

		.linky:focus-visible {
			outline: 2px solid #76b995;
			outline-offset: -2px;
		}
		.commenty {						
		  /* Core Styles */
		  height: 1.5lh; /* 1 Line Height */
		  background-color: transparent;
		  border: none;
		  border-bottom: 2px solid black;
		  box-shadow: 3px 5px 5px rgba(128, 128, 128, 0.1875);
		  
		  /* Reset Styles (Highly Recommended) */
		  outline: none;       /* Removes the default blue focus outline */
		  resize: vertical;    /* Restricts resizing to vertical only (or 'none') */
		  padding: 8px 0;      /* Adds breathing room on top and bottom */
		  font-family: inherit;/* Ensures it uses the page's font */
		}

		/* Optional: Subtle effect when the user clicks inside */
		.commenty:focus {
		  border-bottom-color: #555; /* Changes border color slightly on focus */
		}
		
		/* Remove The Scrollbar On The textarea Begin */
		/* For WebKit browsers (Chrome, Safari, Edge) */
		.commenty::-webkit-scrollbar {
		  display: none;
		}

		/* For Firefox and IE/Edge Legacy */
		.commenty {
		  scrollbar-width: none; /* Firefox */
		  -ms-overflow-style: none; /* IE and Edge */
		}
		/* Remove The Scrollbar On The textarea End */
		
		.searchy {
			color: #888;
			font-style: italic;
			font-family: Georgia, "Times New Roman", serif;
		}
		
		/* Search box placeholder text */
		.searchy::placeholder {
			color: #888;
			font-style: italic;
			font-family: Georgia, "Times New Roman", serif;
		}
		
		.searchy-bevel {
			border-radius: 4px;
			border: none;
			outline: none;
			margin: 3px;
		}
		
		.widey {			
		    width: 100%;
		}
		
		#reply-author {
			width: 12.5%;
		}
		#reply-email {
			width: 12.5%;
		}
		@media (max-width: 640px) {
			#reply-author {
				width: 25%;
			}
			#reply-email {
				width: 25%;
			}
		}

		/*
		 * ------------------------------------------------------------
		 * Submenus
		 * ------------------------------------------------------------
		 */

		.submenu {
			display: none;
			background-color: #f7f7f7;
		}

		.submenu.open {
			display: block;
		}

		.submenu .linky {
			padding-left: 2.2rem;
			font-size: 0.95rem;
		}
		
		.submenu-toggle {
			box-shadow: none; /* <-- So It Doesn't Inherit The Box Shadow For Standard Form Buttons */
		}


		/*
		 * ------------------------------------------------------------
		 * Content <DIV>
		 * ------------------------------------------------------------
		 */
		 
		.content {
		  max-width: 900px;
		  margin: 0 auto; /* Center */
		  
		  position: relative; /* <-- Creates a positioning context for any position:absolute; alignments of subelements */
		  
		  opacity: 0;
		  visibility: hidden;
		  pointer-events: none;
		}
		
		.content.visible {
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
		}
		
		.js-focus-hidden:focus { /* <-- For Having JavaScript Handle Removing The Focus Outline From mainContent. To Remove It Altogether (Though Probably Not Recommended For ARIA Compliance), Do This: #mainContent:focus:not(:focus-visible) { outline: none; } */
			outline: none;
		}

		/*
		 * ------------------------------------------------------------
		 * Articles
		 * ------------------------------------------------------------
		 */
		 
		 
		/* Article Itself */
		.article {
		  margin-top: 1rem auto;
		  margin-bottom: 2rem auto;
		  margin-left: 0rem auto;
		  margin-right: 0rem auto;
		  padding: 2rem;
		  box-shadow: 0px 32px 32px rgba(0, 0, 0, 0.07);	 
		  border-radius: 24px; /* Bevelled Edges */
		}
		
		.article-text {			
		  font-family: Georgia, Palatino, "Palatino Linotype", "Book Antiqua", serif;
		  font-size: 1.25rem;
		  line-height: 1.65;
		  letter-spacing: 0.01em; /* Subtle spacing adds an editorial feel */		
		}

		.comment-text {			
		  font-family: Georgia, Palatino, "Palatino Linotype", "Book Antiqua", serif;
		  font-size: 1.25rem;
		  line-height: 1.2; /* <-- This Looks Better For Comments */
		  letter-spacing: 0.01em; /* Subtle spacing adds an editorial feel */		
		}
		
		/* Who Wrote The Article */
		.authy {
		  text-align: right;
		}

		/* Styling for floating text boxes and captioned images, usually coupled with ".lefty" or ".righty" */
		.floaty {
		  margin-top: 20px;
		  margin-left: 20px;
		  margin-right: 20px;
		  margin-bottom: 15px;
		}

		.floaty img {
		  display: block;
		  max-width: 100%; /* Ensures responsiveness */
		}

		.floaty figcaption {
		  contain: inline-size; /* Prevents caption from contributing to the element's width calculation */
		}
		
		.thumby { /* <-- So [[image-left]] [[image-right]] Thumbnail Images Are Constrained To A Certain Size */
			width: 255px;
			height: 217px;
			object-fit: cover; /* <-- Make It So It Cuts Off Excess, Instead Of Squishing Or Stretching */			
		}

		/* Pushes the image to the left and lets text wrap around it */
		.lefty {
		  float: left; 
		  filter: drop-shadow(-5px 8px 16px rgba(128, 128, 0, 0.35));
		}

		/* Pushes the image to the right and lets text wrap around it */
		.righty {
		  float: right;
		  filter: drop-shadow(5px 8px 16px rgba(128, 128, 0, 0.35));
		}
		
		@media (max-width: 640px) {
			.floaty {
			  margin-top: inherit;
			  margin-left: inherit;
			  margin-right: inherit;
			  margin-bottom: inherit;
			}

			.lefty {
			  float: none; 
			  margin-top: 20px; /* <-- This Helps Prevent The [[hat2]] Tags From Overlapping With Lefty Or Righty Elements */
			}
			.righty {
			  float: none;
			  margin-top: 20px; /* <-- This Helps Prevent The [[hat2]] Tags From Overlapping With Lefty Or Righty Elements */
			}
		}

		/* Normal-ish Font Size */
		.normy {
		  font-size: 1.1rem;
		  line-height: 1.65;
		  letter-spacing: 0.01em; /* Subtle spacing adds an editorial feel */
		}
		
		/* Non-Selectable (please use sparingly :D) */
		.notouchy {
		  user-select: none; 
		}
		/* Bigger Font, Shorter Height */
		.puffy {
		  font-size: 1.35rem;
		  line-height: 1;
		  letter-spacing: 0.01em; /* Subtle spacing adds an editorial feel */
		}

		/* Elegant Fonts */
		.poshy {
		  font-family: Georgia, "Times New Roman", serif;
		}

		.pretty {
		  font-family: Georgia, Palatino, "Palatino Linotype", "Book Antiqua", serif;
		}

		/* Rounded Edges */
		.roundy {
		  border-radius: 12px;
		}		

		/* Shrinks container to fit the image width */
		.shrinky {
		  display: inline-block;
		}

		.slimmy {
		  font-weight: normal;
		}

		/* Text-Box */
		.texty {
		  width: 300px;
		  background-color: #f4f4f4;
		  padding: 15px;
		  border-radius: 8px;
		}

		/*
		 * ------------------------------------------------------------
		 * Submain
		 * ------------------------------------------------------------
		 */

		/* Rich Green */
		.greeny {
			color: #597344;
		}

		/* Light Green */
		.mintly {
			color: #40a060;
		}
			
		/* Light Shadow */
		.shady {
			filter: drop-shadow(3px -4px 4px rgba(0, 128, 255, 0.15));
		}

		/* Shadier Shadow */
		.shaty {
			filter: drop-shadow(3px 4px 4px rgba(128, 128, 128, 0.5));
		}

		/* Subtitle */
		.subby {	
			font-size: clamp(1.5rem, 2vw, 2rem);
			margin-top: 0;
			margin-bottom: 0.75rem
		}

		/* Title */
		.suppy {
			font-size: clamp(3rem, 5vw, 3rem);
			margin-top: -1rem;
			margin-bottom: 0.75rem
		}

		/* Designates A Line Of <p>Text</p> That's Not Very Tall Relative To Preceding And Subsequent Lines */
		.shorty {
			margin-top: 0.2rem;
			margin-bottom: 0.5rem;
		}

		/*
		 * ------------------------------------------------------------
		 * Comments Reply Box
		 * ------------------------------------------------------------
		 */
		 
		.backy {
			font-size: clamp(1.2rem, 2.1vw, 1.7rem);
			letter-spacing: 0.02em;
		}
		
		/* Indent The First Few Nested Levels Of Comment Replies */
		.comments {
			margin-left: 2em;
		}
		
		.comments .comment .replies {
			margin-left: 2em;
		}
		
		.comments .comment .replies .comment .replies {
			margin-left: 2em;
		}		
		
		.comments .comment .replies .comment .replies .comment .replies {
			margin-left: 0em;
		}		
		
		.comment {
		    border-radius: 12px;
		    margin-top: 1em;
		}
		/* Use JavaScript So Each Subsequent Level Of Comment Replies Has Different Styling */
		.depthy0 {
			color: #5E5E1E;
		    border-radius: 32px;
		}
		.depthy1 {
			color: #1E5E5E;
		    border-radius: 32px;
			box-shadow: -10px 0 5px -12px rgba(0, 120, 60, .2), /* offset-x offset-y blur-radius spread-radius */
						 10px 0 5px -12px rgba(0, 120, 60, .2); /* offset-x offset-y blur-radius spread-radius */

		}
		.highlight {
			opacity: 0.5;
		}
		.replies {
			/* No Formatting Currently For This Class */
		}	
		#inline-reply-box {
			width: 100%;
			box-sizing: border-box;
			padding: 1em;
			display: none;
		}

		#inline-reply-box textarea {
			width: 100%;
			box-sizing: border-box;
		}
		.slabby {
			font-weight: bold;
		}	
		.slanty {
			font-style: italic;
		}
		.sliney {
			text-decoration: underline;
		}
		
		/* 1. Define the wiggle/shake keyframes */
		@keyframes wiggle-vertical {
		  0%, 100% {
			transform: translateY(0);
		  }
		  15% {
			transform: translateY(-4px);
		  }
		  30% {
			transform: translateY(3px);
		  }
		  45% {
			transform: translateY(-2px);
		  }
		  60% {
			transform: translateY(1px);
		  }
		  75% {
			transform: translateY(-1px);
		  }
		}

		/* 2. Apply it to the container */
		.wiggle-entrance {
		  /* Runs a 0.6-second animation using a smooth ease-in-out curve exactly once */
		  animation: wiggle-vertical 0.6s ease-in-out 1;
		  
		  /* Optional: Ensures the animation runs smoothly on modern hardware */
		  will-change: transform; 
		}
		
		/*
		 * ------------------------------------------------------------
		 * Loading Animations
		 * ------------------------------------------------------------
		 */	
		 
		.loady-ticker {
		  position: relative;
		  display: inline-block;
		}

		.loady-ticker span {
		  position: absolute;
		  top: 0;
		  left: 0;
		}

		.loady-one {
		  animation: loading-anim-one 2s steps(1, start) infinite;  /* 2s total loop time (1s for each emoji). steps(1, start) forces the opacity to change instantly without any smooth fading in-between. */
		}
		.loady-two {
		  animation: loading-anim-two 2s steps(1, start) infinite;  /* 2s total loop time (1s for each emoji). steps(1, start) forces the opacity to change instantly without any smooth fading in-between. */
		}

		@keyframes loading-anim-one {
		  0%, 100% {
			opacity: 0; /* Hide Cup Emoji (to show other Cup Emoji underneath) */
		  }
		  50% {
			opacity: 1; /* Instantly show Cup Emoji for the second half of the loop */
		  }
		}
		@keyframes loading-anim-two {
		  0%, 100% {
			opacity: 1; /* Hide Cup Emoji (to show other Cup Emoji underneath) */
		  }
		  50% {
			opacity: 0; /* Instantly show Cup Emoji for the second half of the loop */
		  }
		}
		
		/*
		 * ------------------------------------------------------------
		 * Archive Row
		 * ------------------------------------------------------------
		 */		
		
		.blog-row {
		  width: 100%;
		  height: 200px;
		  display: flex;
		  overflow: hidden;
		  border-radius: 14px;
		  box-shadow: 0 2px 8px rgba(60, 40, 25, 0.12);
		  margin: 20px auto;
          box-sizing: border-box;
		}
		
		.blog-row {
		  position: relative;
		  overflow: hidden;
		}

		/* Pseudo-element decoration: Right faded edge, to give the illusion text fades at the edges of a container */
		.blog-row::before {
		  content: "";
		  position: absolute;
		  top: 0;
		  right: 0;
		  width: 25px;
		  height: 100%;
		  pointer-events: none;
		  background: linear-gradient(
			to right,
			rgba(250, 242, 232, 0),
			#faf2e8
		  );
		}

		/* Pseudo-element decoration: Bottom faded edge, to give the illusion text fades at the edges of a container */
		.blog-row::after {
		  content: "";
		  position: absolute;
		  left: 0;
		  bottom: 0;
		  width: 100%;
		  height: 25px;
		  pointer-events: none;
		  background: linear-gradient(
			to bottom,
			rgba(250, 242, 232, 0),
			#faf2e8
		  );
		}

		.blog-row-image {
		  flex: 0 0 33.333%;
		  min-width: 0;
		  overflow: hidden;
		  z-index: 10;
		}

		.blog-row-image img {
		  width: 100%;
		  height: 100%;
		  display: block;
		  object-fit: cover;
		}

		.blog-row-content {
		  flex: 1 1 0;
		  min-width: 0;
		  padding: 24px;
		  box-sizing: border-box;
		}

		.blog-row-header {
		  display: flex;
		  align-items: baseline;
		  justify-content: space-between;
		  gap: 16px;
		}

		.blog-row-title {
		  margin: 0;
		  color: #3d3028;
		  font-size: 1.35rem;
		  line-height: 1.2;
		}

		.blog-row-time {
		  flex-shrink: 0;
		  color: #8a796c;
		  font-size: 0.8rem;
		}

		.blog-row-blurb {
		  margin: 0;
		  color: #5f5148;
		  font-size: 0.95rem;
		  line-height: 1.6;
		}

		@media (max-width: 640px) { /* Since the card is fixed at 600px x 200px, it could overflow on a small phone. We can make it shrink gracefully without changing its intended proportions: */
		  .blog-row {
			width: calc(100% - 32px);
		  }

		  .blog-row-content {
			padding: 18px;
		  }

		  .blog-row-header {
			display: block;
		  }

		  .blog-row-time {
			display: block;
			margin-top: 6px;
		  }
		}		
		
		/*
		* ------------------------------------------------------------
		* Submission Input Box
		* ------------------------------------------------------------
		*/
		
		.fonty {
			width:  35px;
			border: 1px solid #A0A0A0 !important;
			border-radius: 5px;
			
			/* The Following Block Makes Sure That The Buttons That Contain Emojis Don't Get Vertically Offset From The Others. Why Does This Happen? "... because browsers render text and emojis using different system fonts, leading to discrepancies in line-height, font-metrics, and vertical alignment ... flexbox ignores font-metric discrepancies and forces the browser to align the baseline or center of the items geometrically." */
			display: inline-flex;
			align-items: center;
			justify-content: center;
			vertical-align: middle; /* Ensures the buttons themselves align with text around them */
  
			/* Optional: Ensure a consistent line-height and height */
			height: 25px;
			padding: 0 16px;
		}
		
		.fonty.flippy {
			transform: scaleX(-1);
		}

		.submy {
			width: 100%;
			box-sizing: border-box;
		}
		
		/*
		* ------------------------------------------------------------
		* Hidden (for things like <label>'s, which screen readers should read, but are better to remain hidden for the current style)
		* ------------------------------------------------------------
		*/
		.visually-hidden {
			position: absolute;
			width: 1px;
			height: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
			border: 0;
		}