styles.css

:root {
	--color__highlight: var( --color__highlight-yellow );
	--color__highlight-rgb: 255, 231, 0;

	--color__highlight-yellow: #FFC225;
	--color__highlight-yellow-rgb: 255, 194, 37;
	--color__body-yellow-dark: #161616;
	--color__body-yellow-light: #FDFBEE;

	--color__highlight-green: #00C14D;
	--color__highlight-green-rgb: 0, 193, 77;
	--color__body-green-dark: #00180A;
	--color__body-green-light: #F3FFF8;

	--color__highlight-blue: #1BADFF;
	--color__highlight-blue-rgb: 27, 173, 255;
	--color__body-blue-dark: #001D2D;
	--color__body-blue-light: #EEF8FD;

	--color__highlight-purple: #9834C7;
	--color__highlight-purple-rgb: 152, 52, 199;
	--color__body-purple-dark: #180023;
	--color__body-purple-light: #FBF2FF;

	--color__highlight-pink: #FF2792;
	--color__highlight-pink-rgb: 255, 39, 146;
	--color__body-pink-dark: #3E001F;
	--color__body-pink-light: #FFF4FA;


	--color__body: #161616;
	--color__box: #000;
	--color__box-rgb: 0, 0, 0;

	--color__text: #FFF;
	--color__text-rgb: 255, 255, 255;


	--color-gradient__footer: linear-gradient(
		90deg,
		var( --color__highlight-yellow ) 0, var( --color__highlight-yellow ) 20%,
		var( --color__highlight-green ) 20%, var( --color__highlight-green ) 40%,
		var( --color__highlight-blue ) 40%, var( --color__highlight-blue ) 60%,
		var( --color__highlight-purple ) 60%, var( --color__highlight-purple ) 80%,
		var( --color__highlight-pink ) 80%, var( --color__highlight-pink ) 100%
	);

	--transition__default: 120ms ease-in-out;
	--transition__slow: 480ms ease-in-out;
	--transition__out-back: 480ms cubic-bezier( 0.175, 0.885, 0.320, 1.275 );
	--transition__in-back: 480ms cubic-bezier(0.600, -0.280, 0.735, 0.045);


	--search__height: calc( 2 * ( 1.25vw + 1.25vh ) + ( 1em * 1.625) + 2px );
	--card__spacing: clamp( 1.5625rem, 1.171875rem + 1.5625vw, 3.125rem );
	--border__radius: 4px;

	--color-line__height: 4px;
}

.color-scheme-yellow {
	--color__highlight: var( --color__highlight-yellow );
	--color__highlight-rgb: var( --color__highlight-yellow-rgb );

	--color__body: var( --color__body-yellow-dark );

}

.color-scheme-green {
	--color__highlight: var( --color__highlight-green );
	--color__highlight-rgb: var( --color__highlight-green-rgb );

	--color__body: var( --color__body-green-dark );
}

.color-scheme-blue {
	--color__highlight: var( --color__highlight-blue );
	--color__highlight-rgb: var( --color__highlight-blue-rgb );

	--color__body: var( --color__body-blue-dark );
}

.color-scheme-purple {
	--color__highlight: var( --color__highlight-purple );
	--color__highlight-rgb: var( --color__highlight-purple-rgb );

	--color__body: var( --color__body-purple-dark );
}

.color-scheme-pink {
	--color__highlight: var( --color__highlight-pink );
	--color__highlight-rgb: var( --color__highlight-pink-rgb );

	--color__body: var( --color__body-pink-dark );
}

.light-mode {
	--color__body: #F5F5F5;
	--color__box: #FFF;
	--color__box-rgb: 255, 255, 255;

	--color__text: #161616;
	--color__text-rgb: 22, 22, 22;
}

.light-mode.color-scheme-yellow {
	--color__body: var( --color__body-yellow-light );
}

.light-mode.color-scheme-green {
	--color__body: var( --color__body-green-light );
}

.light-mode.color-scheme-blue {
	--color__body: var( --color__body-blue-light );
}

.light-mode.color-scheme-purple {
	--color__body: var( --color__body-purple-light );
}

.light-mode.color-scheme-pink {
	--color__body: var( --color__body-pink-light );
}


*,
*:before,
*:after {
	box-sizing: border-box;
}

body, input, textarea, select, button {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Arial, sans-serif;
	color: var( --color__text );
	font-size: 1em;
	font-size: calc( .875rem + 1vw );
	line-height: 1.5;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

html {
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	margin: 0;
	padding: 0;
	background: var( --color__body );
}

a {
	color: var( --color__highlight );
	text-decoration: none;
	transition: all var( --transition__default );
}

a:hover {
	color: var( --color__text );
}

input, button {
	appearance: none;
}

.screen-reader-text {
	position: absolute;
	margin: -1px;
	padding: 0;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	border: 0;
	word-wrap: normal !important; /* many screen reader and browser combinations announce broken words as they would appear visually */
}

.app-header {
	display: none;
}

.char-search {
	position: sticky;
	z-index: 7;
	top: 0;
	left: 0;
	right: 0;
	padding: 0;
	background: var( --color__box );
	text-align: center;
	line-height: 1;
	background: var( --color__body );
}

.char-search input[type="search"] {
	max-width: 100%;
	width: 100%;
	padding: calc( 1.25vw + 1.25vh ) var( --card__spacing );
	background: var( --color__box );
	border: none;
	color: var( --color__text );
	box-shadow: 0 2px 0 rgba( var( --color__text-rgb ), 0.15 );
	border-radius: 0;
	outline: none;
	transition: color var( --transition__default ), box-shadow var( --transition__default );
}

.char-search input[type="search"]::placeholder {
	color: rgba( var( --color__text-rgb ), 0.3 );
	transition: color var( --transition__default );
}

.char-search input[type="search"]:focus {
	box-shadow: 0 2px 0 var( --color__highlight );
}

.char-search input[type="search"]:not(:focus):hover {
	box-shadow: 0 2px 0 rgba( var( --color__highlight-rgb ), 0.5 );
}

.char-search input[type="search"]:not(:focus):hover::placeholder {
	color: rgba( var( --color__text-rgb ), 0.4 );
}

.char-search input[type="search"]:focus::placeholder {
	color: rgba( var( --color__text-rgb ), 0.5 );
}

.char-search .reset-search {
	position: absolute;
	top: 50%;
	right: var( --card__spacing );
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5em;
	height: 2.5em;
	aspect-ratio: 1 / 1;
	padding: 0;
	overflow: hidden;
	text-align: center;
	color: var( --color__text );
	background: rgba( var( --color__text-rgb ), 0.1 );
	border: none;
	line-height: 1.1;
	font-weight: 300;
	cursor: pointer;
	font-size: 0.875rem;
	font-size: clamp( 0.875rem, 0.703125rem + 0.6875vw, 1.5625rem );
	border-radius: 50%;
	transform: translate3d( 0, -50%, 0 );
	transition: all var( --transition__default );
}

.char-search .reset-search:hover {
	background: var( --color__body );
}

.char-search .reset-search:before,
.char-search .reset-search:after {
	content: " ";
	position: absolute;
	width: 2px;
	height: 1em;
	background-color: var( --color__text );
	transition: all var( --transition__default );
}

.char-search .reset-search:before {
	transform: rotate( 45deg );
}

.char-search .reset-search:after {
	transform: rotate( -45deg );
}

.char-search .reset-search:hover::before,
.char-search .reset-search:hover::after {
	height: 1.1em;
}

.char-search .reset-search:focus {
	outline: none;
}

.char-search .reset-search.hidden {
	opacity: 0;
	transform: scale( .5 ) translate3d( 0, -50%, 0 );
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
	display: none;
}

#loading-message {
	position: absolute;
	inset: var( --card__spacing );
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.char-cards-wrap {
	position: relative;
	flex-grow: 1;
}

.char-cards {
	min-height: 200px;
	padding: var( --card__spacing );
	display: grid;
	gap: var( --card__spacing );
}

.char-cards.loading {
	min-height: 100vh;
}

@media screen and (min-width: 300px) {
	.char-cards {
		grid-template-columns: 1fr 1fr;
	}
}
@media screen and (min-width: 600px) {
	.char-cards {
		grid-template-columns: 1fr 1fr 1fr;
	}
}
@media screen and (min-width: 900px) {
	.char-cards {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}
@media screen and (min-width: 1200px) {
	.char-cards {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	}
}

@media screen and (min-width: 1500px) {
	.char-cards {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	}
}

.char {
	display: block;
	position: relative;
	aspect-ratio: 1.25 / 1;
	background: var( --color__box );
}

.char::after {
	opacity: 0;
	visibility: hidden;
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0.625em;
	font-size: clamp( 0.75rem, 0.625rem + 0.5vw, 1.25rem );
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: rgba( var( --color__text-rgb ), 0.5 );
	content: attr(data-search-term);
	transform: translate3d( 0, 1em, 0 );
	transition: all var( --transition__default );
}
.char:hover::after {
	visibility: visible;
	opacity: 1;
	transform: translate3d( 0, 0, 0 );
}

.char-button {
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	padding: calc( 10px + 0.5vw );
	background: transparent;
	color: rgba( var( --color__text-rgb ), 0.9 );
	font-size: calc( 2rem + 2vw );
	line-height: 1;
	cursor: pointer;
	border: none;
	border-radius: var( --border__radius );
	outline: none;
	box-shadow: 0 0 0 2px rgba( var( --color__text-rgb ) ,0.1 );
	transition: padding var( --transition__default ), color var( --transition__default ), box-shadow var( --transition__default );
}

.shrug .char-button {
	font-size: calc(1rem + 1vw);
}

.char-button:hover,
.char-button:focus {
	padding: 0.5vw calc( 10px + 0.5vw ) calc( 20px + 0.5vw ) calc( 10px + 0.5vw );
	color: var( --color__text );
	box-shadow: 0 0 0 2px var( --color__highlight ), 0 0 15px var( --color__highlight );
}

.char-button:active {
	box-shadow: 0 0 0 2px var( --color__highlight ), 0 0 15px var( --color__highlight );
	transform: scale( 1.025 );
}

.char-button:active {
	transition: none;
}

.copy-confirmation {
	visibility: hidden;
	opacity: 0;
	z-index: -1;
	position: fixed;
	top: var( --search__height );
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0.625em;
	text-align: center;
	background: rgba( var( --color__box-rgb ), 0.9 );
	backdrop-filter: blur( 10px );
	color: var( --color__highlight );
	transition: all var( --transition__default );
}

.copy-confirmation-inner {
	position: absolute;
	top: 50%;
	left: 50%;
	padding: calc( 2 * var( --card__spacing ) );
	background: var( --color__box );
	border-radius: var( --border__radius );
	transform: translate3d( -50%, -50%, 0 );
}

.copy-confirmation-inner::before {
	content: " ";
	position: absolute;
	inset: 0;
	opacity: 0.5;
	border-radius: var( --border__radius );
	box-shadow: 0 0 200px var( --color__highlight );
}

.copy-confirmation.visible {
	visibility: visible;
	opacity: 1;
	z-index: 11;
}

.copy-confirmation .character {
	font-size: calc( 2rem + 2vw );
}

.copy-confirmation .message {
	display: block;
	transition: all var( --transition__default );
}

.site-footer {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var( --card__spacing );
	padding: var( --card__spacing );
	background: var( --color__box );
	font-size: 0.875rem;
	color: rgba( var( --color__text-rgb ), 0.75 );
	box-shadow: 0 -2px 0 0 rgba( var( --color__text-rgb ), 0.1 );
}

#clear-cache-button {
	margin-top: var( --card__spacing );
	flex-basis: 100%;
	padding: calc( 10px + 0.5vw );
	cursor: pointer;
	font-size: 0.875rem;
	background: var( --color__box );
	border: 1px solid rgba( var( --color__text-rgb ), 0.25 );
	border-radius: var( --border__radius );
	transition: all var( --transition__default );
}

#clear-cache-button:hover {
	background: var( --color__body );
}


.color-line {
	content: " ";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: var( --color-line__height );
	display: flex;
}

.color-line span {
	flex-basis: 5%;
	flex-grow: 1;
	flex-shrink: 1;
	transition: all var( --transition__in-back );
}

.color-line-yellow {
	background: var( --color__highlight-yellow );
}

.color-line-green {
	background: var( --color__highlight-green );
}

.color-line-blue {
	background: var( --color__highlight-blue );
}

.color-line-purple {
	background: var( --color__highlight-purple );
}

.color-line-pink {
	background: var( --color__highlight-pink );
}

.color-scheme-yellow .color-line-yellow,
.color-scheme-green .color-line-green,
.color-scheme-blue .color-line-blue,
.color-scheme-purple .color-line-purple,
.color-scheme-pink .color-line-pink {
	flex-basis: 80%;
}

.site-footer p {
	margin: 0;
}

.settings {
	position: relative;
	z-index: 10;
	display: flex;
	flex-wrap: wrap;
	flex-basis: 40%;
	flex-shrink: 0;
	align-items: center;
	justify-content: space-between;
	gap: var( --card__spacing );
}

.credits a {
	text-underline-offset: 0.25em;
	text-decoration: underline;
	color: var( --color__text );
}
.credits a:hover {
	color: var( --color__highlight );
	text-decoration: none;
}

@media screen and ( min-width: 800px ) {
	.site-footer {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
	.settings {
		justify-content: flex-end;
	}
}

.color-scheme-selector {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: calc( var( --card__spacing ) / 2 );
}

.color-scheme-selector li {
	display: flex;
}

.color-scheme-selector button {
	position: relative;
	aspect-ratio: 1 / 1;
	width: 40px;
	border: none;
	cursor: pointer;
	border-radius: 50%;
	transition: all var( --transition__default );
}

.color-scheme-selector button::before {
	content: " ";
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	opacity: 0.5;
	width: 1rem;
	height: 1rem;
	background-color: var( --color__text );
	border-radius: 50%;
	transform: translate3d( -50%, -50%, 0 ) scale( 0 );
	transition: all var( --transition__out-back );
}

.color-scheme-selector button::after {
	content: " ";
	position: absolute;
	z-index: 1;
	inset: 0;
	border-radius: 50%;
	border: 2px solid rgba( var( --color__text-rgb ), 0.5 );
}

.color-scheme-selector button:hover::after {
	border: 2px solid rgba( var( --color__text-rgb ), 0.5 );
}

.color-scheme-selector button.current::after {
	border: 2px solid var( --color__text );
}

.color-scheme-selector button:hover:before {
	transform: translate3d( -50%, -50%, 0 ) scale( .5 );
}

.color-scheme-selector button.current::before {
	opacity: 1;
	transform: translate3d( -50%, -50%, 0 ) scale( 1 );
}

.color-scheme-selector-swatch {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	overflow: hidden;
	transform: rotate( 45deg );
	transition: all var( --transition__default );
}

.color-scheme-selector-swatch::after,
.color-scheme-selector-swatch::before {
	content: " ";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50%;
	transition: all var( --transition__default );
}

.color-scheme-selector-swatch::before {
	left: 0;
	border-radius: 50% 0 0 50%;
}

.color-scheme-selector-swatch::after {
	right: 0;
	border-radius: 0 50% 50% 0;
}


.color-scheme-selector-name {
	opacity: 0;
	position: absolute;
	z-index: -1;
	bottom: 100%;
	left: 50%;
	user-select: none;
	padding: .5rem .75rem;
	font-size: 0.875rem;
	color: var( --color__text );
	background: var( --color__box );
	border: 1px solid rgba( var( --color__text-rgb ), .25 );
	border-radius: var( --border__radius );
	transform: translate3d( -50%, 5px, 0 );
	transition: all var( --transition__out-back );
}

.color-scheme-selector button:hover .color-scheme-selector-name {
	z-index: 4;
	opacity: 1;
	transform: translate3d( -50%, 0, 0 );
}

.color-scheme-selector-name::after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(0, 0, 0, 0);
	border-top-color: var( --color__box );
	border-width: 5px;
	margin-left: -5px;
}

.color-scheme-selector .color-yellow {
	background: var( --color__highlight-yellow );
}
.color-scheme-selector .color-yellow .color-scheme-selector-swatch::after {
	background: var( --color__body-yellow-light );
}
.dark-mode .color-scheme-selector .color-yellow .color-scheme-selector-swatch::after {
	background: var( --color__body-yellow-dark );
}

.color-scheme-selector .color-green .color-scheme-selector-swatch:before {
	background: var( --color__highlight-green );
}
.color-scheme-selector .color-green .color-scheme-selector-swatch::after {
	background: var( --color__body-green-light );
}
.dark-mode .color-scheme-selector .color-green .color-scheme-selector-swatch::after {
	background: var( --color__body-green-dark );
}

.color-scheme-selector .color-blue .color-scheme-selector-swatch:before {
	background: var( --color__highlight-blue );
}
.color-scheme-selector .color-blue .color-scheme-selector-swatch::after {
	background: var( --color__body-blue-light );
}
.dark-mode .color-scheme-selector .color-blue .color-scheme-selector-swatch::after {
	background: var( --color__body-blue-dark );
}

.color-scheme-selector .color-purple .color-scheme-selector-swatch:before {
	background: var( --color__highlight-purple );
}
.color-scheme-selector .color-purple .color-scheme-selector-swatch::after {
	background: var( --color__body-purple-light );
}
.dark-mode .color-scheme-selector .color-purple .color-scheme-selector-swatch::after {
	background: var( --color__body-purple-dark );
}

.color-scheme-selector .color-pink .color-scheme-selector-swatch:before {
	background: var( --color__highlight-pink );
}
.color-scheme-selector .color-pink .color-scheme-selector-swatch::after {
	background: var( --color__body-pink-light );
}
.dark-mode .color-scheme-selector .color-pink .color-scheme-selector-swatch::after {
	background: var( --color__body-pink-dark );
}


.dark-mode-toggle {
	position: relative;
	aspect-ratio: 2 / 1;
	height: 40px;
}

.dark-mode-toggle input[type="checkbox"] {
	position: absolute;
	left: 10%;
	top: 50%;
	width: 1rem;
	height: 1rem;
	margin: 0;
	background: var( --color__text );
	cursor: pointer;
	border: none;
	border-radius: 50%;
	appearance: none;
	outline: none;
	transform: translate3d( 0, -50%, 0 ) rotate( 0 ) scale( 1 );
	transition: all var( --transition__in-back );
}

.dark-mode-toggle input[type="checkbox"]::before {
	content: " ";
}

.dark-mode-toggle input[type="checkbox"]:checked {
	left: 90%;
	transform: translate3d( -100%, -50%, 0 ) rotate( 0 ) scale( 1 );
}

.dark-mode-toggle input[type="checkbox"] + label {
	width: 100%;
	height: 100%;
	display: block;
	cursor: pointer;
	background: var( --color__box );
	border-radius: 9999px;
	transition: all var( --transition__default );
	box-shadow: inset 0 0 0 2px var( --color__highlight );
}

.dark-mode-toggle:hover input[type="checkbox"] + label {
	box-shadow: inset 0 0 0 2px var( --color__text );
}

.dark-mode-toggle .moon,
.dark-mode-toggle .sun {
	position: absolute;
	top: 50%;
	display: block;
	aspect-ratio: 1 / 1;
	height: 50%;
	color: var( --color__highlight );
	line-height: 1;
	transition: all var( --transition__in-back );
	transition-delay: 180ms;
}

.dark-mode-toggle .moon svg,
.dark-mode-toggle .sun svg {
	display: block;
	width: 100%;
	height: 100%;
}

.dark-mode-toggle .moon {
	left: 10%;
	opacity: 0;
	transform: translate3d( 0, -50%, 0 ) rotate( 45deg ) scale( 1 );
	transform-origin: center left;
}

.dark-mode-toggle .sun {
	right: 10%;
	opacity: 1;
	transform: translate3d( 0, -50%, 0 ) scale( 1 );
	transform-origin: center right;
}

.dark-mode-toggle input[type="checkbox"]:checked + label .moon {
	opacity: 1;
	transform: translate3d( 0, -50%, 0 ) rotate( 0 ) scale( 1 );
}

.dark-mode-toggle input[type="checkbox"]:checked + label .sun {
	opacity: 0;
	transform: translate3d( 0, 0, 0 ) scale( 1 );
}

.offline-text {
	padding: var( --card__spacing );
	background: var( --color__box );
	font-size: 0.875rem;
	color: rgba( var( --color__text-rgb ), 0.75 );
	box-shadow: inset 0 -2px 0 0 rgba( var( --color__text-rgb ), 0.1 );
}

/* Dark / Light Mode Switch Effect */

.mode-switcher-overlay {
	content: " ";
	position: fixed;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: var( --color-line__height );
	visibility: hidden;
}

.mode-switching .mode-switcher-overlay {
	z-index: 8;
	visibility: visible;
}

.mode-switcher-overlay-bg {
	content: " ";
	position: absolute;
	z-index: 9;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	transition: all 600ms ease-in-out;
	background: var( --color__body );
}

.mode-switching .mode-switcher-overlay-bg {
	animation: mode_switch 1000ms ease-in-out;
}

@keyframes mode_switch {
	0% {
		transform: translate3d( -100%, 0, 0 );
	}

	20% {
		transform: translate3d( 0, 0, 0 );
	}

	80% {
		transform: translate3d( 0, 0, 0 );
	}

	100% {
		transform: translate3d( 100%, 0, 0 );
	}
}