@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Jacquard+24&display=swap');

/* 🌸🌼🌺🌸🌼🌺🌸🌼🌺🌸🌼🌺🌸🌼🌺🌸🌼🌺🌸🌼🌺🌸🌼🌺🌸🌼🌺 */
/*     🕯️    🏺    📚     🖼️    🕰️    🏺    🕯️     */
/*    Welcome to our house! In this house, we    */
/*             have a few rules:                 */  /* < is anyone else seeing this???? What is happenings? */
/*       1. Pump up the champagne!               */  /* Note to VSCode devs: I do not appreciate you         */
/*       2. Spill the divine!                    */  /* stealing my spaces. That is all for know. Thanks for */
/*       3. Become rotating!                     */  /* joining me in this little secondary space here. It   */
/* 🌸🌼🌺🌸🌼🌺🌸🌼🌺🌸🌼🌺🌸🌼🌺🌸🌼🌺🌸🌼🌺🌸🌼🌺🌸🌼🌺 */  /* been a pleasure.                                     */

* {
	box-sizing: border-box;
}
:root {
	scroll-behavior: smooth;
}
.spring {
	--bg: radial-gradient(at top right, white, #def 60%);
	--color-1: #5bb450;
	--color-2: #46923c;
	--color-3: #3b8132;
	--color-4: #276221;
}
.summer {
	--bg: linear-gradient(lavender, salmon);
	--color-1: teal;
	--color-2: #078e92;
	--color-3: #065867;
	--color-4: #00343a;
}
.autumn {
	--bg: #f3e3d3;
	--color-1: #b12000;
	--color-2: #db5400;
	--color-3: #f18407;
	--color-4: #6f2c0c;
}
.winter {
	--bg: #d3d9d4;
	--color-1: #748d92;
	--color-2: #124e66;
	--color-3: #2e3944;
	--color-4: #212a31;
}
.tucson {
	--bg: #fbe9d0;
	--color-1: #90aead;
	--color-2: #e64833;
	--color-3: #874f41;
	--color-4: #244855;
}
.luscious {
	--bg: #e3e9e4;
	--color-1: #84ceeb;
	--color-2: #5ab9ea;
	--color-3: #5680e9;
	--color-4: #8860d0;
}
.mossy {
	--bg: #e5edf0;
	--color-1: #6f866c;
	--color-2: #506f57;
	--color-3: #435b4d;
	--color-4: #1c342c;
}
.scarfy {
	--bg: #f3e3d3;
	--color-1: darkred;
	--color-2: darkolivegreen;
	--color-3: sienna;
	--color-4: #424;
}
.commodore {
	--bg: linear-gradient(black 50%, #111 50%) top/4px 4px;
	--color-1: transparent;
	--color-2: transparent;
	--color-3: transparent;
	--color-4: transparent;
}
.aqua {
	--bg: royalblue url(images/bg-mac-classic.jpg) center/cover no-repeat fixed;
	--color-1: #eee;
	--color-2: #eee;
	--color-3: #eee;
	--color-4: #eee;
}

body {
	display: grid;
	grid: 80px 1fr 20px / auto; /* header main footer */
	height: 100dvh;
	font: 300 18px Outfit, sans-serif;
	background: var(--bg, white);
	margin: 0;
	padding: 0 0.25rem 0.25rem 0.25rem;
	perspective: 500px;
}
h2 {
	font-size: 2em;
	font-weight: 300;
	margin: 0 1rem;
	text-transform: lowercase;
}
a {
	color: inherit;
}
header {
	/* height is defined by body grid */
	text-align: center;
	cursor: pointer;
}
.homebutton {
	appearance: none;
	position: absolute;
	top: 20px;
	left: 10px;
	background: var(--color-4, #333);
	color: white;
	border: none;
	border-radius: 2rem;
	font: inherit;
	cursor: pointer;
	padding: 0.5rem 1rem;
	opacity: 0; /* until a section is expanded */
	transition: all 0.2s;
}
.homebutton:hover {
	background: var(--color-3, #555);
}
.homebutton:active {
	transform: scale(0.95);
}
body:has(.expanded) .homebutton {
	opacity: 1;
}
.homeicon {
	display: inline-grid;
	grid: 1fr 1fr / 1fr 1fr;
	grid-gap: 2px;
	width: 1.5rem;
	height: 1.5rem;
	vertical-align: middle;
}
.homeicon > div {
	background: currentColor;
}
.homeicon div:nth-child(1),
.homeicon div:nth-child(4) {
	border-radius: 0 0.25rem;
}
.homeicon div:nth-child(2),
.homeicon div:nth-child(3) {
	border-radius: 0.25rem 0;
}
.homebutton span {
	display: none; /* on mobile */
}
main {
	position: fixed;
	top: 80px;
	left: 0;
	bottom: 20px;
	right: 0;
	transform-style: preserve-3d;
}
#animated-signature {
	/* remember these are initial values before the animation changes them */
	width: 300px;
	margin-top: -10px;
	fill: none;
	stroke: var(--color-4, #333);
	stroke-width: 12px;
	stroke-linecap: round;
	transition: all 0.2s;
	z-index: 667;
}
#animated-signature:hover {
	stroke-width: 16px;
}
#animated-signature:active {
	stroke-width: 8px;
	transform: scale(0.95);
}
path {
	stroke-linejoin: round;
}
#path-h		{ stroke-dasharray:750;  stroke-dashoffset:750;  animation:draw 0.5s linear 1s   1 forwards; }
#path-enry	{ stroke-dasharray:743;  stroke-dashoffset:743;  animation:draw 1s   linear 1.5s 1 forwards; }
#path-d		{ stroke-dasharray:643;  stroke-dashoffset:643;  animation:draw 0.5s linear 2.5s 1 forwards; }
#path-avid	{ stroke-dasharray:797;  stroke-dashoffset:797;  animation:draw 1s   linear 3s   1 forwards; }
#path-f 	{ stroke-dasharray:338;  stroke-dashoffset:338;  animation:draw 0.3s linear 4s   1 forwards; }
#path-f-dash{ stroke-dasharray:73;   stroke-dashoffset:73;   animation:draw 0.2s linear 4.3s 1 forwards; }
#path-loyd	{ stroke-dasharray:1298; stroke-dashoffset:1298; animation:draw 1.2s linear 4.5s 1 forwards; }
@keyframes draw {
	100% {
		stroke-dashoffset: 0;
	}
}
body:has(.expanded) #animated-signature {
	transform: translatex(30px);
}

section {
	/* display: grid;
	grid: auto auto 1fr / auto; */ /* I think this was only necessary for the horizontal-scrolling thing? */
	position: relative; /* for positioning gradients */
	border-radius: 0.5rem;
	box-shadow: 0 3px 4px #0002;
	padding: 0.5em;
	color: white;
	position: fixed;
	width: calc(50vw - 1rem - 0.25rem); /* minus 1/2 padding and 1/2 grid-gap */
	height: calc(50vh - 0.5rem - 60px); /* minus 1/2 padding and 1/2 grid-gap and 1/2 header+footer */
	backface-visibility: hidden;
	overflow-y: auto;
	transition: all 1.5s cubic-bezier(.87,.3,.36,1.09);
	cursor: pointer;
}
section::after {
	/* leafy gradient */
	position: absolute; /* this can't be fixed for some reason */
	content: '';
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
}
section.hidden {
	width: 0;
	height: 0;
	padding: 0; /* allows grid widths of 0 to actually be 0 */
	opacity: 0;
}
section.expanded {
	width: calc(100vw - 1rem);
	height: calc(100vh - 2rem - 100px); /* minus padding, header+footer*/
	top: 0rem !important;
	bottom: 0rem !important;
	left: 0.5rem !important;
	right: 0.5rem !important;
	cursor: default;
}

.section-icon {
	display: block;
	width: 60px;
	height: 60px;
	margin: 1rem 1rem 0 1rem;
}
section .section-content,
section p {
	display: none; /* hide p on mobile, will show on desktop */
}
section.expanded .section-content,
section.expanded p {
	display: block;
}

section#music {
	background-color: var(--color-1);
	transform-origin: bottom right;
	bottom: calc(50% + 0.25rem);
	right: calc(50vw + 0.25rem);
	border-radius: 0.5rem 4rem 0 4rem;
}
section#music::after {
	background: linear-gradient(to top right, transparent, #fff1 50%, #0001 50%, transparent 50%);
	mask-image: linear-gradient(transparent, black); /* opacity gradient */
}
section#music:not(.expanded):active {
	transform: rotatex(5deg) rotatey(-5deg);
}
section#music.hidden {
	transform: scale(0.5) rotatex(90deg) rotatey(-90deg);
}
section#webdesign {
	background-color: var(--color-2);
	transform-origin: bottom left;
	bottom: calc(50% + 0.25rem); /* minus half header plus some padding */
	left: calc(50vw + 0.25rem);
	border-radius: 4rem 0.5rem 4rem 0;
}
section#webdesign::after {
	background: linear-gradient(to top left, transparent, #fff1 50%, #0001 50%, transparent 50%);
	mask-image: linear-gradient(transparent, black); /* opacity gradient */
}
section#webdesign:not(.expanded):active {
	transform: rotatex(5deg) rotatey(5deg);
}
section#webdesign.hidden {
	transform: scale(0.5) rotatex(90deg) rotatey(90deg);
}
section#writing {
	background-color: var(--color-3);
	transform-origin: top right;
	top: calc(50% + 0.25rem);
	right: calc(50vw + 0.25rem);
	border-radius: 4rem 0 4rem 0.5rem;
}
section#writing::after {
	background: linear-gradient(to bottom right, transparent, #0001 50%, #fff1 50%, transparent);
	mask-image: linear-gradient(black, transparent); /* opacity gradient */
}
section#writing:not(.expanded):active {
	transform: rotatex(-5deg) rotatey(-5deg);
}
section#writing.hidden {
	transform: scale(0.5) rotatex(-90deg) rotatey(-90deg);
}
section#more {
	background-color: var(--color-4);
	transform-origin: top left;
	top: calc(50% + 0.25rem);
	left: calc(50vw + 0.25rem);
	border-radius: 0 4rem 0.5rem 4rem;
}
section#more::after {
	background: linear-gradient(to bottom left, transparent, #0001 50%, #fff1 50%, transparent);
	mask-image: linear-gradient(black, transparent); /* opacity gradient */
}
section#more:not(.expanded):active {
	transform: rotatex(-5deg) rotatey(5deg);
}
section#more.hidden {
	transform: scale(0.5) rotatex(-90deg) rotatey(90deg);
}

.bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0.1;
	filter: blur(0.5px);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: " ";
	pointer-events: none;
}
#music .bg {
	background: url('images/banner-music.png') top left/100vw no-repeat;
}
#webdesign .bg {
	font: 5vw monospace;
}
#webdesign .bg::after {
	content: "▮";
	font-size: 8vw;
	position: absolute;
	right: 0;
	top: -0.3em;
	animation: cursorblink 1s steps(1) infinite;
}
#writing .bg {
	font: 5vw serif;
}
#writing .bg::after {
	content: "｜";
	position: absolute;
	right: -0.2em;
	top: -0.3em;
	animation: cursorblink 1s steps(1) infinite;
}
@keyframes cursorblink {
	0%, 50% { opacity: 1; }
	51%, 100% { opacity: 0; }
}

/* -- SPECIAL THEMING --- */
body.scarfy section {
	background-image:
		linear-gradient(transparent 90px, #0002 100px, transparent 110px),
		linear-gradient(to right, firebrick 0%, firebrick 10%, goldenrod 10%, goldenrod 15%, darkolivegreen 15%, darkolivegreen 20%, tan 20%, tan 40%, sienna 40%, sienna 50%, lightslategray 50%, lightslategray 60%, firebrick 60%, firebrick 65%, indigo 65%, indigo 70%, darkolivegreen 70%,darkolivegreen 100%) !important;
	background-position: top left, top left;
	background-size: cover, 300px 100px;
	background-repeat: repeat-x, repeat-x;
	background-attachment: scroll, scroll;
}
body.scarfy section::after {
	/* replace leaf gradient with cotton texture */
	background-image: url(images/cotton-123rf.png) !important;
	background-size: 300px !important;
	background-repeat: repeat !important;
	mask-image: none !important;
	height: 100px;
	z-index: -1;
}
body.scarfy section .bg {
	display: none !important;
}
body.scarfy section h2 {
	font: 60px 'Jacquard 24';
}
body.commodore {
	font-family: monospace;
}
body.commodore #animated-signature {
	stroke: lime;
	stroke-width: 6px;
}
body.commodore section,
body.commodore .homebutton,
body.commodore select,
body.commodore footer {
	color: lime;
	border: 1px solid lime;
	border-radius: 0 !important;
	text-shadow: 0 0 4px lime;
	transition: none;
}
body.commodore section:active {
	transform: none !important;
}
body.commodore h2 {
	font-size: 2em;
}
body.commodore .bg,
body.commodore section::after {
	display: none !important;
}
body.commodore img {
	filter: sepia(1) hue-rotate(45deg) saturate(3);
}
@font-face {
	font-family: 'Lucida Grande';
	src: 
		local('Lucida Grande'),
		local('Lucida-Grande'),
		url('/os/lucida.woff') format('woff'),
		url('/os/lucida.ttf') format('truetype');
}
body.aqua {
	font: 16px 'Lucida Grande','Helvetica','Arial',sans-serif;
}
body.aqua section {
	background:
		linear-gradient(#0000 50%,#0002 99%, #0006) top/24px 24px repeat-x,
		linear-gradient(white 50%, #eee 50%) top / 5px 5px !important;
	color: #333;
	border-radius: 0.5rem !important;
	box-shadow: 0 10px 20px #0009;
	padding-top: 24px;
	transform-origin: center !important;
	transition: all 0.3s ease;
}
body.aqua section::after {
	display: none;
}
body.aqua section.hidden {
	transform: scale(0) !important;
}
body.aqua section:not(.expanded):active {
	transform: scale(0.9) !important;
}
body.aqua section .bg {
	display: none !important;
}
body.aqua section h2 {
	font-size: 1.5em;
	font-weight: bold;
	text-transform: none;
}
body.aqua select {
	appearance: none;
	border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAaCAYAAAAqjnX1AAAFQElEQVR4AdWYA7AryxZAVw8zSf714bdt27ZtFb9tW+WvZ1vXtm3b9gkaLz0zXXVuUjc5z++tqq7d41V7d48ErQgXefAxTbFFROQtyJvv1j1IcrYpQNrm1jVnzQMKT37yk9/2kpe85GMveMELXtfX19cfBAHGGNrxzbvCITgIMjxAo41BS4NRCj1Qp35w9365b8VsfWrZjai9k4EKoAEz+MjkiU984rs/9alP/frlL3/5M7q7uxk2bBhhGOL7Pu24ZdlpxnSNwGEMCNGqaAwO0JlBTUoOn6qxZudJli3fx67ZMzea/bf/EvaNAwYA7coZAqMbgv/50Ic+9N4nPelJdHV1pXJCCDzPox3TNp5h9PBhLVIiTZoBT6B1ZmnPZ9cbTVohaTR1aTh2psbUVQe4dexGaktuuYszY78OHAPqARk2jnjZy172Cps922yZrZw9aScqdU1NmUxOgMukMCLtk25zGITOdjJolAKlIYkDntw7kmRUmVrvC1/RkBwBnHKSAvCBUmM8dpXL5VTQYYzpKHrkVI0gkoMMm+ekQRtweIh0V2msoEZKk5ZdGhg5ehineh7fxRZKbvI6GwHESZJQLBZTMaUUWmuAjpLr956g6pXT4zxfYLShmVUzb+P5b/ggDg0YnckPVCU1BcdOV4jCAFFKMBDnXgyW9AqFAlEUWSnXhpTJE6cV51SQZVGBNgqBwGDSuG/zMhZOvJZC1xPof9qLsm3CRyuF1HaoCM5XDGerPsUkpjws4Qx4zZIWYTNpJe2MtuPRNjt5jKEtYZwdY7RGNE2ysycOMevqP7Bv09I0fuRHl1Ie2YPRIIMQpEKbAD+oE0WaUlIgKUacyQWbJa2QvZgdk7ZvJYdU7kIhwVbB93wsSisca1bMoHruNBYbdzSWX/quL+AJUAakVNQihR9GaBFSGlAUkwTLRSWd6OCSdyIpxhSTAgiRZVOEaX/61X9lwV3/59j+HdkE27OZuTf9C1U9y5s+/X2UlCh7F5EGqKVlLyYRSRxdXNIKDS6z1trGjk8cO0xsiYwmxe3+zi/9JG20ks3uIEBKSRAFCC+kSp1CoUZcbJG87xSLEMetT5rOCKRsyCmQKiCJSe8ucdQhk67ktm/LPpTZbavj+bQw7v9/ZuZN/22UeTuOrsc+iTd89Gu8+ys/xBL5IBQo5VEXEXFYIY7j9mPSlduKuWgMHYlDUAo8D0xe8vd//Yc8asRIJl7+T/Zv30j/k57BO77wbd708a/hkIo2tMmkxWYRyEU17fBDCELwA/JjQOssvvzt72Xu7ZdjKTeEX/nO92KrqQFMvq+BQgkqGoIwJgjCi0oaJ9n63PY7TByIQnBoA2GQxd7H9PGlX/6dy3/3fb7ws78ypq8vu/1o3FsbwkoPQBhBnMTpUwswzZIG0Hv27DnReIcc6SSHSpzYbLpq0MJzX/VK3v2Fr6fR4eWZlhoCCXEB/Ar4HtROHTjhnpzNktU5c+ZsbrwJvdxlcKgIz2bhQkFXbjfj3/bpz6Z9bQCyTFuMAh8IBYT5BDy6fuZm6zNY0r22nxs7duys17zmNU984xvf2H1PRJMyeAEYlUU/ACXb346sjMWvAxLkAODBnjWLDx9Yfscs65N7GZdJCZxcunTp5J/97GfDPvnJT77uPe95z+MbL78lhkC9lgmJACATNIa2uH2Uyo7fv2P7uTl3Td41/46rZ5/YvnSy9cm9uODzAegGngQ8Ie+X8mwLHjgMIPPMHQZ2Atvz/gCgB4/JSr7Bxv25YAx4D4KkBqq5qM3g6dzDPGI+aR8RPwfuBoJZLx7r11bjAAAAAElFTkSuQmCC);
	border-image-slice: 12 24 12 9 fill;
	border-image-width: 12px 24px 12px 9px;
	border-image-repeat: stretch stretch;
	border-width: 2px 24px 4px 4px;
	height: 26px;
	font-size: 13px;
	color: #333;
}
body.aqua button {
	border-image-source: url(data:image/png;base64,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);
	border-image-slice: 15 20 fill;
	border-image-width: 15px 20px;
	border-width: 6px 12px 9px;
	image-rendering: pixelated;
	padding: 1px 8px;
	font-size: 13px;
	line-height: 15px;
	text-shadow: 0 2px 2px rgba(0,0,0,.5);
	color: #333;
	border-radius: 0;
	background: transparent;
	padding: 1em;
	transition: none;
}
body.aqua button:hover {
	background: transparent;
}
body.aqua button:active {
	transform: none;
	filter: brightness(0.8);
}
body.aqua .section-icon {
	display: none !important; /* even on mobile */
}
body.aqua h2::before {
	display: block;
	content: '';
	width: 48px;
	height: 48px;
}
body.aqua #music h2::before {
	background: url('images/icon-itunes.png') center/contain no-repeat;
}
body.aqua #webdesign h2::before {
	background: url('images/icon-ie5.webp') center/contain no-repeat;
}
body.aqua #writing h2::before {
	background: url('images/icon-textedit.webp') center/contain no-repeat;
}
body.aqua #more h2::before {
	background: url('images/icon-finder.png') center/contain no-repeat;
}

/* --- Item grids --- */
.items {
	position: relative; /* prevent .bg rendering above it */
	display: grid;
	grid: auto-flow / 1fr 1fr 1fr 1fr;
	gap: 2px;
}
.items img {
	object-fit: cover;
	width: 100%;
}
.items h3 {
	margin: 0;
}
.items a {
	text-decoration: none;
}
.items .info {
	display: none; /* for now? */
}

footer {
	grid-row: 3; /* have to manually define because main is fixed-position */
	align-self: center;
	text-align: right;
	font-size: 0.8em;
	color: var(--color-1, #0006);
	padding: 0 0.5rem;
}
footer select {
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 1em;
	padding: 0 0.5em 0.1em;
	color: inherit;
	font: inherit;
}

@media screen and (min-width:700px) {
	#animated-signature {
		width: 350px;
		margin-top: -20px;
	}
	body:has(.expanded) #animated-signature {
		transform: none; /* undo shift necessary on mobile screens */
	}
	.homebutton {
		left: 30px;
	}
	.homebutton span {
		display: inline;
	}
	h2 {
		font-size: 7vw;
		margin: 0.5rem 0 0 0;
		white-space: nowrap; /* prevent flash of 2-line text while re-unfolding */
	}
	body.scarfy section h2 {
		font-size: 82px;
	}
	section {
		padding: 0.5rem 2rem;
	}
	.section-icon {
		display: none;
	}
	section p {
		display: block; /* even when not expanded */
	}
	section.expanded .section-content {
		display: block;
	}
	body.aqua h2::before {
		width: 64px;
		height: 64px;
	}
}