body {
  padding-top: 2em;
}

* {
  font-family: sans-serif;
}

.nav {
	font-family: sans-serif;
	font-weight: 200;
	width: 420px;
	padding: 20px 0;
	border: 2px solid #333;
}

.nav > a {
	padding-left: 2em;
}
.container {
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

.title {
  font-family: sans-serif;
  font-weight: 400;
  width: 380px;
  padding: 10px 20px;
  text-align: center;
  letter-spacing: 2px;
  color: #333;
  border: 3px solid #333;
}

.box {
  border: 3px solid #333;
  width: 380px;
  padding: 20px;
}

@media only screen and (max-width: 600px){
	body {
		padding-top: 0;
	.nav {
		padding: 10px 1svw !important;
		width: 92svw !important;
	}
	.box {
		padding: 10px 1svw !important;
		width: 92svw !important;
	}
	.title {
		padding: 10px 1svw !important;
		width: 92svw !important;
	}
	#keyboard-cont {
		width: 92svw;
		padding: 20px 0;
}