@charset "UTF-8";

div#spiral {
	z-index: 400;
	position: absolute;
	left: 800px;
	bottom: 0;
	width: 600px;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Montserrat";
	pointer-events: none;

	animation-name: spiral-appearance;
	animation-duration: 4s;
	animation-delay: 4s;
	animation-direction: alternate;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.2, 0.15, 0, 0.7);

	> div.tray {
		> div.die {
			width: 400px;
			height: 55px;
			padding-bottom: 9px;
			perspective: 999px;

			> .cube {
				position: absolute;
				width: 100%;
				height: 100%;
				transform-style: preserve-3d;

				> .face {
					position: absolute;
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					/*   letter-spacing:-1px; */
					backface-visibility: hidden;
					/*   overflow:hidden; */
				}
			}
		}
	}
}

@keyframes spiral-appearance {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}