@import url('https://fonts.googleapis.com/css?family=Anton');

html, body {

	margin:0px;
	height:100%;

}

body {

	background-color:#FEC606;
	font-family:"Anton", sans-serif;

	background-image:url(../img/bg.png);
	animation-name:bgMove;
	animation-duration:5s;
	animation-iteration-count: infinite;
	animation-timing-function:linear;

}

@keyframes bgMove {

	0% {background-position:0px 0px;}
	100% {background-position:250px 250px;}

}

.view-intro {
    
    color:#FFF;
    background-color:#000;
    z-index:1000;
    
}

.va {

	display:table;
	width:100%;
	height:100%;

}

.va-int {

	display:table-cell;
	vertical-align:middle;
	text-align:center;

}

.view {

	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
    
    padding:24px;
    box-sizing:border-box;

}

.view h2 {
    
    font-size:40px;
    text-shadow:0px 5px rgba(0,0,0,0.3);
    
	animation-name:zoomIn;
	animation-duration:.25s;
	animation-fill-mode:forwards;
	animation-timing-function: ease-out;
    
}

.title {

	font-size:65px;
	text-shadow:0px 5px rgba(0,0,0,0.3);

	opacity:0;
	animation-name:zoomIn;
	animation-duration:.25s;
	animation-delay:1.5s;
	animation-fill-mode:forwards;
	animation-timing-function: ease-out;

}

.exclamation {

	width: 256px; height: 256px; background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUwNS41MyA1MDUuNTMiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUwNS41MyA1MDUuNTM7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMjU2cHgiIGhlaWdodD0iMjU2cHgiPgo8Zz4KCTxnPgoJCTxnPgoJCQk8Zz4KCQkJCTxwYXRoIGQ9Ik01MDEuNzk5LDQ0NC4zODJMMjgxLjI5MiwzMS4yMWMtNS40OTgtMTAuMzI5LTE2LjI3My0xNi44MTMtMjgtMTYuODEzaC0wLjAzMiAgICAgIGMtMTEuNzI4LDAtMjIuNDcsNi40NTItMjgsMTYuNzgxTDMuNzY3LDQ0NC4zNWMtNS4yNzYsOS45NDgtNC45OSwyMS44MzUsMC43MzEsMzEuMzM4YzUuNzUzLDkuNTY3LDE2LjExNCwxNS40NDYsMjcuMjY5LDE1LjQ0NiAgICAgIGg0NDEuOTY3YzExLjE4NywwLDIxLjQ4NS01Ljg0OCwyNy4yMzgtMTUuNDQ2QzUwNi43ODgsNDY2LjEyMSw1MDcuMDExLDQ1NC4yMzQsNTAxLjc5OSw0NDQuMzgyeiBNMzEuNzY3LDQ1OS4zNTFMMjUzLjI2LDQ2LjE3OSAgICAgIGwyMjAuNTA3LDQxMy4xNzJIMzEuNzY3eiIgZmlsbD0iIzAwMDAwMCIvPgoJCQkJPHBhdGggZD0iTTIyMS40NzcsMjA1LjZ2OTUuMzQ3YzAsMTcuNTc2LDE0LjIzOSwzMS43ODMsMzEuNzgyLDMxLjc4MyAgICAgIGMxNy41MTIsMCwzMS43ODItMTQuMjA3LDMxLjc4Mi0zMS43ODNWMjA1LjZjMC0xNy41NDQtMTQuMjctMzEuNzgyLTMxLjc4Mi0zMS43ODJTMjIxLjQ3NywxODguMDI0LDIyMS40NzcsMjA1LjZ6IiBmaWxsPSIjMDAwMDAwIi8+CgkJCQk8Y2lyY2xlIGN4PSIyNTMuMjYiIGN5PSIzOTUuNzg2IiByPSIzMS43ODIiIGZpbGw9IiMwMDAwMDAiLz4KCQkJPC9nPgoJCTwvZz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
	display:block;
	margin:0px auto;

	opacity:0;
	animation-name:zoomIn;
	animation-duration:.25s;
	animation-delay:1s;
	animation-fill-mode:forwards;
	animation-timing-function: ease-out;

}

.join-the-game {

	padding-top:32px;
	opacity:0;
	animation-name:zoomIn;
	animation-duration:.25s;
	animation-delay:2s;
	animation-fill-mode:forwards;
	animation-timing-function: ease-out;

}

.join-the-game h1,h3 {

	margin:0px;
	font-size:50px;
	text-shadow:0px 5px rgba(0,0,0,0.3);
	letter-spacing:1.5px;

}

.join-the-game h3 {

	font-size:28px;

}

.animate-in {

    opacity:0;
	animation-name:zoomIn;
	animation-duration:.25s;
	animation-fill-mode:forwards;
	animation-timing-function: ease-out;

}

@keyframes zoomIn {

	0% {transform:scale(3); opacity:0;}
	100% {transform:scale(1); opacity:1;}

}

.view-players {

	top:0;
	right:0;
	left:inherit;
	width:50%;
	transform:translateX(100%);
	transition:.5s;
	background-color:rgba(0,0,0,0.7);
	transition-delay:.5s;
	color:#FFF;
	font-size:30px;

}

.textbox {
    
    padding:12px 16px;
    background-color:#FFF;
    box-sizing:border-box;
    border:3px SOLID #111;
    border-radius:6px;
    font-family:"Anton", sans-serif;
    font-size:20px;
    width:100%;
    outline:0;
    
}

.button {
    
    padding:12px 16px;
    background-color:#111;
    margin-top:16px;
    color:#FFF;
    box-sizing:border-box;
    border-radius:6px;
    font-family:"Anton", sans-serif;
    font-size:18px;
    width:100%;
    -webkit-appearance: none;
    border:0px;
    
}

.cube-container {

	transform-style:preserve-3d;
	position:relative;
	width:40px;
	height:40px;
	margin:0px auto;

	transform:rotateX(-30deg) rotateY(45deg) rotateZ(0deg) translateY(-20px);

	animation-name:rotation;
	animation-duration:1s;
    animation-delay:1s;
	animation-fill-mode:forwards;

}

@keyframes rotation {

	0% { transform:rotateX(-30deg) rotateY(-405deg) rotateZ(0deg) translateY(-20px);}
	70% { transform:rotateX(-30deg) rotateY(-135deg) rotateZ(0deg) translateY(-20px); }
	100% { transform:rotateX(-30deg) rotateY(-135deg) rotateZ(0deg) translateY(0px); }

}

.face {

	backface-visibility:visible;
	width:40px;
	height:40px;
	background-color:#FFF;
	position:absolute;
	background-size:cover;
	opacity:1;

}

.face-1 {

	transform:translateY(20px) rotateX(-90deg);

}

.face-2 {

	background-color:rgba(0,0,0,0);
	transform:translateY(-20px) rotateX(90deg);

}

.face-2-top {

	background-color:#CCC;
	transform:translateY(-20px) rotateX(90deg);

	animation-name:faceTwoRise;
	animation-duration:.5s;
	animation-delay:1.75s;

	animation-fill-mode: forwards;

}

@keyframes faceTwoRise {

	0% {transform:translateY(-20px) rotateX(90deg); background-color:#CCC;}
	100% {transform:translateY(-40px) rotateX(0deg) translateZ(20px); background-color:#DDD;}

}

.face-3 {

	background-color:#EEE;
	transform:translateX(20px) rotateY(90deg);

}

.face-4 {

	background-color:#BBB;
	transform:translateX(-20px) rotateY(-90deg);

}

.face-5 {

	background-color:#DDD;
	transform:translateZ(20px) rotateZ(-90deg);

}

.face-6 {

	background-color:#AAA;
	transform:translateZ(-20px) rotateY(180deg);

}

.view-intro span {
    
    animation-name:introName;
    animation-duration:.5s;
    animation-delay:1.75s;
    font-size:20px;
    letter-spacing:1px;
    padding-top:40px;
    display:block;
    opacity:0;
    animation-fill-mode:forwards;
    
}

@keyframes introName {
    
    0% {transform:translateY(50px); opacity:0;}
    100% {transform:translateY(0px); opacity:1;}
    
}