#webpage-state-pause-screen {
	position: absolute;
	top: 0;
	left: 0;

	width: 100vw;
	height: 100vh;
}

.pause-menu-button {
	display: flex;
	width: 80vw;
	height: calc(100% / 3);
	margin: 0 10vw 0 10vw; 
	justify-content: center;
	align-items: center;
	background-repeat: repeat;
	background-size: 100%;

	transition: width 0.2s, margin 0.2s, letter-spacing 0.2s;
	transition-timing-function: cubic-bezier(0, .65, .6, 1.3);
	transform: skewX(-20deg);
}

.pause-menu-anti-skew {
	color: #e4ecef;

	font-weight: bolder;
	font-size: 4vh;

	transform: skewX(20deg);
}

.pause-menu-button:hover {
	width: 90vw;
	margin: 0 5vw;

	letter-spacing: 0.5vh;
}

#pause-menu-continue {
	background-color: #88b300;
}

#pause-menu-retry {
	background-color: #eeaa00;
}

#pause-menu-quit {
	background-color: #aa1b27;
}

#pause-menu-container {
	width: 100vw;
	height: 30vh;

	background: #222;
}

#pause-menu-pause-text-container {
	display: flex;
	width: 100vw;
	height: calc(50vh - 30vh / 2);
	justify-content: center;
	align-items: center;
}

#pause-menu-pause-text {
	position: relative;
	top: 10vh;

	color: #f8c621;

	font-size: 4vh;
	letter-spacing: 0.5vh;
	text-align: center;
	font-weight: bolder;
}

#pause-menu-pause-text-2 {
	position: relative;
	top: 7.5vh;

	color: #e4ecef;
	
	text-align: center;
}