* {
	margin: 0;
	padding: 0;
	font-family: 'Montserrat';
	box-sizing: border-box;
}

body {
	display: flex;
	justify-content: center;
	height: 100%;
	min-width: 500px;
	background-color: #FFF4E0;
	padding-top: 20px;
	padding-bottom: 50px;
}

h1 {
	font-weight: bold;
	text-align: center;
}

#enter-name {
	font-size: 2.5rem;
}

.score-section {
	display: flex;
	gap: 25px;
	justify-content: center;
	align-content: center;
	margin-bottom: 5px;
}

.score-box {
	background-color: #FFF;
	padding: 10px;
	margin-left: 5px;
	margin-right: 15px;
	border: 5px solid black;
	border-radius: 12px;
	box-shadow: 5px 5px black;
}

.buttons {
	margin-top: 10px;
	display: flex;
	gap: 20px;
	justify-content: space-evenly;
}

.x-row-flex-container {
	display: flex;
	justify-content: right;
}

.scores-column-flex-container,
.enter-score-flex-container {
	margin-top: 30px;
	display: flex;
	padding: 20px;
	gap: 12px;
	flex-direction: column;
	overflow: auto;
	scrollbar-width: 5px;
	scrollbar-color: black;
	height: 80%;
}

.enter-score-flex-container {
	justify-content: space-evenly;
}

.highscore-box,
.name-box {
	display: flex;
	justify-content: space-between;
	border-radius: 12px;
	border: 5px solid black;
	box-shadow: 5px 5px black;
	background-color: #FFF4E0;
	font-size: 2rem;
	font-weight: bold;
	padding: 20px;
}

.name-box {
	text-align: center;
}

.reset-button,
.x-button,
.submit-button {
	background: black;
	border-radius: 12px;
	border: none;
	padding: 0;
	padding-right: 6px;
	cursor: pointer;
}

.reset-button {
	flex: 1;
}

.toggle-play-button {
	background: black;
	border-radius: 12px;
	border: none;
	padding: 0;
	cursor: pointer;
	padding-right: 6px;
	flex: 1;
}

.play-front {
	display: block;
	border: 5px solid black;
	font-weight: bold;
	padding: 6px 11px;
	border-radius: 12px;
	font-size: 1.25rem;
	color: black;
	background-color: #FD9745;
	transform: translateY(-6px);
	/* These are new, this is how I get the span to fill the button div */
	height: 100%;
	width: 100%;
}

.reset-front,
.x-front,
.submit-front {
	display: block;
	padding: 12px 22px;
	border: 5px solid black;
	border-radius: 12px;
	font-size: 1.25rem;
	color: black;
	font-weight: bold;
	background-color: #FD9745;
	transform: translateY(-6px);

}

.x-front,
.submit-front {
	border: 5px solid black;
	border-radius: 12px;
	font-size: 2.25rem;
	padding: 12px 32px;
	background-color: #FF3535;
}

.submit-front {
	background-color: #39BF39;
}

.toggle-play-button:active .play-front,
.reset-button:active .reset-front,
.x-button:active .x-front,
.submit-button:active .submit-front {
	transform: translateY(-2px);
	transform: translateX(3px);
}

.tetris-board {
	background-color: #FD9745;
	flex-grow: 1;
	border: 5px solid black;
	border-radius: 12px;
	box-shadow: 5px 5px black;
}


h2 {
	margin-top: auto;
	margin-bottom: auto;
}

.tetris-block {
	width: 100%;
	padding: 40%;
	border: 2px solid black;
	border-radius: 5px;
	background-color: #FFF4E0;
}

ul {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	grid-template-rows: repeat(20, 1fr);
	padding: 10px;
}

.body {
	margin-top: auto;
	margin-bottom: auto;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.pause-menu-modal,
.highscore-modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: hsla(0, 0%, 0%, 0.6);
}

.pause-menu,
.enter-highscore-menu {
	background-color: #FD9745;
	margin: 5% auto;
	padding: 20px;
	border: 5px solid black;
	box-shadow: 5px 5px black;
	border-radius: 12px;
	width: 35%;
	height: 70vh;
}

.enter-highscore-menu {
	height: 60vh;
}

/* I was fighting a loosing 
* battle with the css, so
* I opted to just use a media
* query for phone use
*/
@media (max-width: 985px) {
	.body {
		width: 80%;
	}

	html,
	body {
		overflow: hidden;
		touch-action: none;
	}

	body {
		position: relative;
		touch-action: manipulation;
		-webkit-user-select: none;
		user-select: none;
	}

	.pause-menu,
	.enter-highscore-menu {
		margin: 25% auto;
		border: 15px solid black;
		box-shadow: 20px 20px black;
		width: 85%;
	}

	.toggle-play-button,
	.reset-button {
		padding-right: 12px;
		padding-bottom: 6px;
	}

	.scores-column-flex-container,
	.enter-score-flex-container {
		gap: 40px;
		padding: 40px;
	}

	.highscore-box,
	.name-box {
		border: 12px solid black;
		box-shadow: 10px 10px black;
		font-size: 5rem;
		padding: 20px;
	}

	.x-button,
	.submit-button {
		padding-right: 18px;
		padding-bottom: 12px;
	}

	.x-front,
	.submit-front {
		border-radius: 20px;
		font-size: 6rem;
		border: 10px solid black;
		padding: 20px 50px;
	}

	.reset-front,
	.play-front,
	.x-button,
	.submit-button {
		font-size: 4rem;
		border-width: 10px;
		border-radius: 15px;
	}

	.toggle-play-button:active .play-front,
	.reset-button:active .reset-front {
		transform: translateY(-4px);
		transform: translateX(4px);
	}

	.x-button:active .x-front,
	.submit-button:active .submit-front {
		transform: translateY(-8px);
		transform: translateX(8px);
	}

	.score-section {
		font-size: 3rem;
	}

	h1 {
		font-size: 5rem;
	}

	#enter-name {
		font-size: 6.5rem;
	}

	.tetris-block {
		border-radius: 12px;
		border-width: 4px;
	}

	.score-box,
	.tetris-board {
		border-width: 12px;
		box-shadow: 15px 15px black;
	}

	.tetris-board {
		margin-bottom: 40px;
		margin-top: 30px;
	}

	.play-front>img {
		width: 18%;
		height: 100%;
	}

}

/* these prevent chrome from highlighting any of the buttons after clicking them, this only happens in chrome, not safari */
button:focus {
	outline: none;
}

button::-moz-focus-inner {
	border: 0;
}

button {
	-webkit-tap-highlight-color: transparent;
}

::-webkit-scrollbar {
	width: 20px;
}

::-webkit-scrollbar-thumb {
	background: black;
	border-radius: 12px;
}