/* ── Theme tokens ─────────────────────────────────────────── */
:root {
	--bg:        #fdf6e3;
	--fg:        #586e75;
	--hover-bg:  #eee8d5;
	--sel-bg:    #eee8d5;
	--link:      #006b85;
	--icon-filter: none;
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg:        #002b36;
		--fg:        #839496;
		--hover-bg:  #073642;
		--sel-bg:    #073642;
		--link:      #65c5df;
		--icon-filter: invert(1);
		color-scheme: dark;
	}
}
[data-theme="dark"] {
	--bg:        #002b36;
	--fg:        #839496;
	--hover-bg:  #073642;
	--sel-bg:    #073642;
	--link:      #65c5df;
	--icon-filter: invert(1);
	color-scheme: dark;
}

/* ── Base styles ──────────────────────────────────────────── */
body {
	color: var(--fg);
	background-color: var(--bg);
	padding-bottom: 3rem;
}
a { color: var(--link); }
p {
	font-family: "Lucida Console", "Courier New", monospace;
}
p::selection {
	background-color: var(--sel-bg);
}
img::selection {
	background-color: var(--sel-bg);
}
td, th {
	padding: 3px 6px;
}
a:focus-visible,
button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}
#icons {
	position: fixed;
	bottom: 0;
	right: 0;
	margin: 5px;
	font-size: small;
	max-width: calc(100% - 10px);
	opacity: 0.25;
	transition: opacity 0.2s;
}
#icons:hover,
#icons:focus-within {
	opacity: 1;
}
#emailtext {
	text-align: center;
}
#imgprofile {
	display: block;
	margin-top: clamp(2rem, 5vh, 4rem);
	margin-bottom: 14px;
	margin-left: auto;
	margin-right: auto;
	width: min(25vw, 360px);
	height: auto;
}
.center {
	margin: 0 auto;
	text-align: center;
}
#tagline {
	margin: 0 auto;
	min-height: 1.2em;
	overflow-wrap: break-word;
}
.buttoncell:hover,
.buttoncell:focus-within {
	background-color: var(--hover-bg);
}
.buttoncell a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.buttoncell img {
	display: block;
	filter: var(--icon-filter);
}

/* ── Theme toggle button ──────────────────────────────────── */
#theme-toggle {
	position: fixed;
	top: 32px;
	right: 12px;
	z-index: 10000;
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	min-width: 44px;
	min-height: 44px;
	color: inherit;
	line-height: 1;
	font-size: 20px;
	opacity: 0.7;
	transition: opacity 0.2s;
	-webkit-tap-highlight-color: transparent;
}
#theme-toggle:hover {
	opacity: 1;
}
/* Show the right icon per theme */
#theme-toggle .icon-pirate { display: none; }
#theme-toggle .icon-ninja  { display: inline; }
[data-theme="dark"] #theme-toggle .icon-pirate {
	display: inline;
	animation: pirate-twitch 7.5s infinite;
}
[data-theme="dark"] #theme-toggle .icon-ninja  { display: none; }

@keyframes pirate-twitch {
	0%, 91%, 93.5%, 96%, 100% {
		opacity: 1;
		filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.45));
	}
	92% {
		opacity: 0.8;
		filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.2));
	}
	93% {
		opacity: 1;
		filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.6));
	}
	94.5% {
		opacity: 0.85;
		filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
	}
	95.5% {
		opacity: 0.78;
		filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.45)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.2));
	}
}
@media (prefers-reduced-motion: reduce) {
	[data-theme="dark"] #theme-toggle .icon-pirate {
		animation: none;
		filter: none;
	}
}

/* ── Mobile adjustments (screens <= 600px) ─────────────────── */
@media (max-width: 600px) {
	#imgprofile {
		width: 45%;
		min-width: 130px;
		max-width: 180px;
		margin-top: clamp(2rem, 12vh, 5rem);
	}
	p {
		overflow-wrap: break-word;
	}
}