@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

body {
	background-color: #161b22;
	font-family: 'Open Sans', sans-serif;
}

.title {
	color: #eee;
	font-size: 3.5vw;
	text-align: center;
	margin-bottom: 0;
}

.cube {
	background-color: #30363c;
	display: inline-block;
}

.cube-sm {
	height: 1.4vw;
	width: 1.4vw;
	margin: 0.15vw;
}

.cube-mm {
	height: 2.8vw;
	width: 2.8vw;
	margin: 0.3vw;
}

.cube-lg {
	height: 5.6vw;
	width: 5.6vw;
	margin: 0.6vw;
}

#game {
	text-align: center;
	transition: .5s;
}

.row-sm {
	height: 1.7vw;
}

.row-mm {
	height: 3.4vw;
}

.row-lg {
	height: 6.8vw;
}

.food {
	background-color: #c70000;
}

.snake {
	background-color: #00c72f;
}

.starttext {
	color: #eee;
	font-weight: 600;
	font-size: 1.5vw;
	margin-top: 20vh;
}

.subtext {
	color: #eee;
	font-weight: 600;
	font-size: 1.2vw;
	text-align: center;
	margin-top: 0;
	margin-bottom: 3vw;
}

.subtext span {
	font-weight: normal;
}

.menubtn {
	background-color: #30363c;
	color: #eee;
	font-weight: 600;
	font-size: 1.1vw;
	border: none;
	border-radius: 10vw;
	outline: none;
	cursor: pointer;
	height: 3vw;
	width: 13vw;
	display: block;
	margin-bottom: .9vw;
	margin-left: auto;
	margin-right: auto;
}

.playbtn {
	background-color: #33563f;
	width: 15vw;
}

.menubtn:hover,
.settingsbtn:hover {
	background-color: #8b949e;
}

.playbtn:hover {
	background-color: #3fb950;
}

.settingstext {
	color: #eee;
	text-align: center;
	font-weight: 600;
	font-size: 1.1vw;
	margin-bottom: 1vw;
}

.settingsbtn {
	background-color: #30363c;
	color: #eee;
	font-weight: normal;
	font-size: 1vw;
	border: none;
	border-radius: 10vw;
	outline: none;
	cursor: pointer;
	height: 2vw;
	width: 8vw;
	margin-bottom: 1vw;
	margin-left: .5vw;
	margin-right: .5vw;
}

.settings-row {
	display: flex;
	justify-content: center;
	margin-bottom: 3vw;
}

.active {
	background-color: #33563f;
}

.active:hover {
	background-color: #3fb950;
}