body, html {
  height: 100%;
  margin: 0;
  font-family: 'VT323', monospace;

}

#fade{
	animation: fadeIn 3s forwards;
}
}

@keyframes fadeIn{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}

.bg {
  /* The image used */
  background-image: url("images/poke_main.jpg");

  /* Full height */
  height: 100%;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg1{
	/* The image used */
  background-image: url("https://i.ytimg.com/vi/6ZyEwWdxeVY/maxresdefault.jpg");

  /* Full height */
  height: 100%;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}
.pokemon{
  background-image: url("images/start_point.jpg");
  height: 2200px; 
  width: 2400px;
  background-repeat: repeat;
  background-size: cover;
}

.start{
	padding-top: 38%;
	padding-left: 42%;
}

.states{
	animation: slide 2s forwards;
}

.image{
	animation: blinkimage 5s infinite;
	animation-delay: 10s;
}

@keyframes blinkimage{
	0%{
		opacity: 0;
	}
	50%{
		opacity: 0.2;
	}
	100%{
		opacity: 0;
	}
}

@keyframes slide{
	from{
		left: 0;
	}
	to{
		left: 600;
	}
}
.title{
	font-size: 40px;
	text-transform: uppercase;
	text-align: center;
	margin: 15px;
}

.stats {
    display: inline-block;
}

#mycard{
	background-color: transparent;
	border: none;
}

.bulbasaur{
	position: relative;
	display: inline-block;
	opacity: 0;
	top: 350px;
	left: 1600px;
}

.bul{
	position: relative;
	opacity: 1;
	top: 350px;
	left: 1800px;
	display: inline-block;
}

.charmander{
	position: relative;
	opacity: 0;
	top: 100px;
	left: 50px;
	display: inline-block;
}

.charm{
	position: relative;	
	top: 100px;
	left: 50px;
	opacity: 1;
	display: inline-block;
}

.Squirtle{
	position: relative;
	left: 1600px;
	top: 1600px;
	opacity: 0;
	display: inline-block;
}

.Squir{
	position: relative;
	left: 1600px;
	top: 1600px;
	opacity: 1;
	display: inline-block;
}

.lapres{
	position: relative;
	left: -600px;
	top: 1500px;
	opacity: 0;
	display: inline-block;
}

.lap{
	position: relative;
	left: -600px;
	top: 1500px;
	opacity: 1;
	display: inline-block;
}

@media only screen and (max-width: 600px){
	.start{

		padding-top: 100%;
		padding-left: 23%;
	}
}
@media only screen and (max-width: 990px ){
	.start{

		padding-top: 50%;
		padding-left: 33%;
	}
}