/* If browser/OS theme default is light or unspecified we
 * default to light theme. */
html {
	--primary-text: #000;
	--primary-background: #fff;
	--secondary-text: #fff;
}

/* If browser/OS theme default is dark, we select
 * dark to avoid unwanted flash of light on page load. */
@media (prefers-color-scheme: dark) {
	html {
		--primary-text: #fff;
		--primary-background: #000;
		--secondary-text: #000;
	}
}

/* This rule is responsible for dynamically updating
 * the theme based on system/browser preferences. */
html.system-theme {
	@media (prefers-color-scheme: dark) {
		html {
			--primary-text: #fff;
			--primary-background: #000;
			--secondary-text: #000;
		}
	}
}

html.dark-theme {
	--primary-text: #fff;
	--primary-background: #000;
	--secondary-text: #000;
}

html.light-theme {
	--primary-text: #000;
	--primary-background: #fff;
	--secondary-text: #fff;
}

html.pink-theme {
	--primary-text: #000;
	--primary-background: #F5A9B8;
	--secondary-text: #fff;
}

html.blue-theme {
	--primary-text: #000;
	--primary-background: #5BCEFA;
	--secondary-text: #fff;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: "Inter", sans-serif;
}

@supports (font-variation-settings: normal) {
	*,
	*::before,
	*::after {
		font-family: "InterVariable", sans-serif;
		font-optical-sizing: auto;
	}
}

body {
	display: flex;
	flex-direction: column;

	height: 100dvh;

	font-size: 1rem;
	color: var(--primary-text);

	background-color: var(--primary-background);

	transition: ease 0.15s;
}

.website-container {
	margin: auto;
}

button {
	display: inline-flex;
	gap: 5px;
	align-items: center;
	justify-content: center;

	margin-bottom: 5px;
	padding: 10px;

	font-size: 1.25rem;
	font-weight: 600;
	color: var(--secondary-text);

	background-color: var(--primary-text);
	border: 0px solid transparent;
	border-radius: 11px;
	outline: 0px solid transparent;

	fill: var(--secondary-text);

	transition: ease 0.15s;
	touch-action: manipulation;
	user-select: none;
	-webkit-user-select: none;
	cursor: pointer;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

@media (hover: hover) {
	.misc-theme-button:hover {
		color: var(--primary-text);
		background-color: var(--primary-background);
		outline: 2px solid var(--primary-text);
		fill: var(--primary-text);
	}
}

.misc-theme-button:focus-visible {
	color: var(--primary-text);
	background-color: var(--primary-background);
	outline: 2px solid var(--primary-text);
	fill: var(--primary-text);
}

.misc-theme-button:active {
	color: var(--primary-text);
	background-color: var(--primary-background);
	outline: 2px solid var(--primary-text);
	fill: var(--primary-text);
}

.misc-theme-button svg {
	width: 1.5rem;
	height: 1.5rem;
}

a {
	display: inline-flex;
	gap: 0.1rem;
	align-items: center;
	justify-content: center;

	color: var(--primary-text);
	text-decoration: 1px underline;
	text-underline-offset: 0.2em;

	outline: 0px solid transparent;
	fill: var(--primary-text);
	transition: ease 0.15s;
	
	user-select: none;
	-webkit-user-select: none;
	padding: 0.125rem;
	border-radius: 0.25rem;
}

a span {
	/* Visual correction of "differences"
	 * in left & right padding. */
	padding-left: 0.125rem;
}

a:hover,
a:focus-visible {
	text-decoration: transparent 0;
	background-color: var(--primary-text);
	color: var(--primary-background);
}

a svg {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
}

p {
	margin: 0.125rem;
	text-align: center;
	
	white-space: normal;
	
	user-select: none;
	-webkit-user-select: none;
}

.main-theme-switches {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: center;

	margin-bottom: 10px;
}

.main-theme-switches button {
	width: 2.75rem;
	height: 2.75rem;
	margin-top: 13px;

	background-color: var(--primary-background);
	border: 2px solid var(--primary-text);
	border-radius: 50%;
}

/* Needed to prevent mobile browsers from fucking up
 * the tapping behavior by keeping the hover/focus
 * effect around after you're done tapping the element. */
@media (hover: hover) {	
	.main-theme-switches button:hover {
		outline: 2px solid var(--primary-text);
		outline-offset: 3px;
	}
	.main-theme-switches button.active-theme:hover {
		border: 0px solid transparent;
		outline: 6px solid var(--primary-text);
		outline-offset: 0px;
	}
}

.main-theme-switches button:focus-visible {
	outline: 2px solid var(--primary-text);
	outline-offset: 3px;
}

.main-theme-switches button:active {
	outline: 2px solid var(--primary-text);
	outline-offset: 3px;
}

.main-theme-switches button.active-theme {
	outline: 4px solid var(--primary-text);
	outline-offset: 3px;
}

.main-theme-switches button.active-theme:focus-visible {
	border: 0px solid transparent;
	outline: 6px solid var(--primary-text);
	outline-offset: 0px;
}

.main-theme-switches button.active-theme:active {
	border: 0px solid transparent;
	outline: 6px solid var(--primary-text);
	outline-offset: 0px;
}

.main-theme-switches [data-theme="system-theme"] {
	--primary-background: transparent;
	background-color: var(--primary-background);
	color: var(--primary-text);
	padding: 0;
}
.main-theme-switches [data-theme="system-theme"] svg {
	width: 2.25rem;
	height: 2.25rem;
	fill: currentColor;
}

.main-theme-switches [data-theme="dark-theme"] {
	--primary-background: #000;
}
.main-theme-switches [data-theme="light-theme"] {
	--primary-background: #fff;
}
.main-theme-switches [data-theme="pink-theme"] {
	--primary-background: #f5a9b8;
}
.main-theme-switches [data-theme="blue-theme"] {
	--primary-background: #5bcefa;
}

.misc-theme-switches {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	align-items: center;
	justify-content: center;
}

.vertical-line {
	display: inline-flex;
	position: relative;
    width: 0.125rem;
    height: 2.75rem;
    background-color: var(--primary-text);
	transition: ease 0.15s;
	
	user-select: none;
	-webkit-user-select: none;
}

@media (max-width: 300px) {
	.misc-theme-switches span {
		display: none;
	}
}