@font-face{
	font-family: visitor;
	src: url('visitor.woff');
}

@keyframes rainbow {
	0%		{background: #f00; box-shadow:#900 4px 4px 0px;}
	20%		{background: #ff0; box-shadow:#990 4px 4px 0px;}
	40%		{background: #0f0; box-shadow:#090 4px 4px 0px;}
	60%		{background: #0ff; box-shadow:#099 4px 4px 0px;}
	80%		{background: #00f; box-shadow:#009 4px 4px 0px;}
	100%	{background: #f00; box-shadow:#900 4px 4px 0px;}
}

@-webkit-keyframes rainbow {
	0%		{background: #f00; box-shadow:#900 4px 4px 0px;}
	20%		{background: #ff0; box-shadow:#990 4px 4px 0px;}
	40%		{background: #0f0; box-shadow:#090 4px 4px 0px;}
	60%		{background: #0ff; box-shadow:#099 4px 4px 0px;}
	80%		{background: #00f; box-shadow:#009 4px 4px 0px;}
	100%	{background: #f00; box-shadow:#900 4px 4px 0px;}
}

.rainbowz {
	animation: rainbow 1s linear 0s infinite normal;
	-webkit-animation: rainbow 1s linear 0s infinite normal;
}

#logo svg {
	height:100vh;
	width:100vw;
}

#blocks {
	max-width:1024px;
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
}

.mainBlocks {
	position:relative;
	display:inline-block;
	width:144px;
	padding:16px;
	font-family:visitor;
	font-size:20px;
	margin:8px;
	overflow:hidden;
}

.mainBlocks img {
	margin-left:0;
}

	.mainBlocksText {
		margin-top:0px;
	}

.subheader {
	background-color:#ffffff;
	box-shadow:#cccccc 4px 4px 0px;
	font-family:visitor;
	font-size:32px;
	color:#000000;
	text-shadow:#999 1px 1px 2px;
	padding:4px;
	width:100%;
	margin-bottom:16px;
}

#logo {
	position:relative;
	left:2px;
}

#stanley {
	background-image:url('images/experiments/theendisneverhalpha.png');
	
}

/* ELECTRONIC SUPER JOY */

@keyframes spin {
	0%   {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

@-webkit-keyframes spin {
	0%   {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}

@keyframes pulse {
	0%   {transform: scale(.8,.8);}
	100% {transform: scale(1.2,1.2);}
}

@-webkit-keyframes pulse {
	0%   {-webkit-transform: scale(.8,.8) rotate(0deg);}
	100% {-webkit-transform: scale(1.2,1.2) rotate(-20deg); }
}

#pulsarin {
	margin-top:32px;
	width:128px;
	animation: pulse 10s ease 0s infinite alternate;
	-webkit-animation: pulse 10s ease 0s infinite alternate;
}

.starImg {
	width:40%;
	position:absolute; 
}

#spinHolder {
	position:absolute;
	bottom:0px;
	left:50%;
	animation: spin 10s linear 0s infinite normal;
	-webkit-animation: spin 10s linear 0s infinite normal;
}

#spinHolder2 {
	position:absolute;
	bottom:0px;
	left:50%;
	animation:spin 25s linear 0s infinite normal;
	-webkit-animation:spin 25s linear 0s infinite normal;
}

#octaSpike {
	margin-left:-32px;
	width: 64px;
	height: 64px;
	background: rgba(255,255,255,.5);
	position: absolute;
	bottom:-32px;
	left:50%;
}

#octaSpike:before {
	content: "";
	position: absolute;
	bottom:0px;
	left:calc(50% - 32px);
	width: 64px;
	height: 64px;
	background: rgba(255,255,255,.5);
	-webkit-transform: rotate(45deg);
	-moz-transform:    rotate(45deg);
	-ms-transform:     rotate(45deg);
	-o-transform:      rotate(45deg);
}

.spinLong {
	border-bottom: 300px solid rgba(255,255,255,.5);;
	/*border-left: 0px solid transparent;*/
	border-right: 60px solid transparent;
	position: absolute;
	height: 0;
	width: 0;
	left: 0px;
	display: block;
	content: '';
	-webkit-transform-origin: 0% 0%;
	-moz-transform-origin:    0% 0%;
	-ms-transform-origin:     0% 0%;
	-o-transform-origin:      0% 0%;
}

#thesea {
	background-image:url("experiments/crossing_the_ocean/ocean.gif");
	position:absolute;
	bottom:0px;
	left:0px;
	height:64px;
	width:100%
}

#boat {
	position:absolute;
	z-index:2;
}

.sq {
	width:5px;
	height:50px;
	position:absolute;
	bottom:0px;
	background-color:#000;
	z-index:0;
}

.smallgrumpheads {
	width:64px;
	animation:spin 15s linear 0s infinite normal;
	position:absolute;
	z-index:0;
	transform:translate(24px,0px);
}

canvas {
	position:absolute;
	left:0px;
	top:0px;
	z-index:0;
}

#drawarea {
	background: red; /* not working, let's see some red */
    background: -moz-linear-gradient( top ,
        rgba(255, 0, 0, 1) 0%,
        rgba(255, 255, 0, 1) 15%,
        rgba(0, 255, 0, 1) 30%,
        rgba(0, 255, 255, 1) 50%,
        rgba(0, 0, 255, 1) 65%,
        rgba(255, 0, 255, 1) 80%,
        rgba(255, 0, 0, 1) 100%);
    background: -webkit-gradient(linear,  left top,  left bottom, 
        color-stop(0%, rgba(255, 0, 0, 1)), 
        color-stop(15%, rgba(255, 255, 0, 1)),
        color-stop(30%, rgba(0, 255, 0, 1)),
        color-stop(50%, rgba(0, 255, 255, 1)),
        color-stop(65%, rgba(0, 0, 255, 1)),
        color-stop(80%, rgba(255, 0, 255, 1)),
        color-stop(100%, rgba(255, 0, 0, 1)));
}

#approved {
	position:absolute;
	z-index:100000;
	width:100%;
	color:#000000;
	text-shadow:#ffffff 0px 0px 30px;
	font-size:200px;
	
}

@-webkit-keyframes wub {
	0% {-webkit-transform:scale(1,1);}
	95% {-webkit-transform:scale(1.04,1.04);}
	100% {-webkit-transform:scale(1,1);}
}

@keyframes wub {
	0% {transform:scale(1,1);}
	95% {transform:scale(1.04,1.04);}
	100% {transform:scale(1,1);}
}

#wub:hover {
	-webkit-animation: wub .424s linear 0s infinite normal;
	animation: wub .424s linear 0s infinite normal;
}

#spaceblock {
	transition:all 1s;
}
#spaceblock:hover {
	box-shadow:#fff 0px 0px 30px;
}

@-webkit-keyframes pineapplemove {
	0% {left:-60px;}
	100% {left:200px;}
}

.pineapple {
	position:absolute;
	animation:pineapplemove 2s linear 0s infinite normal;
	width:auto;
	height:120px;
}

.pineapple:nth-child(2) {
	animation:pineapplemove 2s linear 1s infinite normal;
	left:-60px;
}

@keyframes flip {
	0% {transform:scale(1,1); margin-left:-56px;}
	50% {transform:scale(-1,1); margin-left:-88px;}
	100% {transform:scale(1,1); margin-left:-56px;}
}

#gabe {
	animation:flip .692s step-start 0s infinite normal;
}