style.css

/*
 *	Stylesheet ordering rules
 *	from https://css-tricks.com/poll-results-how-do-you-order-your-css-properties/
 *	.selector {
 *		*Positioning*
 *		position: absolute;
 *		z-index: 10;
 *		top: 0;
 *		right: 0;
 *	
 *		*Display & Box Model*
 *		display: inline-block;
 *		overflow: hidden;
 *		box-sizing: border-box;
 *		width: 100px;
 *		height: 100px;
 *		padding: 10px;
 *		border: 10px solid #333;
 *		margin: 10px;
 *	
 *		*Color*
 *		background: #000;
 *		color: #fff
 *		
 *		*Text*
 *		font-family: sans-serif;
 *		font-size: 16px;
 *		line-height: 1.4;
 *		text-align: right;
 *	
 *		*Other*
 *		cursor: pointer;
 *	}
 */

#webpage-state-always {
	display: block;
}

#webpage-state-loading-maps {
	display: none;
}

#webpage-state-menu {
	display: block;
}

#webpage-state-beatmap-selection {
	display: none;
}

#webpage-state-gameplay {
	display: none;
}

#webpage-state-pause-screen {
	display: none;
	z-index: 25;
}

#webpage-state-fail-screen {
	display: none;
	z-index: 25;
}

#webpage-state-results-screen {
	display: none;
}

#webpage-state-mods {
	display: block;
}

* {
	/* Helvetica for fallback */
	font-family: Varela Round, Helvetica;
}

body {
	margin: 0;
	overflow: hidden;
	width: 100vw;
	height: 100vh;

	background: #000;
	color: #e4ecef;

	font-display: fallback;
	font-size: 2.5vh;

	user-select: none;
}

img {
	user-drag: none;
	-webkit-user-drag: none;
}

#version {
	position: relative;
	top: -2.5vh;
	z-index: 15;

	width: 100vw;

	color: #e4ecef;

	text-align: center;
}

#back-button {
	position: relative;
	bottom: 0;
	float: left;

	display: inline-block;
	width: 10vw;
	height: 100%;

	background-color: #ff67aa;
	color: #e4ecef;

	transition: width 0.75s;
	transition-timing-function: ease-out;
	transform: skew(-10deg);
}

#back-button:hover {
	width: 15vw;

	transition: width 0.15s;
	transition-timing-function: cubic-bezier(0, .65, .6, 1.3);
}

#back-button:hover #back-button-image-container {
	background-color: #ce5189;
}

#back-button-image {
	position: relative;
	top: 12.5%;

	display: block;
	width: 4vh;
	/* for some reason will only work like this */
 	margin-left: auto;
	margin-right: auto;

	transform: skew(10deg);
}

#back-button-image-container {
	position: relative;

	display: inline-block;
	width: 30%;
	height: 6vh;

	background-color: #ff67aa;
	
	transition: width 0.2s, background-color 0.2s;
	transition-timing-function: cubic-bezier(0, .65, .6, 1.3);
	transform: skew(-10deg);
}

#back-button-text {
	position: relative;
	bottom: calc(6vh / 2 - 1em / 4);

	display: inline-block;
	width: 60%;

	text-align: center;
}

.bottom-bar-buttons {
	position: relative;
	float: left;

	display: inline-block;
	width: 7.5vw;
	height: 6vh;
	box-sizing: border-box;

	color: #e4ecef;

	transition: border-top background;
	transition-duration: 0.2s;
	transform: skew(-10deg);
}

.bottom-bar-buttons:active {
	transition-duration: 0s;
}

.bottom-bar-buttons-text {
	position: relative;
	bottom: calc(1em / 1.5);

	height: 6vh;
	transform: skew(10deg);

	text-align: center;
}

#bottom-bar {
	position: absolute;
	z-index: 1000;
	bottom: 0vh;

	display: none;
	width: 100vw;
	height: 6vh;

	background-color: #0007;
}

#bottom-bar-upload {
	border-top: 0.5vh solid #ff842677;
}

#bottom-bar-upload:hover {
	border-top: 1.5vh solid #ff8426;
}

#bottom-bar-upload:active {
	background: #ff8426;
}

#bottom-bar-mods {
	border-top: 0.5vh solid #ffcb2077;
}

#bottom-bar-mods:hover {
	border-top: 1.5vh solid #ffcb20;
}

#bottom-bar-mods:active {
	background: #ffcb20;
}

#bottom-bar-random {
	border-top: 0.5vh solid #89b20277;	
}

#bottom-bar-random:hover {
	border-top: 1.5vh solid #89b202;
}

#bottom-bar-random:active {
	background: #89b202;
}

#bottom-bar-options {
	border-top: 0.5vh solid #66ccff77;
}

#bottom-bar-options:hover {
	border-top: 1.5vh solid #66ccff;
}

#bottom-bar-options:active {
	background: #66ccff;
}

#top-bar {
	position: fixed;
	z-index: 300;
	top: 0;
	left: 0;

	padding: 0 1vh;
	box-sizing: border-box;
	width: 100vw;
	height: 6.25vh;

	background: #191919;
	background-size: 25vw;
}

.top-bar-text {
	float: left;
	display: inline;
	padding: calc((6.25vh - 1.25em) / 2);
	margin: 0;

	color: #e4ecef;

	border-collapse: collapse;
	transition: background 0.5s ease;
}

.triangle-background {
	background: url("./src/images/triangles.png");
	background-attachment: fixed;
}