@font-face {
	   font-family: 'Komika Display';
	   src: local('Komika Display Regular'),
	        local('KomikaDisplay-Regular'),
	        url('/static/arjankodde.nl/font/Komika_display.ttf') format('truetype');
   }
   
   @font-face {
	   font-family: 'Kulminoituva';
       src: local('Kulminoituva Regular'),
	        local('Kulminoituva-Regular'),
	        url('/static/arjankodde.nl/font/kulminoituva.ttf') format('truetype');
   }
   
   @font-face {
     	font-family: 'Playtime With Hot Toddies';
     	src: local('Playtime With Hot Toddies Regular'),
	        local('PlaytimeWithHotToddies-Regular'),
	        url('/static/arjankodde.nl/font/playtime.ttf') format('truetype');
   }
   
   @font-face {
	font-family: 'Pusab';
	src: local('Pusab Regular'),
	     local('Pusab-Regular'),
	     url('/static/arjankodde.nl/font/PUSAB.otf') format('opentype');
  }
  @font-face {
	font-family: 'Helsinki';
	src: local('Helsinki Regular'),
	     local('Helsinki-Regular'),
	     url('/static/arjankodde.nl/font/helsinki.ttf') format('truetype');
  }
  
  @-moz-keyframes tremble {
     0%   { -moz-transform: rotate(10deg) scale(1.3) translate(0, 0); }
     25%  { -moz-transform: rotate(12deg) scale(1.2) translate(-20px,-20px); }
     50%  { -moz-transform: rotate(10deg) scale(1.4) translate(5px,20px); }
     75%  { -moz-transform: rotate(8deg) scale(1.2) translate(-20px, -20px); }
     100% { -moz-transform: rotate(10deg) scale(1.3) translate(0,0); }
  }

  @-webkit-keyframes tremble {
     0%   { -webkit-transform: rotate(10deg) scale(1.3) translate(0, 0); }
     25%  { -webkit-transform: rotate(12deg) scale(1.2) translate(-20px,-20px); }
     50%  { -webkit-transform: rotate(10deg) scale(1.4) translate(5px,20px); }
     75%  { -webkit-transform: rotate(8deg) scale(1.2) translate(20px, -20px); }
     100% { -webkit-transform: rotate(10deg) scale(1.3) translate(0,0); }
  }


   html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
   }
  
   body {
    font-family: Garamond, Arial, Helvetica, sans-serif;
    font-size: 1em;
   }
  
   h1 {
    margin: 100px auto 0 auto;
    font-size: 7em;
    text-align: center;
    padding: 0;

        -moz-transition: all ease-in-out 0.2s;
        -webkit-transition: all ease-in-out 0.2s;
        -o-transition: all ease-in-out 0.2s;
        -ms-transition: all ease-in-out 0.2s;
        transition: all ease-in-out 0.2s;

   }
   
   h1:hover {

	-moz-animation: tremble 1s linear infinite;
	-webkit-animation: tremble 1s linear infinite;

        -moz-transform: rotate(10deg) scale(1.3);
        -webkit-transform: rotate(10deg) scale(1.3);
	-o-transform: rotate(10deg) scale(1.3);
	-ms-transform: rotate(10deg) scale(1.3);
	transform: rotate(10 deg) scale(1.3);
	-moz-transition: all ease-in-out 0.2s;
	-webkit-transition: all ease-in-out 0.2s;
	-o-transition: all ease-in-out 0.2s;
	-ms-transition: all ease-in-out 0.2s;
	transition: all ease-in-out 0.2s;

   }
   

   a {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 4;
    padding-top: 3px;
    text-decoration: none;
    border-top: 1px dashed #000000;
    font-weight: bold;
    font-family: Helsinki;
    text-shadow: none;
   }
  
   a, a:visited, a:link, a:active, a:hover {
    color: #000000;
   }
   
   a:hover {
    border-top-width: 0;
   }

   body#blue {
    	background-color: #BCDBFF;
	background-image: url("/gradient.svg?from=BCDBFF&to=DDEAFF");
	background-image: -moz-linear-gradient(#BCDBFF, #DDEAFF);
	background-image: -webkit-gradient(linear, 50% center, center bottom, from(#BCDBFF), to(#DDEAFF));
	background-image: -webkit-linear-gradient(#BCDBFF, #DDEAFF);
	background-image: -o-linear-gradient(#BCDBFF, #DDEAFF);
	background-image: -ms-linear-gradient(#BCDBFF, #DDEAFF);
	background-image: linear-gradient(#BCDBFF, #DDEAFF);
    font-family: 'Playtime With Hot Toddies';
    color: #000000;
    text-shadow: 0px 0px 10px #FFF;
    -moz-animation: pulse-white 1s ease-in-out alternate infinite;
    -webkit-animation: pulse-white 1s ease-in-out alternate infinite;
   }
   
   body#yellow  {
    	background-color: #FCFFB2;
	background-image: url("/gradient.svg?from=FCFFB2&to=F7FFD1");
	background-image: -moz-linear-gradient(#FCFFB2, #F7FFD1);
	background-image: -webkit-gradient(linear, 50% center, center bottom, from(#FCFFB2), to(#F7FFD1));
	background-image: -webkit-linear-gradient(#FCFFB2, #F7FFD1);
	background-image: -o-linear-gradient(#FCFFB2, #F7FFD1);
	background-image: -ms-linear-gradient(#FCFFB2, #F7FFD1);
	background-image: linear-gradient(#FCFFB2, #F7FFD1);
    font-family: 'Pusab';
    color: #000000;
    text-shadow: 0px 0px 10px #FFF;
    -moz-animation: pulse-white 1s ease-in-out alternate infinite;
    -webkit-animation: pulse-white 1s ease-in-out alternate infinite;
   }
   
   body#green {
    	background-color: #007F0E;
	background-image: url("/gradient.svg?from=007F0E&to=00A70E");
	background-image: -moz-linear-gradient(#007F0E, #00A70E);
	background-image: -webkit-gradient(linear, 50% center, center bottom, from(#007F0E), to(#00A70E));
	background-image: -webkit-linear-gradient(#007F0E, #00A70E);
	background-image: -o-linear-gradient(#007F0E, #00A70E);
	background-image: -ms-linear-gradient(#007F0E, #00A70E);
	background-image: linear-gradient(#007F0E, #00A70E);
    font-family: 'Kulminoituva';
    color: #FFFFFF;
    text-shadow: 0px 0px 10px #000;
    -moz-animation: pulse-black 1s ease-in-out alternate infinite;
    -webkit-animation: pulse-black 1s ease-in-out alternate infinite;
   }
   
   body#red {
    	background-color: #FF6B49;
	background-image: url("/gradient.svg?from=FF6B49&to=FF7360");
	background-image: -moz-linear-gradient(#FF6B49, #FF7360);
	background-image: -webkit-gradient(linear, 50% center, center bottom, from(#FF6B49), to(#FF7360));
	background-image: -webkit-linear-gradient(#FF6B49, #FF7360);
	background-image: -o-linear-gradient(#FF6B49, #FF7360);
	background-image: -ms-linear-gradient(#FF6B49, #FF7360);
	background-image: linear-gradient(#FF6B49, #FF7360);
    font-family: 'Komika Display';
    color: #000000;
    text-shadow: 0px 0px 10px #FFF;
    -moz-animation: pulse-white 1s ease-in-out alternate infinite;
    -webkit-animation: pulse-white 1s ease-in-out alternate infinite;

   }