html, body{
	margin: 0;
	padding: 0;
	font-family: Helvetica;
	font-weight: bold;
	background: url("/images/jeux/speed-clicker/files/background.jpg") no-repeat center center fixed;
	background-size: cover;
	color: black;
}

#error{
	display: none;
	width: 100vw;
	height: 100vh;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 35px;
}

img{
	display: inline-block;
	
	height: 50px;
}

.home{
	z-index: 5;
}

nav {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;

	width: 80%;
	padding: 15px 10% 0;

	display: flex;
	justify-content: space-between;
	align-items: center;
}

#last{
	display: inline;
	
	font-size: 20px;
}

#display{
	display: inline;
	
	font-size: 20px;
}

#points{
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 50px;
	border: solid black 0.5px;
	border-radius: 10px;
	top: 30%;
	left: 67.5%;
	width: 10%;
	height: 20%;
}

#add{
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	border: solid black 0.5px;
	top: 53vh;
	left: 70%;
	width: 10vh;
	height: 5vh;
}

#bip{
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	border: solid black 0.5px;
	border-radius: 100%;
	top: 35vh;
	left: 58%;
	width: 10vh;
	height: 10vh;
}

.fa-hourglass{
	position: absolute;
	top: 32vh;
	left: 59.5%;
}

.fa-hourglass:before{
	font-size: 40px;
}

#info{
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	border: solid black 0.5px;
	border-radius: 10px;
	top: 30vh;
	left: 80%;
	width: 10vh;
	height: 20vh;
}

.info{
	height: 33.33%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.info:nth-child(1){
	background-color: #ee2f60;
	border-radius: 10px 10px 0 0;
}

.info:nth-child(2){
	background-color: #13e721;
}

.info:nth-child(3){
	background-color: #fefc07;
	border-radius: 0 0 10px 10px;
}

#container {
	position: absolute;
	top: 10%;
	left: 10%;
	width: 80vh;
	height: 80vh;
	border: solid black 3px;
	border-radius: 10px;
	background: url("/images/jeux/speed-clicker/files/container.jpg") no-repeat center center;
	background-size: cover;
}

footer {
	width: 100vw;
	height: auto;
}

#start{
	position: absolute;
	background: none;
	border: none;
	font-size: 20px;
	color: #13e721;
	text-decoration: none;
	font-weight: bold;
	text-shadow: 0px 4px 2px rgba(0, 0, 0, 0.32), 0px 1px 0px #13e721, 0px 2px 0px #10c11c, 0px 3px 0px #0c9715;
	top: 50vh;
	left: 58%;
	width: 10vh;
}

#start:active {
	box-shadow: none;
}

#stop{
	position: absolute;
	background: none;
	border: none;
	font-size: 20px;
	color: #ee2f60;
	text-decoration: none;
	font-weight: bold;
	text-shadow: 0px 4px 2px rgba(0, 0, 0, 0.32), 0px 1px 0px #ee2f60, 0px 2px 0px #d91245, 0px 3px 0px #aa0e36;
	top: 55vh;
	left: 58%;
	width: 9vh;
}

#current{
	position: absolute;
	background: none;
	border: none;
	font-size: 20px;
	color: #939393;
	text-decoration: none;
	font-weight: bold;
	text-shadow: 0px 4px 2px rgba(0, 0, 0, 0.32), 0px 1px 0px #939393, 0px 2px 0px #7d7d7d, 0px 3px 0px #636363;
	top: 50vh;
	left: 58%;
	width: 10vh;
}

#menu{
	position: absolute;
	top: 35vh;
	left: 35vw;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	width: 30vw;
	height: 30vh;
	background-color: #293253;
	border: solid white 2px;
	color: white;
	border-radius: 10px;
}

#menu button{
	background: none;
	border: none;
	font-size: 14px;
	color: #e1e0f5;
	text-shadow: 0px 4px 2px rgba(0, 0, 0, 0.32), 0px 1px 0px #e1e0f5, 0px 2px 0px #b7b6e8, 0px 3px 0px #a09ee0;
	text-decoration: none;
	font-weight: bold;
}

#temps{
	display: flex;
	justify-content: space-around;
	width: 80%;
	height: auto;
}

#vitesse{
	display: flex;
	justify-content: space-around;
	width: 80%;
	height: auto;
}

.fa-check:before{
	position: absolute;
	top: 0;
	right: 10px;
	color: #13e721;
	text-shadow: 0px 0px 5px #13e721;
}

#zero{
	font-size: 20px;
	color: red;
	background: none;
	border: none;
	text-decoration: none;
	font-weight: bold;
	text-shadow: 0px 4px 2px rgba(0, 0, 0, 0.32), 0px 1px 0px #fc0000, 0px 2px 0px #a30000, 0px 3px 0px #7a0000;
}

.fa-cog{
	position: absolute;
	top: 0;
	right: 10px;
	color: lightgrey;
	text-shadow: 0px 0px 10px black;
}

@media all and (max-width: 830px){
	#display, #last{
		font-size: 15px;
		margin: 0 5% 0 0;
	}

	img{
		height: 25px;
		margin: 1vh 5% 0 5%;
	}

	.fa-check:before, .fa-cog:before{
		font-size: 30px;
	}

	#points{
		right: 30%;
	}

	#add{
		right: 35%;
	}

	#bip{
		right: 60%;
	}

	.fa-hourglass{
		position: absolute;
		top: 32%;
		left: 59.7%;
	}

	.fa-hourglass:before{
		font-size: 20px;
	}

	#start, #current{
		right: 55vh;
		top: 55vh;
		font-size: 16px;
		width: 20vh;
	}

	#stop{
		right: 55vh;
		top: 65vh;
		font-size: 16px;
		width: 20vh;
	}

	#info{
		right: 15vh;
		font-size: 20px;
	}

	#menu{
		top: 20vh;
		left: 20vw;
		width: 50vw;
		height: 50vh;
	}

	#zero{
		font-size: 16px;
		width: 20vh;
	}
}

@media all and (max-width: 420px){
	#all{
		display: none;
	}
	#error{
		display: flex;
	}
}