source ⟩ hypertext ⟩ public ⟩ rumpelstiltskin ⟩ style.css

:root {
	--background: #300;
	--background-dark: #250000;
	--background-darkest: #180000;
	--accent: gold;
	--palatino: Palatino Linotype, Palatino, Book Antiqua, URW Palladio L,
		"Source Serif 4 Variable", var(--serif);
	--source-serif: "Source Serif 4 Variable", Palatino Linotype, Palatino,
		Book Antiqua, URW Palladio L, var(--serif);
}

body {
	font-family: var(--palatino);
}

main {
	display: grid;
	grid-template-rows: min-content auto auto;
	justify-content: center;

	block-size: 100vh;
	max-inline-size: none;
	padding-block-start: 0;
}

header h1 {
	margin-block: 0 0.5rem;

	line-height: 1.1;
	font-weight: normal;
}

header h1 strong {
	display: block;

	color: var(--text);
	letter-spacing: var(--caps-spacing);
	font-size: min(1.2em, 10vw);
	font-variant-caps: all-small-caps;
}

header h1 small {
	display: block;

	font-size: 1rem;
	font-style: italic;
}

header > div {
	display: flex;

	max-inline-size: 100vw;
	margin-block-end: 1em;
	overflow-x: auto;
    
	text-align: center;
	white-space: nowrap;
}

header button,
header a {
	margin: 0;
    padding-block: 0.125em;
    padding-inline: 0.5em;

	color: var(--text);
	font-family: inherit;
	font-size: inherit;
	text-decoration: none;

	background-color: transparent;
	border: none;
	border-radius: 0.5em;
}

header :is(button, a):is(:focus, :hover) {
	color: var(--text);

	background-color: #0006;
}

.flag {
	border-color: var(--accent);
}

#game-board {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	gap: min(3vw, 0.75rem);
    align-self: center;

	inline-size: min(100vw, 25em, calc(50vh - 2em));
	margin-block-end: 1rem;
	margin-inline: auto;
}

#game-board .tile {
    display: flex;
    align-items: center;
    justify-content: center;

	aspect-ratio: 1;

	font-family: var(--source-serif);
	font-size: min(12.5vw, 2.5rem);
	font-variation-settings: "opsz" 14;
	line-height: 0;
	text-align: center;
	text-shadow: 2px 2px 1px var(--shadow-light),
		-2px -2px 1px var(--shadow-dark);
	vertical-align: center;

	border-radius: 0.5rem;
	box-shadow: inset -5px -5px 10px var(--shadow-dark),
		inset 3px 3px 5px var(--shadow-light), 0 1px 10px black;
}

.tile.wrong {
	color: #888172;
	background-color: #f8f0e0;
	--shadow-light: #fefbf5;
	--shadow-dark: #f1e2c6;
}

.misplaced,
.misplaced:focus,
.misplaced:hover {
	color: #221e17;
	background-color: #f0cc22;
	--shadow-light: #fbeb62;
	--shadow-dark: #ebbd17;
}

.correct,
.correct:focus,
.correct:hover {
	color: #eff;
	background-color: #05442a;
	--shadow-light: #216046;
	--shadow-dark: #03321d;
}

#game-board .tile.empty {
	border: 3px dashed #100;
}

#game-board .tile.tba,
.tile-row .tile.empty {
	border: 3px dashed #511;
}

#keyboard {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	justify-content: end;

	inline-size: 100%;
	max-inline-size: 27.5em;
	margin-inline: auto;
}

#keyboard .row {
	display: flex;
	flex: 1;
	gap: 0.3rem;
	align-items: stretch;

	max-block-size: 3em;
}

#keyboard .row > * {
	flex: 1;
}

#keyboard button {
	margin: 0;
	padding: 0;

	font-family: var(--source-serif);
	text-decoration: none;
	text-shadow: 2px 2px 1px var(--shadow-light),
		-2px -2px 1px var(--shadow-dark);

	border: none;
	border-radius: 0.5em;
	box-shadow: inset -5px -5px 10px var(--shadow-dark),
		inset 3px 3px 5px var(--shadow-light), 0 1px 5px #0008;
}

.tile,
#keyboard button:not(.special) {
	text-transform: uppercase;
}

#keyboard button.empty {
	color: var(--text);

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

#keyboard button.wrong {
	color: var(--text);
	
	background-color: transparent;
}

#keyboard .row > .fullwidth {
	flex-grow: 1;
}

#keyboard .row > .halfwidth {
	flex-grow: 0.41667;
}

#keyboard .row > .special {
	flex-grow: 1.58333;
}

#toasts {
	position: absolute;
	inset-block-start: 7.5rem;
	inset-inline-start: calc(50vw - min(13.75em, 50vw));
	
	inline-size: min(27.5em, 100vw);
	margin: auto;

	box-sizing: border-box;
}

.toast {
	position: relative;

	inline-size: 100%;
	max-block-size: 70vh;
	margin-block-end: 1em;
	padding: 0.75em;
	overflow-y: auto;

	background-color: var(--background-dark);
	border-radius: 0.5rem;
	box-shadow: 0 0.5em 1em #0008;
}

#about,
#settings {
	display: none;
}

.tile-row {
	display: flex;
	gap: 0.25rem;
}

.tile-row .tile {
	display: flex;
	align-items: center;
	justify-content: center;

	inline-size: 3rem;
	aspect-ratio: 1;

	font-family: var(--source-serif);
	font-size: 1.5rem;
	font-variation-settings: "opsz" 14;
	text-shadow: 2px 2px 1px var(--shadow-light),
		-2px -2px 1px var(--shadow-dark);
	text-align: center;
	vertical-align: center;

	border-radius: 0.333rem;
	box-shadow: inset -5px -5px 10px var(--shadow-dark),
		inset 3px 3px 5px var(--shadow-light), 0 1px 10px black;
}

.toast.long h2,
.toast.long h3 {
	margin-block-start: 0;

	color: var(--text);
	font-variant-caps: all-small-caps;
	letter-spacing: var(--caps-spacing);
	text-align: center;
}

#game-end {
	text-align: center;

	animation-duration: 0.5s;
	animation-name: fadein;
}

#game-end p {
	text-align: center;
}

pre {
	inline-size: fit-content;
	margin-inline: auto;
	padding: 0.333em;

	color: #602;
	font-family: inherit;
	font-size: 0.9em;
	text-align: left;

	background-color: #fcd;
	border: 1px solid var(--background);
}

.close {
	display: flex;
	justify-content: center;
	align-items: center;

	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;

	inline-size: 40px;
	padding: 0;
	margin: 0.75rem;
	aspect-ratio: 1 / 1;
	
	font-size: 2em;

	border-radius: 40px;
}

.toast.short {
	text-align: center;
	
	animation-duration: 3.5s;
	animation-name: fadeout;
}

@keyframes fadeout {
	from {
		display: block;
		opacity: 1;
	}

	70% {
		opacity: 1;
	}

	99% {
		display: block;
		opacity: 0;
	}

	to {
		display: none;
		opacity: 0;
	}
}

@keyframes fadein {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@font-face {
	font-family: "Source Serif 4 Variable";
	src: url("/fonts/SourceSerif4Variable-Roman.otf.woff2")
		format("woff2-variations");
	font-style: normal;
	font-weight: 200 900;
	font-variation-settings: "opsz" 8 60;
}

@font-face {
	font-family: "Source Serif 4 Variable";
	src: url("/fonts/SourceSerif4Variable-Italic.otf.woff2")
		format("woff2-variations");
	font-style: italic;
	font-weight: 200 900;
	font-variation-settings: "opsz" 8 60;
}

/* Custom styles and stuff */

html[data-theme="high-contrast"] {
	--background: black;
	--background-dark: black;
	--text: white;
	--accent: yellow;

	--tile-background: black;
	--tile-text: white;
	--tile-border-color: currentColor;
	--tile-border-style: solid;
}

html[data-theme="high-contrast"] * {
	--shadow-light: none !important;
	--shadow-dark: none !important;
}

html[data-theme="high-contrast"] #game-board .tile,
html[data-theme="high-contrast"] .tile,
html[data-theme="high-contrast"] #keyboard button {
	background-color: var(--tile-background);
	color: var(--tile-text);
	border: 2px var(--tile-border-style) var(--tile-border-color);
}

html[data-theme="high-contrast"] .empty {
	--tile-border-color: white;
	--tile-border-style: dashed;
}

html[data-theme="high-contrast"] .tile-row .tile.empty {
	border: 2px dashed white;
}

html[data-theme="high-contrast"] .tba {
	--tile-border-color: yellow;
	--tile-border-style: dashed;
}

html[data-theme="high-contrast"] .wrong {
	--tile-text: yellow;
}

html[data-theme="high-contrast"] .misplaced {
	--tile-background: yellow;
	--tile-text: black;
	--tile-border-color: var(--tile-background);
}

html[data-theme="high-contrast"] .correct {
	--tile-background: cyan;
	--tile-text: black;
	--tile-border-color: var(--tile-background);
}

html[data-theme="high-contrast"] .toast {
	border: 2px solid yellow;
}

html[data-theme="high-contrast"] pre {
	border: 1px solid cyan;
	background-color: black;
	color: white;
}

html[data-theme="wordle"] {
	--background: #181818;
	--background-dark: #333;
	--accent: #ccc;
	--palatino: var(--gill-sans);
	--source-serif: var(--gill-sans);
}

html[data-theme="wordle"] #keyboard button.empty {
	background-color: #666;
}

html[data-theme="wordle"] #keyboard button {
	border-radius: 0;
	box-shadow: none;
	text-shadow: none;
}

html[data-theme="wordle"] #game-board .tile,
html[data-theme="wordle"] .tile-row .tile {
	border-radius: 0;
	box-shadow: none;
	text-shadow: none;
}

html[data-theme="wordle"] #keyboard button.wrong {
	background-color: var(--background-dark);
}

html[data-theme="wordle"] :is(#game-board, .tile-row) .tile.empty {
	border: 3px solid var(--background-dark);
}

html[data-theme="wordle"] .tile.wrong {
	background-color: var(--background-dark);
	color: white;
}

html[data-theme="wordle"] .tile-row .tile.wrong {
	background-color: var(--background);
	color: white;
}

html[data-theme="wordle"] :is(.correct, .correct:focus, .correct:hover) {
	background: #548e4f;
	color: white;
}

html[data-theme="wordle"] :is(.misplaced, .misplaced:focus, .misplaced:hover) {
	background: repeating-linear-gradient(
		-45deg,
		#b59f39 0,
		#b59f39 15px,
		#a08b27 15px,
		#a08b27 30px
	);
	color: white;
}

html[data-theme="wordle"]
	:is(#game-board, .tile-row)
	:is(.tile.tba, .tile-row .tile.empty) {
	border: 3px solid #666;
}

html[data-theme="wordle"] pre {
	color: var(--text);
	background-color: var(--background);
}

:root[data-theme="aquarius"] {
	--background-dark: #0008;
	--background-darkest: #0008;
	--accent: #fffe;

	--source-serif: Fondamento, var(--palatino);
}

/* fondamento-regular - latin */
@font-face {
	font-family: "Fondamento";
	font-style: normal;
	font-weight: 400;
	src: local(""),
		url("/fonts/fondamento-v14-latin-regular.woff2") format("woff2"),
		/* Chrome 26+, Opera 23+, Firefox 39+ */
			url("/fonts/fondamento-v14-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

html[data-theme="aquarius"] body {
	background-image: linear-gradient(to bottom right, #0fc, #c0f),
		url(/rumpelstiltskin/ripples.jpg);
	background-blend-mode: hue, normal;
	background-size: cover;
	background-position: center;
}

html[data-theme="aquarius"] #keyboard button.empty {
	background-color: var(--background-dark);
	backdrop-filter: blur(5px);
	box-shadow: inset 0px 0px 0.5rem #0008;
}

html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile.empty,
html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile.tba {
	background-color: #0008;
	border: none;
	backdrop-filter: blur(6px);
	box-shadow: inset 0px 0px 1rem #0008;
}

html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile.empty {
	background-color: #0004;
}

html[data-theme="aquarius"] header {
	background-color: var(--background-dark);
	margin-bottom: 1em;
	padding-bottom: 0;
	border-radius: 0 0 1em 1em;
	backdrop-filter: blur(6px);
}

html[data-theme="aquarius"] header > div {
	margin-bottom: 0;
}

html[data-theme="aquarius"] .tile.wrong,
html[data-theme="aquarius"] #keyboard button.wrong {
	color: #49585b;
	--shadow-light: #e0e4e3;
	--shadow-dark: #a8acad;
	background-image: url("/rumpelstiltskin/marble.png");
}

html[data-theme="aquarius"] .misplaced,
html[data-theme="aquarius"] .misplaced:focus,
html[data-theme="aquarius"] .misplaced:hover {
	color: #221e17;
	--shadow-light: #f2d5d8;
	--shadow-dark: #ce6b84;
	background-image: url("/rumpelstiltskin/pink.png");
}

html[data-theme="aquarius"] .correct,
html[data-theme="aquarius"] .correct:focus,
html[data-theme="aquarius"] .correct:hover {
	color: #d0f0ff;
	--shadow-light: #63aac8;
	--shadow-dark: #072630;
	background-image: url("/rumpelstiltskin/blue.png");
}

html[data-theme="aquarius"] .toast {
	backdrop-filter: blur(10px);
}

html[data-theme="aquarius"] #game-end {
	border: none;
	color: var(--text);
	background-color: #0008;
}

html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(1) { border-radius: 63% 37% 41% 59% / 26% 74% 71% 29%; }html[data-theme="aquarius"] #keyboard button:nth-child(1) { border-radius: 25% 75% 74% 26% / 53% 47% 60% 40%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(2) { border-radius: 44% 56% 54% 46% / 59% 41% 28% 72%; }html[data-theme="aquarius"] #keyboard button:nth-child(2) { border-radius: 34% 66% 72% 28% / 36% 64% 46% 54%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(3) { border-radius: 69% 31% 61% 39% / 47% 53% 53% 47%; }html[data-theme="aquarius"] #keyboard button:nth-child(3) { border-radius: 44% 56% 49% 51% / 54% 46% 30% 70%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(4) { border-radius: 61% 39% 71% 29% / 34% 66% 39% 61%; }html[data-theme="aquarius"] #keyboard button:nth-child(4) { border-radius: 60% 40% 70% 30% / 69% 31% 43% 57%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(5) { border-radius: 55% 45% 45% 55% / 52% 48% 55% 45%; }html[data-theme="aquarius"] #keyboard button:nth-child(5) { border-radius: 69% 31% 72% 28% / 29% 71% 50% 50%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(6) { border-radius: 48% 52% 45% 55% / 60% 40% 25% 75%; }html[data-theme="aquarius"] #keyboard button:nth-child(6) { border-radius: 65% 35% 63% 37% / 51% 49% 32% 68%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(7) { border-radius: 44% 56% 40% 60% / 63% 37% 42% 58%; }html[data-theme="aquarius"] #keyboard button:nth-child(7) { border-radius: 33% 67% 36% 64% / 43% 57% 39% 61%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(8) { border-radius: 30% 70% 42% 58% / 73% 27% 54% 46%; }html[data-theme="aquarius"] #keyboard button:nth-child(8) { border-radius: 38% 62% 47% 53% / 30% 70% 40% 60%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(9) { border-radius: 44% 56% 36% 64% / 67% 33% 35% 65%; }html[data-theme="aquarius"] #keyboard button:nth-child(9) { border-radius: 49% 51% 41% 59% / 27% 73% 64% 36%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(10) { border-radius: 34% 66% 45% 55% / 65% 35% 52% 48%; }html[data-theme="aquarius"] #keyboard button:nth-child(10) { border-radius: 63% 37% 61% 39% / 72% 28% 37% 63%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(11) { border-radius: 35% 65% 35% 65% / 31% 69% 70% 30%; }html[data-theme="aquarius"] #keyboard button:nth-child(11) { border-radius: 26% 74% 27% 73% / 38% 62% 74% 26%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(12) { border-radius: 51% 49% 56% 44% / 56% 44% 71% 29%; }html[data-theme="aquarius"] #keyboard button:nth-child(12) { border-radius: 31% 69% 25% 75% / 48% 52% 53% 47%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(13) { border-radius: 25% 75% 61% 39% / 33% 67% 74% 26%; }html[data-theme="aquarius"] #keyboard button:nth-child(13) { border-radius: 62% 38% 30% 70% / 63% 37% 30% 70%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(14) { border-radius: 29% 71% 30% 70% / 57% 43% 60% 40%; }html[data-theme="aquarius"] #keyboard button:nth-child(14) { border-radius: 40% 60% 39% 61% / 62% 38% 46% 54%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(15) { border-radius: 36% 64% 48% 52% / 42% 58% 29% 71%; }html[data-theme="aquarius"] #keyboard button:nth-child(15) { border-radius: 39% 61% 48% 52% / 42% 58% 62% 38%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(16) { border-radius: 35% 65% 32% 68% / 66% 34% 38% 62%; }html[data-theme="aquarius"] #keyboard button:nth-child(16) { border-radius: 62% 38% 56% 44% / 74% 26% 73% 27%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(17) { border-radius: 71% 29% 46% 54% / 46% 54% 51% 49%; }html[data-theme="aquarius"] #keyboard button:nth-child(17) { border-radius: 34% 66% 50% 50% / 29% 71% 55% 45%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(18) { border-radius: 34% 66% 60% 40% / 47% 53% 44% 56%; }html[data-theme="aquarius"] #keyboard button:nth-child(18) { border-radius: 61% 39% 46% 54% / 39% 61% 61% 39%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(19) { border-radius: 57% 43% 34% 66% / 38% 62% 66% 34%; }html[data-theme="aquarius"] #keyboard button:nth-child(19) { border-radius: 72% 28% 43% 57% / 62% 38% 54% 46%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(20) { border-radius: 50% 50% 35% 65% / 30% 70% 64% 36%; }html[data-theme="aquarius"] #keyboard button:nth-child(20) { border-radius: 30% 70% 71% 29% / 38% 62% 39% 61%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(21) { border-radius: 47% 53% 48% 52% / 65% 35% 74% 26%; }html[data-theme="aquarius"] #keyboard button:nth-child(21) { border-radius: 39% 61% 59% 41% / 29% 71% 44% 56%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(22) { border-radius: 74% 26% 28% 72% / 46% 54% 38% 62%; }html[data-theme="aquarius"] #keyboard button:nth-child(22) { border-radius: 45% 55% 47% 53% / 62% 38% 62% 38%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(23) { border-radius: 68% 32% 60% 40% / 26% 74% 64% 36%; }html[data-theme="aquarius"] #keyboard button:nth-child(23) { border-radius: 40% 60% 74% 26% / 27% 73% 56% 44%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(24) { border-radius: 58% 42% 46% 54% / 68% 32% 35% 65%; }html[data-theme="aquarius"] #keyboard button:nth-child(24) { border-radius: 57% 43% 44% 56% / 47% 53% 26% 74%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(25) { border-radius: 54% 46% 74% 26% / 70% 30% 72% 28%; }html[data-theme="aquarius"] #keyboard button:nth-child(25) { border-radius: 39% 61% 31% 69% / 69% 31% 60% 40%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(26) { border-radius: 72% 28% 58% 42% / 33% 67% 61% 39%; }html[data-theme="aquarius"] #keyboard button:nth-child(26) { border-radius: 68% 32% 28% 72% / 46% 54% 43% 57%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(27) { border-radius: 64% 36% 31% 69% / 68% 32% 58% 42%; }html[data-theme="aquarius"] #keyboard button:nth-child(27) { border-radius: 67% 33% 59% 41% / 29% 71% 50% 50%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(28) { border-radius: 37% 63% 55% 45% / 44% 56% 39% 61%; }html[data-theme="aquarius"] #keyboard button:nth-child(28) { border-radius: 29% 71% 46% 54% / 34% 66% 74% 26%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(29) { border-radius: 64% 36% 44% 56% / 69% 31% 31% 69%; }html[data-theme="aquarius"] #keyboard button:nth-child(29) { border-radius: 50% 50% 62% 38% / 47% 53% 42% 58%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(30) { border-radius: 26% 74% 46% 54% / 61% 39% 58% 42%; }html[data-theme="aquarius"] #keyboard button:nth-child(30) { border-radius: 50% 50% 65% 35% / 50% 50% 48% 52%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(31) { border-radius: 51% 49% 36% 64% / 60% 40% 45% 55%; }html[data-theme="aquarius"] #keyboard button:nth-child(31) { border-radius: 73% 27% 63% 37% / 63% 37% 29% 71%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(32) { border-radius: 51% 49% 31% 69% / 72% 28% 66% 34%; }html[data-theme="aquarius"] #keyboard button:nth-child(32) { border-radius: 58% 42% 48% 52% / 52% 48% 72% 28%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(33) { border-radius: 63% 37% 36% 64% / 66% 34% 59% 41%; }html[data-theme="aquarius"] #keyboard button:nth-child(33) { border-radius: 27% 73% 57% 43% / 52% 48% 32% 68%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(34) { border-radius: 66% 34% 41% 59% / 38% 62% 32% 68%; }html[data-theme="aquarius"] #keyboard button:nth-child(34) { border-radius: 48% 52% 33% 67% / 40% 60% 63% 37%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(35) { border-radius: 47% 53% 36% 64% / 30% 70% 74% 26%; }html[data-theme="aquarius"] #keyboard button:nth-child(35) { border-radius: 43% 57% 36% 64% / 52% 48% 58% 42%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(36) { border-radius: 67% 33% 66% 34% / 44% 56% 33% 67%; }html[data-theme="aquarius"] #keyboard button:nth-child(36) { border-radius: 54% 46% 67% 33% / 60% 40% 34% 66%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(37) { border-radius: 65% 35% 61% 39% / 55% 45% 32% 68%; }html[data-theme="aquarius"] #keyboard button:nth-child(37) { border-radius: 64% 36% 64% 36% / 40% 60% 74% 26%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(38) { border-radius: 39% 61% 39% 61% / 71% 29% 58% 42%; }html[data-theme="aquarius"] #keyboard button:nth-child(38) { border-radius: 38% 62% 62% 38% / 66% 34% 25% 75%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(39) { border-radius: 49% 51% 55% 45% / 28% 72% 56% 44%; }html[data-theme="aquarius"] #keyboard button:nth-child(39) { border-radius: 60% 40% 49% 51% / 27% 73% 33% 67%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(40) { border-radius: 62% 38% 64% 36% / 74% 26% 34% 66%; }html[data-theme="aquarius"] #keyboard button:nth-child(40) { border-radius: 42% 58% 54% 46% / 62% 38% 73% 27%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(41) { border-radius: 29% 71% 67% 33% / 40% 60% 43% 57%; }html[data-theme="aquarius"] #keyboard button:nth-child(41) { border-radius: 44% 56% 70% 30% / 35% 65% 59% 41%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(42) { border-radius: 37% 63% 32% 68% / 50% 50% 48% 52%; }html[data-theme="aquarius"] #keyboard button:nth-child(42) { border-radius: 29% 71% 27% 73% / 37% 63% 33% 67%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(43) { border-radius: 51% 49% 49% 51% / 46% 54% 48% 52%; }html[data-theme="aquarius"] #keyboard button:nth-child(43) { border-radius: 60% 40% 49% 51% / 59% 41% 30% 70%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(44) { border-radius: 40% 60% 65% 35% / 68% 32% 64% 36%; }html[data-theme="aquarius"] #keyboard button:nth-child(44) { border-radius: 57% 43% 72% 28% / 66% 34% 25% 75%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(45) { border-radius: 57% 43% 69% 31% / 70% 30% 29% 71%; }html[data-theme="aquarius"] #keyboard button:nth-child(45) { border-radius: 25% 75% 58% 42% / 36% 64% 37% 63%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(46) { border-radius: 25% 75% 46% 54% / 74% 26% 36% 64%; }html[data-theme="aquarius"] #keyboard button:nth-child(46) { border-radius: 38% 62% 33% 67% / 26% 74% 25% 75%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(47) { border-radius: 56% 44% 35% 65% / 33% 67% 61% 39%; }html[data-theme="aquarius"] #keyboard button:nth-child(47) { border-radius: 47% 53% 73% 27% / 26% 74% 58% 42%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(48) { border-radius: 30% 70% 58% 42% / 49% 51% 37% 63%; }html[data-theme="aquarius"] #keyboard button:nth-child(48) { border-radius: 28% 72% 43% 57% / 30% 70% 52% 48%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(49) { border-radius: 72% 28% 30% 70% / 58% 42% 53% 47%; }html[data-theme="aquarius"] #keyboard button:nth-child(49) { border-radius: 49% 51% 38% 62% / 50% 50% 48% 52%; }html[data-theme="aquarius"] :is(#game-board, .tile-row) .tile:nth-child(50) { border-radius: 47% 53% 31% 69% / 29% 71% 60% 40%; }html[data-theme="aquarius"] #keyboard button:nth-child(50) { border-radius: 58% 42% 31% 69% / 54% 46% 69% 31%; }

/* Legible font */

html[data-legible-text="true"] {
	--palatino: "Trebuchet MS", Trebuchet, sans-serif;
	--source-serif: "Trebuchet MS", Trebuchet, sans-serif;
	font-size: 1.25rem;
}

html[data-legible-text="true"] body,
html[data-legible-text="true"] button {
	letter-spacing: var(--caps-spacing);
}

html[data-legible-text="true"] p {
	text-align: left;
}