*{
	box-sizing: border-box;
}

body{
	background-color: black;
	display: flex;
	flex-direction: column;
	font-family: 'Xanh Mono', monospace;
}

header{
	display: flex;
	justify-content: center;
	align-items: center;
}

main{
	display: flex;
	justify-content: center;
	max-height: 300px;
}

.landing-page{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-width: 100vw;
}


.landing-page-image{
	max-width: 50%;
}

.landing-page-button{
	border: none;
	padding: 15px 50px;
	border-radius: 10px;
	font-family: 'Xanh Mono', monospace;
	background-color: rgba(15, 15, 161, 0.5);
	box-shadow: 1px 1px 15px rgba(255, 255, 255, 0.2);
	color: #f4f0db
}

.game-options{
	flex:1;
	}
	
	.logo-image{
		max-width: 100%;
	}

	.quest{
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 0px 40px;
		color: #f4f0db;
	}
	
	.game-options{
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 1;
		}

		
.quest-heading{
	font-size: 25px;
	margin-bottom: -15px;
}

	.quest-blurb{
		font-size: 20px;;
	}

	

.game-info{
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: space-evenly;
	flex: 1;
color: #f4f0db;
text-align: center;
}


.start-button{
	align-self: center;
	border: none;
	margin-right:40px;
	background-color: #000066;
	color: #f4f0db;
	padding: 10px 25px;
	border-radius: 10px;
	font-family: 'Xanh Mono', monospace;
}

.score{
margin: 10px 0 10px 0;
}

.player-score{
	color: white;
	text-align: center;
	margin-right: 35px;
	margin-top: 15px;
}

.token{
	max-width: 30%;
}


.game-tokens{
	display: flex;
	flex-direction: column;
	margin: 5px 35px 5px 20px;
	align-items: center;
}

.harry-lifes{
	display: flex;
	margin-top: 10px;
}

.remaining-lives-heading{
	margin-top: 20px;
}

.life1, 
.life2,
.life3{
	max-width: 15%;
	margin-top: 5px;
}

.grid-wrapper {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 3;
}

.grid {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	height: 100%;
	justify-content: center;
	height: 600px;
	width: 600px;
}

.grid div{
	/* color: white;
	 border: 1px solid rgba(255,255,255, 0.3);  */
	flex-grow: 1;
	height: 7.14%;
	width: 7.14%;
}

.end-of-game-message-div{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 50px;
	border: 1px solid #000066;
}

.end-of-game-message{
	color: #f4f0db;
	font-family: 'Xanh Mono', monospace;
	margin: 10px;
}

.end-of-game-button{
	align-self: center;
	border: none;
	margin-top: 10px;
	background-color: #000066;
	color: #f4f0db;
	padding: 10px 25px;
	border-radius: 10px;
	font-family: 'Xanh Mono', monospace;
}

.food{
background-image: url('../images/characters/food.gif');
background-repeat: none;
background-size: contain;
}
.power-up{
	background-image: url('../images/characters/special-food.gif');
	background-repeat: none;
	background-size: contain;
	}


.harry{
	background-image: url('../images/characters/harrry.gif');
	background-repeat: none;
	background-size: contain;
}
.flip-harry{
	background-image: url('../images/characters/flipped-harrry.gif');
	background-repeat: none;
	background-size: contain;
}

.rotate-harry-up{
	transform: rotate(90deg);
	/* transition: ease-in; */
}

.rotate-harry-down{
	transform: rotate(-90deg)
}

.voldemort{
	background-image: url('../images/characters/yellow_voldermort.png');
	background-repeat: none;
	background-size: contain;
}

.special-ghost{
	background-image: url('../images/characters/voldemort.gif');
	background-repeat: none;
	background-size: contain;
}

.top-border{
	background-image: url('../images/border/top-edge.png');
	background-repeat: none;
	background-size: cover;
}

.top-right-corner-border{
	background-image: url('../images/border/top-right-corner.png');
	background-repeat: none;
	background-size: cover;
}

.top-left-corner-border{
	background-image: url('../images/border/top-left-corner.png');
	background-repeat: none;
	background-size: cover;
}


.bottom-border{
	background-image: url('../images/border/bottom-edge.png');
	background-repeat: none;
	background-size: cover;
}

.bottom-left-corner-border{
	background-image: url('../images/border/bottom-left-corner.png');
	background-repeat: none;
	background-size: cover;
}

.bottom-right-corner-border{
	background-image: url('../images/border/bottom-right-corner.png');
	background-repeat: none;
	background-size: cover;
}

.right-side-border{
	background-image: url('../images/border/right-side-border.png');
	background-repeat: none;
	background-size: cover;
}

.left-side-border{
	background-image: url('../images/border/left-side-border.png');
	background-repeat: none;
	background-size: cover;
}

.block-top-side{
	background-image: url('../images/blocks/top-side.png');
	background-repeat: none;
	background-size: cover;
}

.block-bottom-side {
	background-image: url('../images/blocks/block-side.png');
	background-repeat: none;
	background-size: cover;
}

.block-left-side{
	background-image: url('../images/blocks/left-side.png');
	background-repeat: none;
	background-size: cover;
}

.block-right-side{
	background-image: url('../images/blocks/right-side.png');
	background-repeat: none;
	background-size: cover;
}

.block-top-right-corner{
	background-image: url('../images/blocks/block-top-right-corner.png');
	background-repeat: none;
	background-size: cover;
}

.block-top-left-corner{
	background-image: url('../images/blocks/block-top-left-corner.png');
	background-repeat: none;
	background-size: cover;
}

.block-bottom-left-corner{
	background-image: url('../images/blocks/block-bottom-left-corner.png');
	background-repeat: none;
	background-size: cover;
}

.block-bottom-right-corner{
	background-image: url('../images/blocks/block-bottom-right-corner.png');
	background-repeat: none;
	background-size: cover;
}