/*
**	palette of whites: pure white, .35 opacity white, .1 opacity white
**	north american desktop resolutions: 21% 1920x1080; 16% 1366x768;
**	1280x720 is smallest common resolution (at 4% representation)
*/

/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto'), local('Roboto-Regular'), url(fonts/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto'), local('Roboto-Regular'), url(fonts/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/*==============================================================================
**		STANDARD HTML ELEMENTS
==============================================================================*/

html {
	background: linear-gradient(
		120deg,
		hsl(200, 45%, 50%),
		hsl(220, 45%, 50%)
	);
	color: #fff;
	font-family: 'roboto', sans-serif;
	font-size: 12pt;
	margin: 0;
	min-height: 100vh;
}
body {
	margin: 0;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	font-family: inherit;
	font-size: inherit;
}

*:focus {outline: none;}


/*==============================================================================
**		CUSTOM SIMPLE ONE-OFF CLASSES
==============================================================================*/

.fullscreen { /* for first child of body element on single pages */
	margin-top: 15rem;
	min-height: 35rem;
	}

.wrapper {
	margin: auto;
	width: 36rem;
}
	.wrapper--center {
		margin: auto;
		text-align: center;
		width: 36rem;
	}

.game-version {
	color: rgba(255, 255, 255, .35);
	font-size: 75%;
	margin: auto;
	text-align: center;
	width: 20rem;
}


.button--plain { /* style buttons to look like plain text or links */
	background: transparent;
	border: none;
	color: inherit;
	cursor: pointer;
	display: inline;
	font: inherit;
	padding: 0;
	user-select: auto;
}


/*==============================================================================
**		SEMANTIC BLOCKS AND SECTIONAL STYLES
==============================================================================*/

.login-frame {
//	display: flex;
//	flex-direction: column;
//	align-items: center;
	margin: 2rem auto;
	width: 20rem;
}
	.login-frame__input {
		background: rgba(255, 255, 255, 0.1);
		border: none;
		border-radius: .35rem;
		color: #fff;
		margin: .25rem;
		padding: 1rem;
		text-align: center;
		width: 100%;
	}
		.login-frame__input::placeholder {color: rgba(255, 255, 255, 0.35);}


.sidebar {
	display: flex;
	flex-direction: column;
	position: absolute;
	left: 0;
	top: 0;
}
	.sidebar__item {
		background: rgba(255, 255, 255, .1);
		margin-bottom: .5rem;
		padding: 2.5rem 3rem;
		text-align: center;
	}
		.sidebar__item:hover {
			background: rgba(255, 255, 255, .25);
		}



.loading__animation-container {
	display: flex;
	min-height: 6rem;
}
.loading__animation {
	animation: loading 3.6s;
	border-radius: 3rem;
	height: 0;
	margin: auto;
}
	@keyframes loading {
		0% {
			border: 2px solid rgba(255, 255, 255, 0);
			height: 1rem;
			width: 1rem;
		}
		25% {
			border: 2px solid rgba(255, 255, 255, .35);
			height: 6rem;
			width: 6rem;
		}
		25.0001% {
			border: 2px solid rgba(255, 255, 255, 0);
			height: 1rem;
			width: 1rem;
		}
		50% {
			border: 2px solid rgba(255, 255, 255, .35);
			height: 6rem;
			width: 6rem;
		}
		50.0001% {
			border: 2px solid rgba(255, 255, 255, 0);
			height: 1rem;
			width: 1rem;
		}
		75% {
			border: 2px solid rgba(255, 255, 255, .35);
			height: 6rem;
			width: 6rem;
		}
		85% {
			height: 0;
			width: 6rem;
		}
		95% {
			border: 2px solid rgba(255, 255, 255, .35);
			width: 0;
		}
		100% {
			border: 2px solid rgba(255, 255, 255, 0);
		}
	}
	.loading__message {
		animation: message 6.3s;
		opacity: 0;
		text-align: center;
	}
		@keyframes message {
			0% {
				opacity: 0;
			}
			57.1429% { /* 3.6s */
				opacity: 0;
			}
			71.4286% { /* 4.5s */
				opacity: 1;
			}
			85.7143% { /* 5.4s */
				opacity: 1;
			}
			100% { /* 6.3s */
				opacity: 0;
			}
		}