:root,
.theme-1 {
	/* Backgrounds */
	--main-background: hsl(222, 26%, 31%);
	--toggle-background: hsl(223, 31%, 20%);
	--screen-background: hsl(224, 36%, 15%);

	/* Keys */
	--toggle: hsl(6, 63%, 50%);
	--key-background: hsl(30, 25%, 89%);
	--key-shadow: hsl(28, 16%, 65%);
	--special-key-bg: hsl(225, 21%, 49%);
	--speacial-key-shadow: hsl(224, 28%, 35%);
	--toggle-shadow: hsl(6, 70%, 34%);

	/* Text */
	--text: hsl(0, 0%, 100%);
	--key: hsl(221, 14%, 31%);
}

.theme-2 {
	/* Backgrounds */
	--main-background: hsl(0, 0%, 90%);
	--toggle-background: hsl(0, 5%, 81%);
	--screen-background: hsl(0, 0%, 93%);

	/* Key- */
	--toggle: hsl(25, 98%, 40%);
	--key-background: hsl(45, 7%, 89%);
	--key-shadow: hsl(35, 11%, 61%);
	--special-key-bg: hsl(185, 42%, 37%);
	--speacial-key-shadow: hsl(185, 58%, 25%);
	--toggle-shadow: hsl(25, 99%, 27%);

	/* Text */
	--text: hsl(60, 10%, 19%);
	--key: hsl(60, 10%, 19%);
}

.theme-3 {
	/* Backgrounds */
	--main-background: hsl(268, 75%, 9%);
	--toggle-background: hsl(268, 71%, 12%);
	--screen-background: hsl(268, 71%, 12%);

	/* Keys */
	--key-background: hsl(268, 47%, 21%);
	--key-shadow: hsl(290, 70%, 36%);
	--special-key-bg: hsl(281, 89%, 26%);
	--speacial-key-shadow: hsl(285, 91%, 52%);
	--toggle: hsl(176, 100%, 44%);
	--toggle-shadow: hsl(177, 92%, 70%);

	/* Text */
	--text: hsl(52, 100%, 62%);
	--key: hsl(52, 100%, 62%);
	--text-2: hsl(198, 20%, 13%);
}

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

button {
	border: none;
	background: none;
	color: inherit;
	font-family: inherit;
}

body {
	background-color: var(--main-background);
}

.wrapper {
	max-inline-size: 23.4375rem;
	margin: 0 auto;
	padding: 1.875rem 1.5rem;
	color: var(--text);
	font-family: "League Spartan", sans-serif;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	block-size: 2.625rem;
}

.theme-container {
	display: flex;
	gap: 1.625rem;
	font-size: 0.75rem;
	font-weight: 700;
}

.theme {
	align-self: flex-end;
	letter-spacing: 1px;
}

.theme-options {
	display: grid;
	gap: 0.3125rem;
	inline-size: 4.375rem;
}

.labels {
	display: flex;
	justify-content: space-around;
}

.theme-toggle {
	position: relative;
	block-size: 1.625rem;
	background-color: var(--toggle-background);
	border-radius: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-inline: 0.3125rem;
	gap: 0.5rem;
}

.theme-toggle input {
	appearance: none;
	inline-size: 1rem;
	block-size: 1rem;
	border-radius: 50%;
	cursor: pointer;
	position: relative;
	z-index: 2;
	opacity: 0;
}

.theme-toggle .toggle-button {
	position: absolute;
	inset: 0.3125rem;
	inline-size: 1rem;
	block-size: 1rem;
	background-color: var(--toggle);
	border-radius: 50%;
	transition: left 0.3s ease;
	z-index: 1;
}

#theme-1:checked ~ .toggle-button {
	left: 0.25rem;
}

#theme-2:checked ~ .toggle-button {
	left: calc(50% - 0.5rem);
}

#theme-3:checked ~ .toggle-button {
	left: calc(100% - 1.25rem);
}

.result {
	margin-block: 2rem 1.5rem;
	block-size: 5.5rem;
	background-color: var(--screen-background);
	border-radius: 0.625rem;
	padding: 1.875rem 1.5rem 1.375rem 0;
	font-size: 2.5rem;

	overflow-x: auto;
	white-space: nowrap;
	text-align: right;
}

.key-container {
	padding: 1.5rem;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.75rem;
	background-color: var(--toggle-background);
	border-radius: 0.625rem;
}

.key {
	font-size: 2rem;
	font-weight: 700;
	color: var(--key);
	background-color: var(--key-background);
	block-size: 4rem;
	inline-size: 3.75rem;
	border-radius: 0.25rem;
	box-shadow: inset 0 -4px 0 0 var(--key-shadow);
}

.key:hover {
	cursor: pointer;
	opacity: 80%;
}

/* Del */
.key:nth-child(4),
.key:nth-child(17),
.key:nth-child(18) {
	font-size: 1.25rem;
	color: white;
	background-color: var(--special-key-bg);
	box-shadow: inset 0 -4px 0 0 var(--speacial-key-shadow);
}

/* reset */
.key:nth-child(17) {
	grid-column: 1/3;
	inline-size: 100%;
}

/* = */
.key:nth-child(18) {
	grid-column: 3/5;
	inline-size: 100%;
	background-color: var(--toggle);
	box-shadow: inset 0 -4px 0 0 var(--toggle-shadow);
}

.theme-3 .key:nth-child(18) {
	color: var(--text-2);
}

@media (min-width: 34.5rem) {
	.wrapper {
		max-inline-size: 33.75rem;
		padding: 6rem 0;
	}

	.result {
		block-size: 8rem;
		font-size: 3.5rem;
		padding: 2.5rem 2rem 2.25rem 0;
	}

	.key-container {
		padding: 2rem 1.875rem;
		gap: 1.5rem;
	}

	.key {
		font-size: 2.5rem;
		inline-size: 6.375rem;
		block-size: 4rem;
		border-radius: 0.625rem;
	}

	.key:nth-child(4),
	.key:nth-child(17),
	.key:nth-child(18) {
		font-size: 1.75rem;
	}
}