@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@700&display=swap');

:root {
	--theme-font: 'Spartan', sans-serif;
}
.b-body_theme_blue {
	/* Theme 1 */
	--b-main: hsl(222, 26%, 31%);
	--b-keypad: hsl(223, 31%, 20%);
	--b-screen: hsl(224, 36%, 15%);
	--b-key-primary: hsl(225, 21%, 49%);
	--key-shadow-primary: hsl(224, 28%, 35%);
	--b-key-tertiary: hsl(6, 63%, 50%);
	--key-shadow-tertiary: hsl(6, 70%, 34%);
	--b-key: hsl(30, 25%, 89%);
	--key-shadow: hsl(28, 16%, 65%);
	--text-primary: hsl(221, 14%, 31%);
	--text-color: hsl(30, 25%, 89%);
	--white: white; /* hsl(0, 0, 100%) */
}
.b-body_theme_white {
	/* Theme 2 */
	--b-main: hsl(0, 0%, 90%);
	--b-keypad:  hsl(0, 5%, 81%);
	--b-screen: hsl(0, 0%, 93%);
	--b-key-primary: hsl(185, 42%, 37%);
	--key-shadow-primary: hsl(185, 58%, 25%);
	--b-key-tertiary: hsl(25, 98%, 40%);
	--key-shadow-tertiary: hsl(25, 99%, 27%);
	--b-key: hsl(45, 7%, 89%);
	--key-shadow: hsl(35, 11%, 61%);
	--text-primary: hsl(60, 10%, 19%);
	--text-color: hsl(60, 10%, 19%);
	--white: white; /* hsl(0, 0, 100%) */
}
.b-body_theme_purple {
	/* Theme 3 */
	--b-main: hsl(268, 75%, 9%);
	--b-keypad:  hsl(268, 71%, 12%);
	--b-screen: hsl(268, 71%, 12%);
	--b-key-primary: hsl(281, 89%, 26%);
	--key-shadow-primary: hsl(285, 91%, 52%);
	--b-key-tertiary: hsl(176, 100%, 44%);
	--key-shadow-tertiary: hsl(177, 92%, 70%);
	--b-key: hsl(268, 47%, 21%);
	--key-shadow: hsl(290, 70%, 36%);
	--text-primary: hsl(52, 100%, 62%);
	--text-color: hsl(52, 100%, 62%);
	--white: white; /* hsl(0, 0, 100%) */
}

body {
	background-color: var(--b-main);
	box-sizing: border-box;
	color: var(--text-color);
	font-family: var(--theme-font);
	margin: 0;
}

.b-main {
	display: flex;
	flex-direction: column;
	height: 95vh;
	justify-content: center;
	margin: 0 auto;
	width: 450px;
}

/* Calculator head */
.b-head {
	align-items: flex-end;
	display: flex;
	justify-content: space-between;
}
.b-head__title {
	margin: 0;
	font-size: 25px;
}
.b-head__theme {
	align-items: center;
	color: var(--text-color);
	display: grid;
	font-size: 10px;
	grid-template: repeat(2, 20px) / repeat(2, 60px);
	grid-template-areas: 
		". options"
		"text switch";
}
.b-head__text {
	grid-area: text;
	letter-spacing: 1px;
}
.b-head__options {
	display: flex;
	grid-area: options;
	justify-content: space-around;
	padding: 0 4px;
}
.b-switch {
	background-color: var(--b-keypad);
	border-radius: 50ex;
	box-sizing: border-box;
	display: flex;
	grid-area: switch;
	height: 20px;
	justify-content: space-between;
	padding: 4px;
}
.b-switch__radio {
	appearance: none;
	border-radius: 50%;
	height: 13px;
	margin: 0;
	outline: none;
	width: 13px;
}
.b-switch_theme_blue:checked {
	background-color: var(--b-key-tertiary);
}
.b-switch_theme_white:checked {
	background-color: var(--b-key-tertiary);
}
.b-switch_theme_purple:checked {
	background-color: var(--b-key-tertiary);
}


/* Screen */
.b-screen {
	align-items: center;
	background-color: var(--b-screen);
	border-radius: 10px;
	display: flex;
	font-size: 40px;
	height: 60px;
	justify-content: flex-end;
	margin: 25px 0 20px;
	padding: 25px;
}
.b-screen__result {
	font-size: 1em;
}

/* Keypad */
.b-keypad {
	background-color: var(--b-keypad);
	border-radius: 9px;
	display: grid;
	grid-auto-columns: auto;
	grid-gap: 20px;
	grid-template: repeat(5, 1fr) / repeat(4, 1fr);
	height: 350px;
	padding: 25px;
}
.b-keypad__key {
	border-top: 0;
	border-right: 0;
	border-left: 0;
	border-radius: 10px;
	font-family: var(--theme-font);
	padding-top: 8px;
}
.key_width_double_left {
	grid-column: 1 / 3;
	grid-row: 5 / 6;
}
.key_width_double_right {
	grid-column: 3 / 5;
	grid-row: 5 / 6;
}
.key_keys_primary {
	font-size: 26px;
	border-bottom: 4px solid var(--key-shadow);
	background-color: var(--b-key);
	color: var(--text-primary);
}
.key_keys_secondary {
	font-size: 17px;
	border-bottom: 4px solid var(--key-shadow-primary);
	background-color: var(--b-key-primary);
	color: var(--white);
}
.key_keys_tertiary {
	font-size: 17px;
	border-bottom: 4px solid var(--key-shadow-tertiary);
	background-color: var(--b-key-tertiary);
	color: var(--b-key);
}


.attribution { font-size: 11px; text-align: center; }
.attribution a { color: var(--text-color); }

@media only screen and (max-width: 600px){
	.b-main {
		width: 325px;
		
	}
	/* Head */
	.b-head {
		align-items: center;
	}
	.b-head__title {
		font-size: 32px;
	}
	.b-head__theme {
		font-size: 12px;
		grid-template: repeat(2, 25px) / repeat(2, 75px);
		grid-template-areas: 
		". options"
		"text switch";
	}
	.b-switch {
		height: 26px;
		padding: 5px;
	}
	.b-switch__radio {
		height: 16px;
		width: 16px;
	}

	/* Screen */
	.b-screen {
		height: 40px;
		margin: 30px 0 25px;
	}
	.b-screen__result {
		font-size: 0.75em;
	}

	/* Keypad */
	.b-keypad {
		grid-gap: 14px;
		height: 375px;
	}
	.b-keypad__key {
		border-radius: 5px;
	}
}