style.css

@import url("https://fonts.googleapis.com/css2?family=Lato&family=Roboto&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400&family=Rubik:wght@300;400&display=swap");

:root {
	--orange: rgb(255, 153, 1);
	--white: #fff;
	--black: #000;
	--github-fill: rgb(38, 37, 41);
	--github-color: #f3f3f3;
	--github-hover: var(--orange);
	--body-background: rgba(145, 144, 144, 0.1);

	--placeholder: rgba(68, 67, 67, 0.3);
	--rubik: "Rubik", sans-serif;
	--input-background: #eeeded;
	--input-shadow: 5px 5px 10px #bcbcbc, -5px -5px 10px #ffffff;
	--keyboard-shadow: 4px 4px 6px #7c7c7c, -5px -5px 10px #ffffff;
	--keyboard-background: #e6e6e6;
	--keyboard-background-color: #f3f7fc;
	--keyboard-gradient: linear-gradient(
		145deg,
		rgb(204, 204, 204) 0%,
		rgb(235, 234, 234) 45%,
		rgb(170, 170, 170) 100%
	);

	--key-text-color: rgb(255, 255, 255);
	--key-background: rgb(3, 3, 3) radial-gradient(circle at 0 0, rgba(0, 0, 0, 0.75), rgba(98, 93, 107, 0.753));
	--key-shadow: inset rgba(0, 0, 0, 0.75) -1px -1px 2px, inset rgba(255, 255, 255) 1px 1px 2px,
		rgba(0, 0, 0, 0.8) 1px 1px 2px -1px;
	--key-active-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
	--key-hover-shadow: inset rgba(88, 88, 88, 0.75) -2px -2px 3px, inset rgba(255, 255, 255) 1px 1px 2px,
		rgba(224, 223, 223, 0.8) 1px 1px 2px -1px;
	--key-double-color: rgb(48, 47, 47);
	--footer-text: rgb(84, 84, 84);
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--body-background);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::placeholder {
	color: var(--placeholder);
}

.input-area {
	display: block;
	width: 95%;
	line-height: 44px;
	max-width: 1050px;
	height: calc(100vh - 580px);
	min-height: 10px;
	margin: 30px auto;
	padding: 20px;
	letter-spacing: 1.5px;
	resize: vertical;
	font-family: var(--rubik);
	font-size: 1.75rem;
	border: none;
	border-radius: 15px;
	outline: none;
	border-radius: 4px;
	background: var(--input-background);
	box-shadow: var(--input-shadow);
}

.keyboard {
	display: flex;
	flex-direction: column;
	row-gap: 10px;
	width: 95%;
	max-width: 1050px;
	padding: 10px;
	border-radius: 10px;
	background: var(--keyboard-background);
	background-color: var(--keyboard-background-color);
	background-image: var(--keyboard-gradient);
	box-shadow: var(--keyboard-shadow);
}

.keyboard__row {
	display: flex;
	column-gap: 9px;
}

.keyboard__key {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5px;
	min-width: 6%;
	height: 50px;
	font-size: 18px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	user-select: none;
	border-radius: 4px;
	color: var(--key-text-color);
	background: var(--key-background);
	box-shadow: var(--key-shadow);
	transition: all 0.2s ease;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	user-select: none;
	outline: none;
}

.keyboard__key:active {
	transform: scale(0.95);
	box-shadow: var(--key-active-shadow);
}
.keyboard__key:hover {
	color: var(--black);
	background: var(--orange);
	box-shadow: var(--key-hover-shadow);
	outline: none;
}

.keyboard__key_pressed {
	color: var(--black);
	background: var(--orange);
	box-shadow: var(--key-hover-shadow);
	outline: none;
	transform: scale(0.95);
}

.keyboard__key_double {
	justify-content: space-around;
}

.keyboard__key_double .disable {
	color: var(--key-double-color);
	visibility: hidden;
}

.keyboard__key_wide {
	flex-grow: 1;
}

.footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	color: var(--footer-text);
	text-align: center;
	font-family: var(--rubik);
	margin-bottom: 25px;
	text-transform: uppercase;
	justify-content: center;
	letter-spacing: 1px;
	font-size: 1.07rem;
	font-weight: 300;
}

#first-instruction {
	display: inline-block;
}

#second-instruction {
	display: none;
}

.github-corner:hover .octo-arm {
	animation: octocat-wave 560ms ease-in-out;
}

.github-corner:hover svg path {
	fill: var(--github-hover);
}

.github-corner:hover .octo-arm,
.github-corner:hover .octo-body {
	fill: var(--github-color);
}

@keyframes octocat-wave {
	0%,
	100% {
		transform: rotate(0);
	}
	20%,
	60% {
		transform: rotate(-25deg);
	}
	40%,
	80% {
		transform: rotate(10deg);
	}
}

@media (max-width: 500px) {
	.github-corner:hover .octo-arm {
		animation: none;
	}
	.github-corner .octo-arm {
		animation: octocat-wave 560ms ease-in-out;
	}
}

@media screen and (max-width: 768px) {
	.input-area {
		width: 95%;
		margin: auto 10px;
		margin-bottom: 20px;
		margin-top: 50px;
		font-size: 1.5rem;
		line-height: 32px;
	}

	.keyboard {
		width: 95%;
		row-gap: 4px;
		padding: 8px;
	}

	.keyboard__row {
		column-gap: 4px;
	}

	.keyboard__key {
		font-size: 10px;
		height: 24px;
	}

	.footer {
		width: 95%;
		margin: auto 10px;
		margin-bottom: 20px;
		font-size: 14px;
		line-height: 20px;
	}

	.material-icons {
		font-size: 12px;
	}
}

@media (max-width: 400px) {
	.input-area {
		max-height: 50vh;
	}

	.keyboard {
		display: none;
	}

	#first-instruction {
		display: none;
	}

	#second-instruction {
		display: inline-block;
	}
}