* {
	box-sizing: border-box;
	position: relative;
	margin:  0px;
	padding: 0px;
	-webkit-user-select: none;
	user-select: none;
	/*transform-style: preserve-3d;*/
}

body, html, #container {
	padding: 0px;
	margin: 0px;
	height: 100vh;
	width: 100%;
	overflow: hidden;
}

body {
	background-color: #333;
}

#container {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}

#grid {
	width: 90vw;
	/*border: .3vw solid #d91c1c;
	border-radius: .4vw;
	background-color: #d91c1c;
	box-shadow: 0px 0px 1vw black;*/
	perspective-origin: center;
	perspective: 200px;
	text-align: center;
	filter: drop-shadow(0px 0px 1vw black);
	margin-top: 5vh;
}

.block {
	width: calc(100%/15);
	display: inline-block;
	text-align: center;
	border: .6vw solid #d91c1c;
	border-radius: .3vw;
	height: 8vw;
	margin: -.3vw;
}

.gap {
	width: 100%;
	height: 100%;
	background-color: #111;
	padding: .2vw;
	overflow: hidden;
	box-shadow: -.03vw -.03vw .1vw .05vw rgba(0,0,0,.5), .03vw .03vw .1vw .05vw rgba(255,255,255,.5);
	z-index: 100;
}

.rotator {
	height: 100%;
	background-color: black;
}

.side {
	display: block;
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	transform-origin: 50% 50% calc(4.45vw*0.288675);
	backface-visibility: hidden;
	transform-style: preserve-3d;
	pointer-events: none;
	box-shadow: 0px 0px 1vw black inset;

	transition: background-color .1s, transform 1s cubic-bezier(0.510, 1.530, 0.670, 0.895);
}

.blue {
	background-color: #1515ee;
	transform: rotateY(0deg);
	transition-delay: inherit;
}

.grey {
	background-color: gray;
	transform: rotateY(-120deg);
	transition-delay: inherit;
}

.white {
	background-color: white;
	transform: rotateY(120deg);
	transition-delay: inherit;
}


.letter {
	font-size: 1vw;
	text-transform: uppercase;
	font-family: Arial;
	font-size: 4.5vw;
	font-weight: bold;
	top: .8vw;
	opacity: .9;
	color: #000;
	text-shadow: 0px 0px 1vw rgba(0,0,0,.25);
}


.rotator[data-status="2"] .blue, .rotator[data-status="3"] .blue {
	transform: rotateY(120deg);
}

.rotator[data-status="2"] .grey, .rotator[data-status="3"] .grey {
	transform: rotateY(0deg);
}

.rotato[data-status="2"] .white, .rotator[data-status="3"] .white {
	transform: rotateY(240deg);
}


.rotator[data-status="3"] .grey, .rotator[data-status="4"] .grey {
	background-color: white;
}


.rotator[data-status="4"] .blue, .rotator.open .blue {
	transform: rotateY(240deg);
}

.rotator[data-status="4"] .grey, .rotator.open .grey {
	transform: rotateY(120deg);
}

.rotator[data-status="4"] .white, .rotator.open .white {
	transform: rotateY(360deg);
}

#buttons {
	position: absolute;
	top: 0px;
	left: 0px;
	display: none;
}

.button {
	margin: 10px;
	padding: 10px;
	background-color: white;
	cursor: pointer;
}

#scores {
	display: flex;
	width: 95vw;
	/*justify-content: space-around;*/
	justify-content: center;
	height: 10vw;
	text-align: center;
}

@font-face {
	font-family: technology;
	src: url(/assets/Technology.ttf);
}

@font-face {
	font-family: digital-dismay;
	src: url('/assets/Digital Dismay.otf');
}

@font-face {
	font-family: alarm-clock;
	src: url('/assets/alarm clock.ttf');
}

.player {
	width: 14vw;
	transform: translateY(0);
	margin-right: .5vw;
	margin-left: .5vw;
	/*transition: .2s ease-in-out;*/
}

.player.active {
	/*transform: translateY(-2rem);*/
}

.player-name {
	overflow: hidden;
	font-family: Arial;
	font-weight: bold;
	font-size: 2vw;
	color: white;
	text-transform: uppercase;
	color: #cccccc;
}

.active .player-name {
	color: #ffffff;
}

.player-score {
	font-family: digital-dismay, monospace;
	font-size: 5vw;
	background-color: #111;
	color: #cece68;
	padding: 1vw;
	margin: 0 auto;
	line-height: .6;
	width: 13vw;
	text-align: right;
	overflow: hidden;
}

.active .player-score {
	box-shadow: 0px 0px 1rem rgba(255,255,255,.5);
}

#confetti-canvas {
	width: 100vw !important;
	height: 100vh !important;
	position: fixed;
	top: 0px;
	left: 0px;
}

#info {
	position: fixed;
	top:  0;
	left: 0;
	opacity: 0;
	font-family: monospace;
	font-size: 5rem;
	padding: 2rem;
	color: white;
	transition: opacity .25s ease-in-out;
}

#info.show {
	opacity: 1;
}

#category p {
	margin-top: 3rem;
	text-align: center;
}

#category p span {
	font-size: 5rem;
	font-family: serif;
	font-weight: bold;
	color: #000964;
	text-transform: uppercase;
	padding: .4rem 6rem;
	background: rgb(62,137,218);
	background: linear-gradient(105deg, rgba(62,137,218,1) 55%, rgba(179,227,239,1) 65%, rgba(62,137,218,1) 75%);
	border: .5rem solid red;
	border-color: #c6d7eb #183097 #183097 #c6d7eb;
	transition: opacity .5s ease-in-out;
}