/* ---- INDEX ---- */

div#menu {
	position: absolute;
	z-index: 5;
	background-color: white;
	border: solid 2px black;
	top: 5px;
	left: 5px;
}
div#menu a {
	display: block;
	padding: 5px;
	float: left;
	text-decoration: none;
	font-weight: bold;
	color: black;
	background-color: transparent;
}
div#menu a:hover {
	background-color: black;
	color: white;
}
a#source {
	display: block;
	position: absolute;
	z-index: 5;
	top: 5px;
	right: 5px;
	padding: 5px;
	border: solid 2px black;
	text-decoration: none;
	font-weight: bold;
	color: black;
	background-color: white;
}
a#source:hover {
	background-color: black;
	color: white;
}
html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; bottom:0; left:0; right:0 }
canvas#draw {
	position: absolute;
	top: 0;
	z-index:1;
	opacity:0.2;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}
#logo {
	position: absolute;
	z-index:9999;
	position:absolute ;
	left:50% ;
	margin-left: -150px;
	top:50% ;
	margin-top: -150px;
	width:300px;
}
#logo path, #logo circle, #logo polygon, #logo rect {
	opacity: 0.7;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}
#logo:hover path, #logo:hover circle, #logo:hover polygon, #logo:hover rect {
	opacity: 0.35;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}
#logo:hover #suicide-circle path {
	opacity: 1;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}
a:hover + canvas#draw {
	opacity:0.1;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}
@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
    -webkit-transform-origin: 50% 50%;
    -moz-transform: rotate(0deg);
    -moz-transform-origin: 50% 50%;
    -o-transform: rotate(0deg);
    -o-transform-origin: 50% 50%;
    -ms-transform: rotate(0deg);
    -ms-transform-origin: 50% 50%;
    transform: rotate(0deg);
    transform-origin: 50% 50%;
  }
  to { 
    -webkit-transform: rotate(360deg);
    -webkit-transform-origin: 50% 50%;
    -moz-transform: rotate(360deg);
    -moz-transform-origin: 50% 50%;
    -o-transform: rotate(360deg);
    -o-transform-origin: 50% 50%;
    -ms-transform: rotate(360deg);
    -ms-transform-origin: 50% 50%;
    transform: rotate(360deg);
    transform-origin: 50% 50%;
  }
}
#logo:hover #rings
{
    -webkit-animation-name:             rotate; 
    -webkit-animation-duration:         3s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name:             rotate; 
    -moz-animation-duration:         3s; 
    -moz-animation-iteration-count:  infinite;
    -moz-animation-timing-function: linear;

    -o-animation-name:             rotate; 
    -o-animation-duration:         3s; 
    -o-animation-iteration-count:  infinite;
    -o-animation-timing-function: linear;

    -ms-animation-name:             rotate; 
    -ms-animation-duration:         3s; 
    -ms-animation-iteration-count:  infinite;
    -ms-animation-timing-function: linear;

    animation-name:             rotate; 
    animation-duration:         3s; 
    animation-iteration-count:  infinite;
    animation-timing-function: linear;
    }

/* ---- CHOOSE ---- */
body#choose .button{
	background: black;
	color: white;
	font-family: 'Arapey';
	text-decoration: none;
	text-align: center;
	display:block;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	padding: 6px 10px;
	position:absolute;
	border: 2px solid white;
	left:50%;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}
body#choose .button:hover {
	background: white;
	color:black;
	border: 2px solid black;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}
body#choose #live {
	bottom:20px;
}
body#choose #die {
	top: 20px;
}
body#choose #logo:hover {
	-webkit-animation: flip 1s infinite;
	-moz-animation: flip 1s infinite;
	-o-animation: flip 1s infinite;
	animation: flip 1s infinite;
}
body#choose .text {
	color: white;
	font-family: 'Arapey';
	font-style:italic;
	letter-spacing: 0.2em;
	position: fixed;
	left: 50%;
	display:block;
	font-size: 36px;
	z-index:-1;
	text-align: center;
	width: 674px;
}
body#choose #not {
	top: 25%;
	margin-left: -337px;
}
body#choose #yet {
	bottom:25%;
	margin-left: -337px;
}
body#choose.clicked {
	-webkit-animation: flash 0.3s infinite;
	-moz-animation: flash 0.5s infinite;
	-o-animation: flash 0.5s infinite;
	animation: flash 0.5s infinite;
}
body#choose .text.clicked {
	font-size: 50px;
	text-transform: uppercase;
	margin-left:-25px;
}