@import url(https://fonts.googleapis.com/css?family=Share+Tech+Mono);
@import url(https://fonts.googleapis.com/css?family=Poiret+One);

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {opacity: 0; transform: rotate(0deg);}
    20%  {opacity: 0.8; transform: rotate(45deg);}
    40% {opacity: 0; transform: rotate(90deg);}
    60%  {opacity: 0; transform: rotate(120deg);}
    80% {opacity: 0.6; transform: rotate(90deg);}
    95% {opacity: 0; transform: rotate(60deg);}
    100%   {opacity: 0; transform: rotate(0deg);}
}

/* Standard syntax */
@keyframes example {
    0%   {opacity: 0; transform: rotate(0deg);}
    20%  {opacity: 0.8; transform: rotate(45deg);}
    40% {opacity: 0; transform: rotate(90deg);}
    60%  {opacity: 0; transform: rotate(120deg);}
    80% {opacity: 0.6; transform: rotate(90deg);}
    95% {opacity: 0; transform: rotate(60deg);}
    100%   {opacity: 0; transform: rotate(0deg);}
}
canvas {
	display: block;
    -webkit-transition: opacity 3s; /* For Safari 3.1 to 6.0 */
    transition: opacity 3s;
}
#confetti {
	opacity: 0;
}
body {
	background: url('../img/bgfinal.png');
    background-repeat: no-repeat;
    background-color: #000000;
    background-position: top;
	overflow: hidden;
}
.backgroundeffect {
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 12s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
    animation-name: example;
    animation-duration: 12s;
    animation-iteration-count: infinite;
	position:absolute;
	width: 100%;
	left:0%;
	top:-60%;
	float: center;
	z-index: -1;
	-moz-user-select: none;
	user-select: none;
}
.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
#titleholder {
	color: rgb(256,256,256);
	font-family: 'Poiret One';
	font-size: 330%;
	text-align: center;
    display: block;
	padding-bottom: 20px;
}
#titlesmall {
	color: rgb(256,256,256);
	font-family: 'Poiret One';
	font-size: 160%;
	text-align: center;
    display: block;
	padding-top: 30px;
	opacity: 0;	
	cursor: default;
}
#codebox {
	text-align: center;
    text-transform: uppercase;
	font-family: 'Share Tech Mono';
	color: rgb(256,256,256);
    display: block;
    margin-left: auto;
    margin-right: auto;
	width: 40%;
	min-width: 240px;
	max-width: 290px;
	height: 7%;
	min-height: 40px;
	max-height: 60px;
	font-size: 165%;
	background-color: rgba(50,50,50,0.45);
	border: 1px solid rgba(100,100,100,0.40);
    box-shadow: 
      inset 0 0 3px  rgba(256,256,256,0.1);
}
#codebox:focus {
	background-color: rgba(55,55,55,0.45);
	border: 1px solid rgba(110,110,110,0.40);
    box-shadow: 
      inset 0 0 5px  rgba(256,256,256,0.2),
            0 0 16px rgba(100,100,256,0.3);
}
#continuebutton {
	text-align: center;
    text-transform: uppercase;
	font-family: 'Share Tech Mono';
	color: rgb(256,256,256);
    display: block;
    margin-left: auto;
    margin-right: auto;
	padding: 5px 0px 0px 0px;
	width: 40%;
	margin-top: 30px;
	min-width: 240px;
	max-width: 290px;
	height: 7%;
	min-height: 34px;
	max-height: 54px;
	font-size: 165%;
	opacity: 0;
	background-color: rgba(0,230,230,0.25);
	border: 1px solid rgba(0,230,230,0.35);
    box-shadow: 
      inset 0 0 5px  rgba(256,256,256,0.1);
	cursor: default;
	text-decoration: none;
}
#continuebutton:hover {
	background-color: rgba(0,230,230,0.35);
	border: 1px solid rgba(0,230,230,0.20);
	transition-duration: 0.5s;
    box-shadow: 
      inset 0 0 5px  rgba(256,256,256,0.25);
	text-decoration: none;
}
#continuebutton:active {
	background-color: rgba(0,230,230,0.45);
	border: 1px solid rgba(0,230,230,0.15);
	transition-duration: 0.25s;
    box-shadow: 
      inset 0 0 5px  rgba(256,256,256,0.25),
            0 0 8px  rgba(256,256,256,0.25);
	text-decoration: none;
}
#continuebutton:visited {
	text-decoration: none;
}
body span {
	opacity: 0;
	font-size: 0px;
}
#feedback {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 100;
}