#background-dim {
	position: absolute;
	z-index: -10;

	transition: filter 0.5s;
	will-change: top left;
}

#background {
	top: -5vh;
	left: -5vh;
	z-index: -10;

	width: 110vw;
	height: 110vh;

	object-fit: cover;
}
#avatar {
	float: left;
	width: 4vh;
	margin-top: 1.125vh;
	border-radius: 1vh;
}

.gamemode-icons {
	float: left;
	width: 4vh;
	margin-top: 1.125vh;
	
}

.settings-button {
	width: 100%;
	height: calc(5vh + 1em);
	margin: 0.5vh 0;
	border: none;
	border-radius: 1.5vh;
	background-size: 25vw;

	background-color: #2ca4cc;
	color: #e4ecef;

	text-align: center;
	font-family: inherit;
	font-size: 1.75vh;

	outline: none;

	transition: background 0.2s;
}

#splash-screen {
	position: absolute;
	z-index: 1000;
	pointer-events: none;

	width: 100vw;
	height: 100vh;
	padding-top: calc(42.5vh - 3em);
	
	background: #000;

	text-align: center;
	
	transition: opacity 1s;
}

#splash-screen p {
	color: #000;
}

.splash-screen-warning-img {
	height: 1.5em;
	vertical-align: middle;
	opacity: 0;

	transition: opacity 1s;
}
.osw-logo-splash-screen {
	padding: 2vh;
	height: 10vh;
	vertical-align: middle;
	opacity: 0;

	transition: opacity 1s;
}


#orientation-vertical {
	position: absolute;
	z-index: 1001;

	display: none;
	width: 100vw;
	height: 100vh;
	padding-top: calc(50vh - 1em);

	background: #000;
	color: #e4ecef;

	text-align: center;
}

@keyframes splash-screen-text {
	0% {
		color: #000;
		letter-spacing: 3px;
	}
	100% {
		color: #e4ecef;
		letter-spacing: 0px;
	}
}

@keyframes splash-screen-text-2 {
	0% {
		color: #000;
		letter-spacing: 3px;
	}
	100% {
		color: #FD67AE;
		letter-spacing: 0px;
	}
}

#menu-parallax {
	position: relative;

	transition: filter 0.5s;
}

.sidenav {
	position: fixed;
	z-index: 1000000;

	height: 100vh;
	width: 0;
	overflow-x: hidden;
	background: #0d0d0d;
	opacity: 0;

	transition: width opacity;
	transition-duration: 0.7s;
	transition-timing-function: cubic-bezier(0.15, 0.6, 0.3, 1);
}

.sidenav p,
.sidenav a {
	margin: 0;
	padding: 1vh;

	color: #e4ecef;

	font-size: 2.2vh;
	white-space: nowrap;
	text-decoration: none;
}

#sidenav-left {
	position: absolute;
	top: 0;
	left: 0;
}

#sidenav-right {
	position: absolute;
	top: 0;
	right: 0;
}

.close-btn {
	position: absolute;
	top: 0;
	right: 1vw;

	margin-left: 50px;

	font-size: 3.3vh;
}

.sidenav-title-text {
	color: #f8c621 !important;

	font-size: 3.3vh !important;
}

.sidenav-padding {
	padding: 2.5%;
}

.sidenav-divider {
	margin: 2vh 0;
	padding: 0.25vh;

	background: #000;
}

#sidenav-notifications {
	max-width: 90%;
}

.character {
	display: inline-block;
	width: 1.5vh;
	height: 1.5vh;
	margin: auto;
	border: 0.4vh solid #FD67AE;
	border-radius: 1.5vh;

	background: #0d0d0d;

	line-height: 0.6;
	text-align: center;

	transition: background border-color box-shadow;
	transition-duration: 0.2s;
	transition-timing-function: ease;
}

.character:hover {
	border-color: #ffc4ff;

	box-shadow: -3px -3px 6px #FD67AE55, 3px -3px 6px #FD67AE55, 3px 3px 6px #FD67AE55, -3px 3px 6px #FD67AE55;
}

.lds-heart {
	margin-top: 7.5vh;
	position: relative;

	display: inline-block;
	width: 80px;
	height: 80px;

	transform: rotate(45deg);
	transform-origin: 40px 40px;
}

.lds-heart div {
	position: absolute;
	top: 32px;
	left: 32px;
	
	width: 32px;
	height: 32px;

	background: #FD67AE;

	animation: lds-heart 0.7s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

.lds-heart div:after,
.lds-heart div:before {
	position: absolute;

	display: block;
	width: 32px;
	height: 32px;
	content: " ";
	
	background: #FD67AE;
}

.lds-heart div:before {
	left: -24px;

	border-radius: 50% 0 0 50%;
}

.lds-heart div:after {
	top: -24px;

	border-radius: 50% 50% 0 0;
}

@keyframes lds-heart {
	0% {
		transform: scale(0.95);
	}
	5% {
		transform: scale(1.1);
	}
	39% {
		transform: scale(0.85);
	}
	45% {
		transform: scale(1);
	}
	60% {
		transform: scale(0.95);
	}
	100% {
		transform: scale(0.9);
	}
}

#frame-rate {
	position: absolute;
	z-index: 100;
	bottom: 1vh;
	right: 1vh;

	margin: 0;
	border-radius: 1em;
	padding: 0.5em;

	background: #0f0;
	color: #e4ecef;

	font-size: 1.25vh;

	transition: background 1s, opacity 1s;	
}

#goodbye {
	position: absolute;
	z-index: -10000;

	width: 100vw;
	height: 100vh;
	opacity: 0;

	background-color: #000;

	transition: opacity 4s;
}

#intro {
	position: absolute;
	z-index: 999;

	width: 100vw;
	height: 100vh;

	background: #000;
	color: #e4ecef;

	transition: opacity 0.75s;
}

#intro-logo {
	position: absolute;
	top: calc(50vh - 175vh / 2);
	left: calc(50vw - 175vh / 2);

	width: 175vh;
	height: 175vh;

	transition: left top width height;
	transition-duration: 0.8s;
	transition-timing-function: cubic-bezier(0.8,.4,.85,.3);
}

#intro-text {
	position: relative;
	top: calc(50vh - 1em);

	text-align: center;
	font-size: 5vh;

	transition: letter-spacing 0.8s;
	transition-timing-function: linear;
}

.intro-gamemodes {
	position: absolute;
	top: -10vh;

	width: 4vh;
	
	transition-timing-function: linear;
}

polygon {
	fill-opacity: 0;
	stroke-opacity: 0;
	animation-fill-mode: forwards;
}

@keyframes fade-in-out {
	0% {
		fill-opacity: 0;
		stroke-opacity: 0;
	}
	20% {
		fill-opacity: 1;
		stroke-opacity: 1;
	}
	100% {
		fill-opacity: 0;
		stroke-opacity: 0;
	}
}