@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;500&display=swap');

body {
	background: black;
	font-family: 'Inconsolata', monospace;
}

h1 {
	color: white;
	font-size: 22px;
}

p {
	color: white;
	font-size: 18px;
}

section {
	display: flex;
	align-items: center;
	padding-bottom: 100px;
}

canvas {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;		
}

.wrapper {
	border: 5px solid black;
	top: 50%;
	left: 50%;
	position: absolute;
	width: 1000px;
	height: 500px;
	transform: translate(-50%, -50%);
	background: url('../images/background.png')	
}

.wrapper0 {
	border: 5px solid black;
	top: 30%;
	left: 50%;
	position: absolute;
	width: 1000px;
	height: 500px;
	transform: translate(-50%, -50%);	
}

.logo {
	padding-top: 50px;
}

.game-intro {
	flex: 50%;
	padding-right: 80px;
}

.how-to-play {
	flex: 50%;
	display: flex;
	align-items: center;
	flex-direction: column;	
}

.how-to-play > img {
	padding-top: 30px;
	padding-bottom: 30px;
}

.button {
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 25px;
	padding-right: 25px;
	transition-duration: 0.4s;
	text-decoration: none;
	border: 2px solid #0bf631;
	border-radius: 12px;
	font-size: 22px;
	color: #0bf631;
}
  
.button:hover {
	border-color: #4fb8fe;
	color: #4fb8fe;
}

.button.two {
	position:absolute;
  	bottom:-60px;
 	right:0;
  	display: block;
}

.button.hints {
	position:absolute;
  	bottom:-60px;
 	right:120px;
  	display: block;
}

#canvas5 {
	background: url('../images/first-plane.png')
}

#canvas4 {
	opacity:0.9;
	background: url('../images/colorfog.png') repeat 0 0;
  	width: 100%;
  	margin: 0;
  	height: 500px;
  	-webkit-animation: slide 20s linear infinite;
}



@-webkit-keyframes slide {
    from { background-position: 0 0; }
    to { background-position: -1000px 0; }
}


#canvas7 {
	visibility: hidden;
	background: url('../images/end-canvas.gif')
}

#trigger {
	visibility: hidden;
	background: url('../images/trigger1.png')
}

#trigger2 {
	visibility: hidden;
	background: url('../images/fire.gif')
}

#spider {
	visibility: hidden;
	background: url('../images/spider.gif')
}