
body {
	margin: 0;
	padding: 0;
}

.wrapper {
	height: 100vh;
	width: 100%;
	background-image: url(../images/pokemon-background.png);
	background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */

}

.logo img {
	max-width: 600px;
	position: absolute;
	top: 8%;
	left: 50%;
	transform: translate(-50%);
}

.pokemon img {
	width: 120px;
	height: 120px;
	margin: 20px 0 20px 0;
	padding: 10px;
}

.pokemon img:hover {
	border: 5px solid #3F5CA4;
	border-radius: 10px;

}

#start-btn {
	position: absolute;
	bottom: 46%;
	left: 50%;
	transform: translate(-50%);
	width: 400px;
	height: 80px;
	font-size: 30px;
}

#instructions {
	position: absolute;
	bottom: 35%;
	left: 50%;
	transform: translate(-50%);
	width: 400px;
	height: 80px;
	font-size: 30px;
}

#credits {
	position: absolute;
	bottom: 24%;
	left: 50%;
	transform: translate(-50%);
	width: 400px;
	height: 80px;
	font-size: 30px;
}

#dialog-rounded-instructions, #dialog-rounded-credits, #dialog-rounded-choosePokemon {
	text-align: center;
	width: 600px;
}


.dialog-menu {
	padding: 0;
	margin: 10px 0 0 0;
}

.title {
	font-size: 22px;
}

.instruct-container {
	display: flex;
	flex-direction: row;
}

.emoji {
	width: 20%;
	font-size: 40px;
}

.writeup {
	width: 80%;
}

@media screen and (max-width: 800px) {
/* 13" Laptop */
	.logo img {
		max-width: 40%;
		position: absolute;
		top: 8%;
		left: 50%;
		transform: translate(-50%);
	}

	#dialog-rounded-instructions, #dialog-rounded-credits, #dialog-rounded-choosePokemon {
		text-align: center;
		width: 600px;
	}

	#start-btn {
		position: absolute;
  	bottom: 45%;
  	left: 50%;
  	transform: translate(-50%);
  	width: 25%;
  	height: 5%;
  	font-size: 15px;
	}

	#instructions {
		position: absolute;
    bottom: 38%;
    left: 50%;
    transform: translate(-50%);
    width: 25%;
    height: 5%;
    font-size: 15px;
	}

	#credits {
		position: absolute;
    bottom: 31%;
    left: 50%;
    transform: translate(-50%);
    width: 25%;
    height: 5%;
    font-size: 15px;
	}

	#dialog-rounded-instructions, #dialog-rounded-credits, #dialog-rounded-choosePokemon {
		text-align: center;
		width: 600px;
	}


}