@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Handjet:wght,ELSH@100..900,2&family=VT323&display=swap');

:root {
      --bg: #fffcf2;
      --gr0: #B2A795;
      --gr1: #CCC5B9;
      --gr2: #403D39;
      --dark: #151513;
			--dark1: #050505;
      --accent: #EB5E28;
    }

body {
  background: var(--dark1);
  font-family: "Handjet", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
	font-size: 1.6rem;
  color: var(--accent);
  display: grid;
  place-items: center;
  height: 100vh;
}

.console {
  text-align: center;
	border: 2px solid var(--gr2);
	width: 230px;
	height: 270px;
	padding: 2.5rem 1.5rem;
	border-radius: 0.25rem;
	bottom: -20%;
	box-shadow: 0 4px 0 6px var(--gr2),
							0 2px 10px 3px var(--bg);
	background: var(--dark);
}       

.screen {
	background: var(--dark1);
	border-radius: 0.25rem;
	border: 2px solid var(--gr2);
	box-shadow: 0 1px 0 2px var(--gr2),
							0 2px 8px 3px var(--dark1);
	bottom: -20%;
  padding: 2.6rem 1rem;
  margin-bottom: 1.75rem;
}

.keyboard {
	display: grid;
	gap: 0.5rem;
	background: var(--dark);
	margin: auto;
	padding: 1rem; 
	border-radius: 0.25rem;
	border: 2px solid var(--gr2);
	box-shadow: 0 4px 0 2px var(--gr2),
							0 2px 8px 3px var(--dark1);
	bottom: -20%;
}

.keyboard-row {
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

kbd {
	background-color: var(--bg);
	color: var(--dark);
	border-radius: 0.25rem;
	border: 1px solid var(--gr1);
	box-shadow: 0 2px 0 1px var(--gr1),
							0 2px 6px 3px var(--dark1);
	cursor: default;
	font-family: "Google Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	font-variation-settings: "GRAD" 0;
	font-size: 1.25rem;
	line-height: 1;
	min-width: 1rem;
	display: inline-block;
	text-align: center;
	padding: 0.5rem 0.7rem;
	margin: auto;
	position: relative;
	top: -1px;
	user-select: none;
	transition: all 0.05s;
	touch-action: manipulation;
    }

kbd:hover {
	box-shadow: 0 2px 0 1px var(--gr2);
	background: var(--gr1);
	top: 1px;
	cursor: pointer;
}

kbd.pressed {
	box-shadow: 0 1px 0 0.5px var(--gr2);
	background: var(--gr1);
	top: 1px;
}

kbd.active {
  background: var(--accent);
  color: var(--bg);
  top: 1px;
  box-shadow: 0 1px 0 0.5px var(--gr2);
}