html{
	background: black;
}
.main{
	color: #eee;
	margin: auto;
	margin-top:20vh;
	width: 50%;
	padding: 10px;
}
.cb:checked + .cc {
	margin-top:-40vh;
	margin-bottom:90%;
}
.glass{
	display: inline-block;
	margin-right:5vw;
	width:10vw;
	height:20vh;
}
.cb{
	position:relative;
	opacity: 0;
	width:100%;
	height:100%;
	z-index:3;
}
h1,h2{
	font-size: 1vrem;
}
h1{
	color: white;
	width:100%;
	text-align:center;
}
.cc{
	transition: 0.5s;
	position:relative;
	z-index:2;
	margin-bottom:-90%;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin-top:-20vh;
	width:100%;
	margin-right:4vw;
	height:100%;
	-webkit-border-top-left-radius: 25%;
	-webkit-border-top-right-radius: 25%;
	-moz-border-radius-topleft: 25%;
	-moz-border-radius-topright: 25%;
	border-top-left-radius: 25%;
	border-top-right-radius: 25%;
	background: rgb(195,34,34);
	background: linear-gradient(0deg, rgba(195,34,34,1) 0%, rgba(253,45,45,1) 100%);
}
.ball{
	position: relative;
	z-index:1;
	width:10vw;
	position:fixed;
	text-align:center;
}
#g1{
	animation-name: glass1;
	animation-duration: 4s;
}
#g2{
	animation-name: glass2;
	animation-duration: 4s;
}
#g3{
	animation-name: glass3;
	animation-duration: 4s;
}
#rg{
	animation-name: shuff;
	animation-duration: 1s;
}
@keyframes shuff {
  from {transform: translate(0px, 40vh);}
  to { transform: translate(0px, 0px);}
}
@keyframes glass1 {
  10% {transform: translate(0vw, 0px);}
  20% { transform: translate(15vw, 0px);}
  30% {transform: translate(30vw, 0px);}
  40% { transform: translate(0vw, 0px);}
  50% {transform: translate(30vw, 0px);}
  60% { transform: translate(15vw, 0px);}
  70% {transform: translate(15vw, 0px);}
  80% { transform: translate(30vw, 0px);}
  90% {transform: translate(15vw, 0px);}
  100% { transform: translate(0vw, 0px);}
}
@keyframes glass2 {
  10% {transform: translate(0vw, 0px);}
  20% { transform: translate(15vw, 0px);}
  30% {transform: translate(-15vw, 0px);}
  40% { transform: translate(0vw, 0px);}
  50% {transform: translate(-15vw, 0px);}
  60% { transform: translate(-15vw, 0px);}
  70% {transform: translate(0vw, 0px);}
  80% { transform: translate(-15vw, 0px);}
  90% {transform: translate(15vw, 0px);}
  100% { transform: translate(0vw, 0px);}
}
@keyframes glass3 {
  10% {transform: translate(0vw, 0px);}
  20% { transform: translate(-30vw, 0px);}
  30% {transform: translate(-15vw, 0px);}
  40% { transform: translate(0vw, 0px);}
  50% {transform: translate(0vw, 0px);}
  60% { transform: translate(0vw, 0px);}
  70% {transform: translate(-30vw, 0px);}
  80% { transform: translate(-30vw, 0px);}
  90% {transform: translate(-30vw, 0px);}
  100% { transform: translate(0vw, 0px);}
}
td,tr,th,table{
	color: white;
}
td,th{
	width:30px;
	height:30px;
}