@font-face {
	font-family: 'Commodore64Regular';
	src: url('/fonts/commodore-64-webfont.eot');
	src: local('☺'), url('/fonts/commodore-64-webfont.eot?#iefix')
		format('embedded-opentype'), url('/fonts/commodore-64-webfont.woff')
		format('woff'), url('/fonts/commodore-64-webfont.ttf') format('truetype'),
		url('/fonts/commodore-64-webfont.svg#Commodore64Regular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: "Comic Sans";
    src: url("/fonts/comic_sans.eot?raw=true");
    src: url("/fonts/comic_sans.woff?raw=true") format("woff");
    font-weight: normal;
    font-style: normal;
}

* {
	margin: auto;
	padding: 0px;
}

html,body.c64{
	font-size: 13pt;
	font-family: 'Commodore64Regular';
	color: #cddefa;
	cursor: url(/img/cursor.png),url(/img/cursor.cur),auto;
   	-webkit-animation: background-gradient-change linear 6s infinite alternate;
}

@-webkit-keyframes background-gradient-change {
      0%   {background: #dff;}
      33%  {background: #fdf;}
      66%  {background: #ffd;}
      100% {background: #dff;}
}

@-webkit-keyframes color-gradient-change {
            0%   {color: cyan;}
            25%  {color: magenta;}
            50%  {color: yellow;}
            100% {color: white;}
}

@-webkit-keyframes rotate-jo {
      0%   { -webkit-transform: rotate(0deg);}
      25%  { -webkit-transform: rotate(90deg);}
      50%  { -webkit-transform: rotate(180deg);}
      75%  { -webkit-transform: rotate(270deg);}
     100%  { -webkit-transform: rotate(360deg);}
}


@-webkit-keyframes flash {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

@keyframes flash {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}



::selection {
	background: #ffb7b7; /* Safari */
}
::-moz-selection {
	background: #ffb7b7; /* Firefox */
}
.arrrr{
	font-family: 'Comic Sans', 'Comic Sans', Chalkboard, Helvetica, Arial, sans-serif;
	font-size: 40px;
	font-weight: bold;
	-webkit-transform: rotate(30deg);
	position: absolute;
	right: -60px;
	top: -40px;
	display: none;
	-webkit-animation: color-gradient-change linear 0.1s infinite;
}


#main{
   position: relative;
   top: 100px;
   z-index: 101;
}

#outer{
   background: #9f9fff;
   width: 640px;
   height: 320px;
   padding: 60px 30px 70px 30px;
}

#inner{
   background: #3f3fdf;
   height: 100%;
   position: relative;
   margin: 0 20px 0px 20px;
   -webkit-filter: blur(1px);
   filter: blur(1px);
}

#♥{
   line-height: 24pt;
}

#cli{
   text-align: left;
   padding:2px;
}

#prompt{
   -webkit-animation: flash 1s infinite;
   animation: flash 1s infinite;
}

#logo {
  left:0px;
  position:absolute;
  top:0px;
}

#logo > canvas {
position:fixed; 
top:0;
left:0;
width:100%;
height:100%;
}


#main:hover { 
   animation-name:rotate-jo; 
   animation-duration:500ms; 
   animation-iteration-count:1; 
   animation-timing-function: ease-out;
}

canvas {
   width:100vw;
   height:100vh;
   position:absolute;
   z-index:1000;
   top:0px;
   left:0px;
}