source ⟩ hypertext ⟩ public ⟩ furry ⟩ furry.css

:root {
	--background: rgb(234, 226, 183);
	--text: rgb(27, 23, 14);
	--accent: rgb(93, 55, 129);
	--back-background: #C1A053;
	--headers: #92641B;
}

body {
	font-family: var(--sans-serif);
	background: var(--back-background);
}

#body-container {
	display: flex;
	justify-content: center;
}

main {
	margin: 0;

	background: var(--background);
}

h1, h2, h3 {
	COLOR: var(--headers);
}

ruby {
	ruby-align: center;
}

rt {
	margin-block-end: -0.2em;

	font-size: 0.575rem;
	font-variant-numeric: lining-nums;
	letter-spacing: 0.8px;
}

h1 small {
	display: block;
	max-inline-size: 45ch;
	margin: auto;

	color: var(--text);
	font-size: 0.8rem;
	font-weight: normal;
	letter-spacing: 1px;
}

.vital-stats {
	float: right;

	max-inline-size: 32.5ch;
	margin-inline-start: 1em;
	margin-block-end: 0;
	padding-inline: 0.5em;

	font-size: 0.8rem;

	border: 3px double var(--back-background);
}

.vital-stats h2 {
	margin-block: -0.5em 0;

	font-size: 1rem;
	text-align: center;
	text-shadow: 0 0 0.25em var(--background), 0 0 0.25em var(--background), 0 0 0.25em var(--background);
	text-transform: uppercase;
}

.vital-stats li {
	display: block;
	margin-inline-start: 0;
}

#furry-code {
	max-inline-size: 60ch;
	margin-block-start: 2em;
	margin-inline: auto;
	padding-inline: 0.5em;

	font-size: 0.8rem;
	text-align: center;

	border: 3px double var(--back-background);
}

#furry-code h2 {
	margin-block: -0.6em 0;

	font-size: 1em;
	text-align: center;
	text-shadow: 0 0 0.25em var(--background), 0 0 0.25em var(--background), 0 0 0.25em var(--background);
}

#furry-code h2 a {
	color: var(--headers);
}

#furry-code code {
	display: block;

	margin-block: 0.6em;
}

.comment-section {
	--accent: var(--headers);
}

.comments-form-confirm {
	--accent: rgb(93, 55, 129);
	--accent-seethrough: rgb(93, 55, 129, 0.125)
}

.pn-sg {
	display: none;
}

#gender-switch {
	position: sticky;
	inset-block-start: 0;

	block-size: min-content;
	padding: 0.75em;

	font-size: 1.25rem;

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

#gender-switch input {
	display: none;
}

#gender-switch label {
	display: inline-block;

	aspect-ratio: 1 / 1;
	block-size: 1.5em;
	inline-size: 1.5em;
	margin-block-end: 0.5em;

	color: var(--headers);
	text-align: center;

	--hover-bg: var(--accent);
	border: 1px solid var(--headers);
	border-radius: 50%;
	cursor: pointer;
}

#gender-switch label:last-of-type {
	margin-block-end: 0;
}

#gender-switch label:hover, #gender-switch :checked+label {
	color: white;

	background-color: var(--hover-bg);
	border: 1px solid var(--hover-bg);
}

#she+label, #zij+label {
	--hover-bg: #BA3A5F;
}

#shi+label {
	--hover-bg: #8B386F;
}

#he+label, #hij+label {
	--hover-bg: #287BAE;
}

@media screen and (max-width: 480px) {
	.vital-stats {
		float: none;

		max-inline-size: none;
		margin: auto;
	}
}