* {
	padding: 0;
	margin: 0;
}

header {
	background-color: #ff3838;
	color: #ffde00;
	border-bottom: 7px solid black;
	padding: 10px;
}

.title {
	-webkit-filter: drop-shadow(5px 5px 5px #222);
	filter: drop-shadow(5px 5px 5px #222);	
}

h2, h3 {
	-webkit-filter: drop-shadow(5px 5px 5px #003a70);
	filter: drop-shadow(5px 5px 5px #003a70);	
}

h1 {
	text-align: center;
}

.title, h2, h3 {
	margin-top: 5px;
	color: #ffde00;
}

ul {
	padding-top: 5px;
}

.search {
	display: flex;
	justify-content: space-between;
	padding: 10px 10px 0 10px;
}

.site-description {
	text-align: center;
}

.site-description p {
	position: relative;
	top: 200px;
	font-size: 24px;
	display: inline-block;
	width: 800px;
}

#rando {
	border-radius: 5px;
	padding: 10px;
}

.input-group {
	width: 350px;
}

.input-group > .form-control {
	height: 42px;
}

.input-group .btn,
#rando {
	background-color: black;
	color: white;
	border: none;
}

/* This section deals with the container when the search button is clicked */

#poke-sprite {
	width: 350px;
	height: 350px;
	-webkit-filter: drop-shadow(5px 5px 5px #222);
	filter: drop-shadow(5px 5px 5px #222);
}

#poke-sprite-shiny {
	width: 350px;
	height: 350px;
	-webkit-filter: drop-shadow(5px 5px 5px #222);
	filter: drop-shadow(5px 5px 5px #222);
}


.site-description img {
	width: 30%;
	height: auto;
	z-index: -1;
	position: relative;
	-webkit-filter: drop-shadow(5px 5px 5px #222);
	filter: drop-shadow(5px 5px 5px #222);
}

#music {
	position: fixed;
	right: 0;
	bottom: 0;
	border: 2px solid black;
}

.show {
	display: block;
}

.hide {
	display: none;
}

.sprites {
	position: relative;
}

#shinyToggle {
	position: absolute;
	border-radius: 5px;
	bottom: 6px;
	left: 6px;
}

#shinyToggle img {
	width: 45px;
	height: 45px;
}

.error-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: red;
    padding: 10px;
    border-radius: 5px;
    z-index: 10;
    text-align: center;
}