/* Declare fonts */
@font-face {font-family: "Zilla Slab"; font-style: normal; font-weight: 600;
  src: url("/style/fonts/ZillaSlab/ZillaSlab-SemiBold.ttf") format("truetype");}
@font-face {font-family: "Zilla Slab"; font-style: normal; font-weight: 700;
  src: url("/style/fonts/ZillaSlab/ZillaSlab-Bold.ttf") format("truetype");}
@font-face {font-family: "Zilla Slab"; font-style: italic; font-weight: 700;
  src: url("/style/fonts/ZillaSlab/ZillaSlab-BoldItalic.ttf") format("truetype");}

@font-face {font-family: "Outfit"; font-style: normal italic; font-weight: 100 800;
  src: url("/style/fonts/Outfit/Outfit-VariableFont_wght.ttf") format("truetype");}

@font-face {font-family: "Bangers"; font-style: normal; font-weight: 400;
  src: url("/style/fonts/Bangers/Bangers-Regular.ttf") format("truetype");}

@font-face {font-family: "OpenDyslexic"; font-style: normal; font-weight: 400 500;
  src: local("OpenDyslexic Regular"), local("OpenDyslexic-Regular"), url("/style/fonts/OpenDyslexic/OpenDyslexic-Regular.woff2") format("woff2");}
@font-face {font-family: "OpenDyslexic"; font-style: italic; font-weight: 400 500;
  src: local("OpenDyslexic Italic"), local("OpenDyslexic-Italic"), url("/style/fonts/OpenDyslexic/OpenDyslexic-Italic.woff2") format("woff2");}
@font-face {font-family: "OpenDyslexic"; font-style: normal; font-weight: 600 700;
  src: local("OpenDyslexic Bold"), local("OpenDyslexic-Bold"), url("/style/fonts/OpenDyslexic/OpenDyslexic-Bold.woff2") format("woff2");}
@font-face {font-family: "OpenDyslexic"; font-style: italic; font-weight: 600 700;
  src: local("OpenDyslexic Bold Italic"), local("OpenDyslexic-Bold-Italic"), url("/style/fonts/OpenDyslexic/OpenDyslexic-Bold-Italic.woff2") format("woff2");}


/* Base stylings */
	:root {
		--background-main: #545451;
		--background-alt: #393a3c;
		--block-color: rgba(255, 255, 255, 0.9);
		--accent-color: #ffc017;
		--accent-light: #ffd240;
		--text-color: #000000;
		--standout-color: #000000;
		--soft-text-color: #a5a5a5;
		--link-unvisited-color: #ff3131;
		--link-hover-color: #ff3131;
		--link-visited-color: #ff3131;
		--rule-color: lightgray;
		--highlight-background: #fee290;
		--highlight-border: #ffdb7c;
		--shadow-color: gray;
		--inset-color: #eeeeee;
		--color-blend: normal;
		--complaint-image: url(/style/img/complaint.png);
		--body-font: Optima, sans-serif;
		--font-size-offset: 1
	}


/* Alternate colors */

	:root[color-mode = "dark"] {
		--background-main: #545451;
		--background-alt: #393a3c;
		--block-color: rgba(255, 255, 255, 0.9);
		--accent-color: #ffc017;
		--accent-light: #ffd240;
		--text-color: #000000;
		--standout-color: #000000;
		--soft-text-color: #a5a5a5;
		--link-unvisited-color: #ff3131;
		--link-hover-color: #ff3131;
		--link-visited-color: #ff3131;
		--rule-color: lightgray;
		--highlight-background: #fee290;
		--highlight-border: #ffdb7c;
		--shadow-color: gray;
		--inset-color: #eeeeee;
		--color-blend: normal;
		--complaint-image: url(/style/img/complaint.png);
		--body-font: Optima, sans-serif;
		--font-size-offset: 1
	}

	:root[color-mode = "vgreen"] {
		--background-main: #545451;
		--background-alt: #393a3c;
		--block-color: rgba(255, 255, 255, 0.9);
		--accent-color: #ffc017;
		--accent-light: #ffd240;
		--text-color: #000000;
		--standout-color: #000000;
		--soft-text-color: #a5a5a5;
		--link-unvisited-color: #ff3131;
		--link-hover-color: #ff3131;
		--link-visited-color: #ff3131;
		--rule-color: lightgray;
		--highlight-background: #fee290;
		--highlight-border: #ffdb7c;
		--shadow-color: gray;
		--inset-color: #eeeeee;
		--color-blend: normal;
		--complaint-image: url(/style/img/complaint.png);
		--body-font: Optima, sans-serif;
		--font-size-offset: 1
	}


/* Alternate typefaces */
	:root[font-type = "dyslexic"] {
		--body-font: OpenDyslexic, sans-serif;
		--font-size-offset: 0.8
	}


/*######################*/
/*### FOOLS SETTINGS ###*/
/*######################*/

	.foolsnav {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
	}

	.foolsnav a {
		font-family: monospace;
		font-size: 0.9em;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 0.5em;
		gap: 0.5em;
	}

	.navicon {
		height: 60px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		pointer-events: none;
	}

	.foolsnav a:hover .navicon {
		transform: rotate(10deg);
	}

	.foolsimg:hover {
		transform: rotate(10deg);
	}

	#classicsnav {
		background-image: url("/images/events/fools/2026/classics.png");
		width: 37px;
	}

	#cocktailsnav {
		background-image: url("/images/events/fools/2026/cocktails.png");
		width: 35px;
	}

	#tigernav {
		background-image: url("/images/events/fools/2026/tiger.png");
		width: 58px;
	}

	#gamesnav {
		background-image: url("/images/events/fools/2026/games.png");
		width: 62px;
	}

	#playdatenav {
		background-image: url("/images/events/fools/2026/playdate.png");
		width: 72px;
	}

	#miscnav {
		background-image: url("/images/events/fools/2026/misc.png");
		width: 72px;
	}

	#blognav {
		background-image: url("/images/events/fools/2026/blog.png");
		width: 42px;
	}

	#aboutnav {
		background-image: url("/images/events/fools/2026/about.png");
		width: 58px;
	}

	.indexrule {
		margin: 0 auto 0.5em;
	}

	index-container {
		display: flex;
		flex-direction: row;
		gap: 20px;
	}

	index-column {
		display: flex;
		flex-direction: column;
		gap: 10px;
		width: 100%;
	}

	index-envelope {
		display: inline-block;
		width: 100%;
		background-image: url("/images/events/fools/2026/envelope.webp");
		background-size: contain;
		background-repeat: no-repeat;
		aspect-ratio: 504/330;
		padding-left: 20px;
	}

	index-envelope > h5 {
		transform: rotate(-5deg);
		margin-top: 0.5em;
	}

	index-block {
		padding-top: 1em;
	}

	index-block > h5 {
		margin-top: 0;
	}

	index-block img {
		display: block;
	}

	index-block p {
		padding: 0 !important;
	}

	floating-kettle {
		display: block;
		animation-name: floating;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
	}

	@keyframes floating {
		0%		{ transform: translate(0,  0); }
		50%		{ transform: translate(0, 10px); }
		100%	{ transform: translate(0, 0); }
	}

	.kettle1 {
		position: absolute;
		height: 150px;
		top: 0%;
		left: -35%;
		transform: rotate(-15deg) scaleX(-1);
	}

	.kettle2 {
		position: absolute;
		height: 150px;
		top: 0%;
		right: -35%;
		transform: rotate(15deg);
	}

/*#######################*/
/*### GLOBAL SETTINGS ###*/
/*#######################*/

/* Background and global font settings */
	body {
		background-image: url("/images/events/fools/2026/gingham.webp");
		font-family: var(--body-font);
		font-weight: 400;
		font-size: 1.2em;
		margin: 0;
	}

	p, li, th, td {
		font-size: calc(1em * var(--font-size-offset));
	}

/* Border class to handle border styling */
	.border {
		position: relative;
		border-image-source: url("/images/events/fools/2026/border.png");
		border-image-slice: 45 42 35 42;
		border-image-outset: 8px 9px;
		border-image-width: 20px;
		border-image-repeat: round round; 
		border-color: var(--block-color) transparent;
		border-style: solid;
		border-width: 20px;
		z-index: 2;
	}

	/*.border::before {
		content: "";
		position: absolute;
		top: -10px;
		left: -10px;
		right: -10px;
		bottom: -10px;
		border: 5px solid var(--accent-color);
		border-radius: 15px;
		z-index: -1;
	}*/


/* Set background and text colors for blocks */
	main, section, aside {
		background-color: var(--block-color);
		color: var(--text-color);
	}


/* Special font settings */
	h1, h2, h3, h4, h5, h6 {
		font-family: monospace;
		font-weight: 700;
	}

	h3, h4, h5, h6 {
		color: red;
	}

	h2 {
		text-indent: 1em hanging;
		color: #0047AB;
	}

	h2 { font-size: calc(2em * 1.1);}
	h3 { font-size: calc(1.25em * 1.1); }
	h4 { font-size: calc(1em * 1.1); }
	h5 { font-size: calc(0.83em * 1.1); }
	h6 { font-size: calc(0.75em * 1.1); }

	a {
		font-weight: 600;
	}

	strong, b {
		font-weight: 700;
		color: #0047AB;
	}


/* Set global margins for headers */
	h3 {
		margin-top: 2em;
	}

	h3, h4 {
		margin-bottom: 0;
	}


/* Set global image settings */
	img {
		max-width: 100%;
		height: auto;
		border-radius: 3px;
		mix-blend-mode: var(--color-blend)
	}


/* Make font size larger in primary content sections */
	header, main, section {
		font-size: 1.1em;
	}


/* Global link colors */
	a {
		color: var(--link-unvisited-color);
		text-decoration: none;
		font-weight: 400 !important;
	}

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


/* Specify links I don't want to appear visited for style reasons */
	.home-nav a:visited {
		color: var(--link-unvisited-color);
	}

	.breadcrumbs a:visited {
		color: var(--link-unvisited-color);
	}

	.chapternav a:visited {
		color: var(--link-unvisited-color);
	}

	.bottomnav a:visited {
		color: var(--link-unvisited-color);
	}


/* This has to be set last or it won't apply in all cases */
	a:hover {
		color: var(--link-hover-color) !important;
		text-decoration: underline;
		font-style: italic;
	}


/*##########################*/
/*### SECTION PROPERTIES ###*/
/*##########################*/

/* Management for site header. Includes link color overrides. */
	header {
		margin: 15px auto 15px auto;
		text-align: center;
		width: 900px;
		border: none !important;
		background-image: url("/images/events/fools/2026/skepperdoodle.webp");
		background-repeat: no-repeat;
		background-size: contain;
		aspect-ratio: 1389/150;
	}

	header > h1 {
		display: none;
	}

	header > p {
		display: none;
	}

	header h1, p {
		margin: 0;
	}

	header p {
		text-wrap: balance;
		color: var(--standout-color);
	}

	header a {
		color: var(--standout-color);
		text-decoration: inherit;
	}

	header a:visited {
		color: var(--standout-color);
		text-decoration: inherit;
	}

	header a:hover {
		color: var(--standout-color) !important;
		text-decoration: inherit;
	}


/* Class added to span tags to get the block titles */
	.blockname {
		display: block;
		font-family: monospace;
		font-weight: 600;
		color: red;
		margin: 0;
		padding: 0 0 15px !important;
		text-align: center;
		font-size: 14px !important;
	}


/* Puts everything below the header into a container and sets sizing. If the page will have columns it also creates a flexbox to handle layout. */
	.body-container-single {
		width: 900px;
		margin: 0 auto;
	}

	.body-container-columns {
		width: 900px;
		margin: 40px auto 20px auto;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 40px;
	}


/* Spacing and positioning for primary page blocks when columns are used */
	.main-content {
		width: 443px;
		margin: 0 auto 40px auto;
		padding: 10px 32px 20px 32px;
	}


/* Spacing and positioning for blocks in the sidebar */
	.side-container {
		display: flex;
		flex-direction: column;
		margin: 0 auto 20px auto;
		gap: 40px;
	}


/* Other settings for sidebar content */
	.side-content, .album {
		padding: 10px 15px 15px 15px;
		min-width: 187px;
	}

	.side-content {
		display: flex;
		flex-direction: column;
	}

	.side-content p {
		padding-bottom: 0.5em;
	}

	.side-content ul {
		margin: 0 -20px;
		max-width: 90%;
		list-style-image: url("/images/events/fools/2026/kettle-list.png");
	}

	.album {
		text-align: center;
	}

	.albumbox {
		display: flex;
		flex-direction: column;
	}

	.album p {
		margin: auto;
	}

	.album img {
		margin: auto auto 15px auto;
		display: block;
	}

	.rsslink {
		font-size: 0.8em;
		text-align: center;
		margin: 0 auto 0 auto;
	}


/* Settings for primary page content, which can be one main block or multiple section blocks (explains the doubling) */
	main, section {
		margin: 40px auto 50px auto;
		padding: 10px 20px 20px 20px;
	}

	main p {
		padding: 1.2em 0; 
		text-align: justify;
	}

	section p {
		padding: 1.2em 0; 
		text-align: justify;
	}

/* Lists */
	main ul {
		list-style-image: url("/images/events/fools/2026/kettle-list.png");
	}

	section ul {
		list-style-image: url("/images/events/fools/2026/kettle-list.png");
	}

	main li {
		padding-top: 0.4em;
		padding-bottom: 0.4em;
	}

	section li {
		padding-top: 0.4em;
		padding-bottom: 0.4em;
	}

	.home-nav li {
		list-style-type: none;
		padding-top: 0;
		padding-bottom: 0;
		margin-bottom: 0.7em;
	}

/* Slightly reposition lists for better spacing in column layout */
	.main-content ul {
		margin: 5px 0 -10px;	
	}

	.main-content li {
		margin-bottom: 1.5em;
		margin-left: -20px;
		margin-right: 5px;
	}

/* Horizontal rules */
	main hr {
		width: 95%;
		height: 2em;
		border: 0;
		background-image: url("/images/events/fools/2026/pens.png");
		background-repeat: no-repeat;
		background-size: contain;
		margin: 1.5em auto 1.5em auto;
	}

	section hr {
		width: 80%;
		color: var(--rule-color);
		margin: 1.5em auto 1.5em auto;
	}


/* Adds a little space under the links on the home page. Don't ask why this works. */
	.home-nav br {
		margin-bottom: 0.3em;
	}


/* Special styling for the Thoughts section on the home page */
	#thought_text {
		text-align: justify;
		width: fit-content;
		margin-left: auto;
		margin-right: auto;
	}


/* Context or flavor elements that are displayed under the page title */
	.byline {
		font-size: 0.8em;
		font-weight: 600;
		margin-bottom: 20px;
	}

	.quote {
		font-style: italic;
		margin-bottom: 20px;
		text-align: center;
		text-wrap: balance;
	}


/* Breadcrumb navigation top of page */
	.breadcrumbs {
		font-family: Optima, sans-serif;
		font-size: 0.75em;
		padding: 0;
		margin: 0;
	}


/* Prev/Top/Next navigation */
	.bottomnav {
		font-family: Optima, sans-serif;
		padding: 0;
		margin: 3em 0 0.5em 0;
		text-align: center !important;
	}

	.bottomnav a {
		font-weight: 600 !important;
		color: #0047AB;
	}

	.bottomnav a:visited {
		font-weight: 600 !important;
		color: #0047AB;
	}


/*###########################*/
/*### GENERAL-USE CLASSES ###*/
/*###########################*/

/* Classes for text styling */
	.bolded {
		font-weight: 700;
		color: #0047AB;
	}

	.semi-bolded {
		font-weight: 600;
	}

	.italics {
	font-style: italic;
}


/* Prevent text from using OpenDyslexic font */
	.font-stable {
		font-family: Outfit, sans-serif !important;
	}


/* Class to easily center text on the page. Optional balance class for nicer wrapping */
	.centertext {
		text-align: center !important;
	}

	.balance {
		text-wrap: balance;
	}


/* Class to easily reduce the width of anything stretching across the page */
	.half {
		width: 50%;
		margin-left: auto;
		margin-right: auto;
	}

	.three-q {
		width: 75%;
		margin-left: auto;
		margin-right: auto;
	}


/* Style for skip links */
	.skip {
		color: black !important;
		background-color: #ffc017;
		border: 3px solid black;
		border-radius: 15px;
		padding: 15px 10px;
		text-decoration: underline;
		text-align: center;
		text-wrap: balance;
		font-size: 14px;
	}

	.skip:visted {
		color: black !important;
	}

	.skip:hover {
		color: black !important;
	}


/* Skip from header to main content */
	.header-skip {
		position: absolute;
		top: -1000px;
		overflow: hidden;
		width: fit-content;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 50;
	}

	.header-skip:focus {
		top: 0;
	}


/* Imagebox settings for general image/caption handling */
	.imagebox {
		margin: 25px auto 15px auto;
		display: block;
	}

	.imagebox img {
		display: block;
		margin: 0 auto;
	}

	.imagebox a {
		display: inline-block;
	}

	.imagebox p {
		margin: 0 auto;
		padding: 1.2em 0 0 0;
		text-align: center;
		text-wrap: balance;
		color: var(--soft-text-color);
		font-size: 0.8em;
	}

	figure {
		margin: 1.5em auto 2em auto;
		display: block;
		max-width: 100%;
	}

	figure img {
		display: block;
		margin: 0 auto;
	}

	figure>a:has(img) {
		display: block;
		margin: 0 auto;
	}

	figcaption {
		margin: 0 auto;
		padding: 1.2em 0 0 0;
		text-align: center;
		text-wrap: balance;
		color: var(--soft-text-color);
		font-size: 0.8em;
	}


/* For iframes, used for YouTube embeds so far */

	iframe {
		max-width: 100%;
	}


/* Div to stylize back-and-forth dialogue */
	.dialogue {
		padding: 1.2em 2em 0.5em 2em;
	}

	.dialogue p {
		margin-bottom: 0.5em;
		padding: 0;
	}

/* Class to stylize written content, like a letter or quote */
	.blockquote {
		width: 80%;
		margin-left: auto;
		margin-right: auto;
	}


/* For tiny but still-readable text. Weird how much use I've gotten out of this so far. */
	.fineprint {
		font-size: 0.6em;
	}


/* I used this in a single blog post to mimic a signature. It's here if I need it again. */
	.signed {
		font-style: italic;
		text-align: right;
		padding-top: 0;
	}


/* Remove bullets from unordered lists or condense the list items */
	.nobullets li {
		list-style-type: none;
	}

	.tightlist li {
		margin-bottom: 0;
		padding-top: 0;
		padding-bottom: 0;
	}


/* Kinda adds a "sticky note"-like block to the page in order to call out something */
	.highlight {
		margin: 10px 30px;
		padding: 20px 30px;
		background-color: var(--highlight-background);
		border: solid 1px var(--highlight-border);
		box-shadow: 5px 5px 8px var(--shadow-color);
	}


/* For pages I want side content on but the size discrepancy means that a side-by-side layout is impractical; insets a box in the content instead */

	.inset-container {
		position: relative;
		float: right;
		width: 30%;
		margin: 1.2em 0 1em 32px;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.inset-box {
		background-color: var(--inset-color);
		padding: 10px;
		font-size: 0.8em;
	}

	.inset-box p {
		padding: 5px 0;
	}

	.inset-box ol {
		margin: 5px 0 5px -10px;
	}

	.inset-box ul {
		margin: 5px 0 5px -10px;
	}

	.inset-box li {
		line-height: 1.25;
		padding-top: 0;
	}

	.inset-skip {
		position: absolute;
		top: -10px;
		left: -10000px;
		overflow: hidden;
	}

	.inset-skip:focus {
		left: 15%
	}

	.non-inset figure>a {
		display: flow-root;
	}


/* Styling for Skep's Complaint Corner */
	.complaint-corner {
		position: relative;
		margin: 40px 0;
		padding: 0 120px; /* Adjust based on your image width */
		display: flex;
		align-items: center;
		text-align: center;
		font-family: "Bangers", "Zilla Slab", sans-serif;
		font-size: 2.5em;
		font-weight: bold;
		background: linear-gradient(60deg, 
			#ff0000, #ff8000, #ffff00, #80ff00, 
			#00ff00, #00ff80, #00ffff, #0080ff, 
			#0000ff, #8000ff, #ff00ff, #ff0080
		);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		background-size: 400% 100%;
		animation: rainbow-loop 10s linear infinite;
	}

	@keyframes rainbow-loop {
		0% { background-position: 0% 50%; }
		100% { background-position: 400% 50%; }
	}

	.complaint-corner::before,
	.complaint-corner::after {
		content: '';
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		height: 150px;
		width: 100px;
		background-image: var(--complaint-image);
		background-size: contain;
		background-repeat: no-repeat;
	}

	.complaint-corner::before {
		left: 0;
	}

	.complaint-corner::after {
		right: 0;
		transform: translateY(-50%) scaleX(-1);
	}


/* Rare instance of code sample handling. Properties for inline <code> tag, or codeblock class for <pre> tag. */
	code {
		color: black;
		background-color: #F2F2F2;
		line-height: 1.2em;
	}

	.codeblock {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		padding: 10px;
		color: black;
		background-color: #F2F2F2;
		border: solid #E3E3E3;
		border-radius: 5px;
	}


/* Easily splits a list of items into two columns. Wrap the list in a div. */
	.col-two {
		max-width: 100%;
		margin: 1em 0;
		column-count: 2;
		column-rule: 1px solid var(--rule-color);
		column-gap: 20px;
	}


/* Nicer solo lists on sidebars */
	.side-list-nopad {
		padding: 0;
		margin: 0 auto !important;
		list-style-type: none !important;
	}

	.side-list-nopad li {
		margin-bottom: 0.6em;
		line-height: 1em;
	}


/* Class for links/buttons in table format */
	.button-table {
		border-collapse: collapse;
		border-width: 0;
		width: 90%;
		margin: 10px auto 0;
		font-size: 0.9em;
		text-indent: 0.5em hanging;
	}

	.button-table td {
		padding: 5px 0 5px 10px;
		font-weight: 600;
		line-height: 31px;
	}

	.button-table img {
		border-radius: 0;
	}

	.button-column {
		width: 88px;
		font-size: 0.5em;
	}

	.button-column a {
		display: inline-block;
		vertical-align: top;
	}

	.button-column img {
		display: block;
	}


/* Email obfuscation */
	div.email > span:nth-child(1) {
		display: none;
	}

	div.email > span:nth-child(3) {
		display: none;
	}


/* Class I need for dumb color options */
	.standout {
		color: var(--standout-color);
	}


/* Classes for tables mimicking signup sheets */
	.signup-sheet {
		width: 70%;
		margin: 0 auto;
		text-align: center;
		border-collapse: collapse;
		border: solid white 1px;
	}

	.signup-header {
		padding-bottom: 5px;
	}

	.signup-entry {
		border-bottom: solid 1px var(--rule-color);
	}

	.signup-entry td {
		width: 50%;
		padding-bottom: 5px;
	}


/* Classes for image/text combo entries. Made for the potluck. */

	.image-entry h3 {
		text-align: center;
		text-wrap: balance;
	}

	.image-entry img {
		width: 70%;
		margin-left: auto;
		margin-right: auto;
	}

	.image-entry-toptext {
		padding-top: 0.5em;
		padding-bottom: 0.5em;
		text-align: center;
		text-wrap: balance;
	}


/* Class currently only used to vertically align the P tags in the Uses links section better */

	.valignp p {
		padding-top: 0.25em;
		padding-bottom: 0.25em;
	}


/*######################*/
/*### ACTION BUTTONS ###*/
/*######################*/

/* Styles the button */

	.fab {
		z-index: 40;
		width: 50px;
		height: 50px;
		position: fixed;
		background: #ffc017;
		color: black;
		border: none;
		border-radius: 50%;
		padding: 0;
		font-size: 32px;
		text-align: center;
		cursor: pointer;
		box-shadow: 0 4px 7px rgba(0, 0, 0, 0.4);
		transition: transform 0.3s ease-in-out;
	}

	.fab:hover {
		background: #ffd240;
	}

	#fabOptions {
		display: none;
		bottom: 15px;
		left: 30px;
		background-image: url("/style/img/three-dots.svg");
		background-size: 36px 36px;
		background-position: center;
		background-repeat: no-repeat;
	}

	.options-open {
		background-image: url("/style/img/x.svg") !important;
	}

	options-box {
		z-index: 39;
		display: none;
		color: var(--text-color);
		background-color: var(--block-color);
		width: 300px;
		max-width: 85vw;
		position: fixed !important;
		bottom: 85px;
		left: 35px;
		padding: 10px 0;
	}

	options-scroll {
		margin: 0 0 20px;
		padding: 0 15px;
		max-height: 50vh;
		min-height: 10vh;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	options-category {
		display: grid;
		grid-template-columns: 3fr 1fr;
		gap: 5px;
	}

	options-category>p {
		font-family: Outfit, sans-serif !important;
		font-size: 1em !important;
	}

	.options-cat-header {
		grid-column: span 4;
		font-size: 0.9em !important;
		font-weight: 600;
	}

	.options-name {
		grid-column: span 3;
	}

	.options-toggle {
		text-align: right;
	}



/*#########################*/
/*### EMAIL OBFUSCATION ###*/
/*#########################*/

	.email-protection {
		unicode-bidi: bidi-override;
		direction: rtl;
		display: inline-block;
	}

	.email-wrap {
		position: relative;
	}

	.email-wrap::after {
		content: attr(data-domain);
	}

	.email-at {
		font-size: 0;
	}

	.email-at::after {
		content: '\0040';
		font-size: initial;
	}


/*#####################*/
/*### MOBILE LAYOUT ###*/
/*#####################*/

	@media (max-width: 900px) { 
		
		index-container {
			flex-direction: column;
		}
		
		floating-kettle {
			display: none;
		}
		
		index-envelope {
			font-size: 0.9em;
		}
		
		/* General layout changes */
		.border {
			width: 80%;
			margin: 20px auto 40px auto;
		}

		header {
			margin: 20px auto 20px auto;	  
		}

		.body-container-single {
			width: 100%;
		}

		.body-container-columns {
			width: 100%;
			flex-direction: column;
			align-items: center;
			gap: 0;
			margin-top: -20px;
		}

		.main-container, side-container {
			flex-grow: initial;
		}

		.main-container {
			width: 100%;
		}

		main, section {
			margin: 20px auto 20px auto;
			font-size: 1.1em;	
		}
		
		.side-container {
			width: 100%;
			margin: 0 auto;
		}

		.side-content, .album {
			padding: 15px 32px;
			margin: 0 auto;
		}

		
		/* Adjust text on page */
		h2 {
			text-indent: 0;
		}
		
		main li {
			margin-left: -16px;
		}

		section li {
			margin-left: -16px;
		}

		.main-content p {
			text-align: left;
		}

		main p {
			text-align: left;
		}

		section p {
			text-align: left;
		}

		.side-content ul {
			margin: 0;
			max-width: 90%;
		}

		.dialogue {
			padding: 1.2em 1em 0.5em 1em;
		}
		
		/* For Thoughts on home */
		#thought_text {
			text-align: left;
		}
		
		/* For links page */
		.button-table {
			width: 80%;
		}
		
		/* For Event sign-ups */
		.signup-sheet {
			width: 90%;
		}
		
		/* For image/text combo entries */
		.image-entry img {
			width: 100%;
			margin-left: auto;
			margin-right: auto;
		}
		
		/* For site options button */
		#fabOptions {
			bottom: 5px;
			left: 5px;
		}
		
		options-box {
			bottom: 35px;
			left: 25px;
			width: 300px !important;
		}
	}

	@media (max-width: 675px) { 
		
		.body-container-single {
			width: 95vw;
			margin: inherit 5px;
		}
		
		.border {
			width: 95%;
			box-sizing: border-box;
		}
		
		/* For pages that use inset sidebar */
		.wrapper-for-inset {
			display: flex;
			flex-direction: column;
			gap: 20px;
		}
		
		.non-inset {
			order: 1;
		}
		
		.inset-container {
			order: 2;
			width: 100%;
			margin: 0;
			float: clear;
		}
		
		.inset-box {
			background-color: var(--inset-color);
			padding: 10px 2em;
			font-size: 0.8em;
		}
		
		.inset-box ol {
			margin: 5px 0;
		}
		
		.inset-box ul {
			margin: 5px 0;
		}
		
		/* Complaint corner changes */
		.complaint-corner {
			padding-right: 0;
		}
		
		.complaint-corner::after {
			height: 0;
			width: 0;
			background-image: none;
		}
	}

	@media (max-width: 500px) { 
		
		/* For links page */
		.button-table {
			width: 100%;
		}
		
		index-envelope {
			font-size: 0.7em;
		}
	}