/*basic reset */

*{

	margin: 0;

	padding: 0;

	box-sizing: border-box;

}



/* Page settings */

html {

	width: 100%;

	height: 100%;

	background: radial-gradient(circle, #fff 0%, #aaa 100%) no-repeat;

	font-family: courier, arial, serif;

}

body {

	text-align: center;

	display: table;

	background: black;

	width: 100%;

	height: 100%;

}



#logo {

	margin: 0;

	padding: 0;

	text-indent: -99999px;

	z-index: 5;

	position: fixed;

	top:20px;

	left: 20px;

	background: url(../images/eye_logo_mini.png) no-repeat;

	width: 287px;

	height: 180px;

}



a { font-size: 200%; color: red; }



img  {

	max-width: 100%; /* images fluides */

	height: auto;

}



#room {

	z-index: 1;

	position: absolute;

	top:0; 

	left: 0;

}



#hacker {

	z-index: 3;

	position: absolute;

	max-width: 1920px;

	width: 100%;

	height: auto;

	top: 0;

	left: 0;

}



#hacker img {

	position: relative;

	bottom: 0;

	left: 0;

}



canvas {display:block; z-index: 2; }



#bg-titre {

	position: absolute;

	width: 30vw;

	height: 150px;

	top: 45%;

	left: 45%;

	transform: translate(-50%, -50%);

	background-color: rgba(0,0,0,0.8);

	-webkit-filter: blur(10px);

	-moz-filter: blur(10px);

	-o-filter: blur(10px);

	-ms-filter: blur(10px);

	filter: blur(10px);

}



#author {

	color : red;

	font-size: 5vw;

	z-index : 2;

	position: absolute;

	top: 45%;

	left: 45%;

	transform: translate(-50%, -50%);

}



span {

	font-family: monospace;

	font-size: 2.5em;

}

span:after {

	content:"_CTRL";

	opacity: 0;

	animation: cursor 1s infinite;

}

@keyframes cursor {

	0% {

		opacity: 0;

	}

	40% {

		opacity: 0;

	}

	50% {

		opacity: 1;

	}

	90% {

		opacity: 1;

	}

	100% {

		opacity: 0;

	}

}



#btn button{

	color : #000;

	font-size: 1.5vw;

	z-index : 5;

	position: absolute;

	top: 63%;

	left: 45%;

	transform: translate(-50%, -50%);

	padding: 5px 10px;

}



#btn button:hover{

	opacity: 0.5;

}



/*** UNITY ***/

#jeu {

	

	max-width: 1920px;

	width: 100%;

	height: 200px;

	margin-top: 100px;

	position: relative;

	z-index: 3;

}



#jeu p {

	color: #fff;

	width: 40%;

	margin-top: 20px; 

	margin-left: 50%;

	transform: translatex(-50%);

}



#info {

	position: relative;

	height: 250px;

}



#info section {

	width: 50%;

}



#info p {

	color: #fff;

	margin-top: 10px;

	text-align: left;

}





#info h2 {

	color: #fff;

	text-align: left;

}



#info img {

	align-self: center;

}