.friendarea {
    background-image: url("/images/layout/pkmn/bg1.png");
  	height: 500px;
   	margin: auto;
    background-size: cover;
    border: 1px solid;
    position:relative;
      image-rendering: pixelated;
     image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    margin-top:1em;
}


#bg-one:checked ~ .friendarea {
  background-image: url('/images/layout/pkmn/bg1.png');
}

#bg-two:checked ~ .friendarea {
  background-image: url('/images/layout/pkmn/bg2.png');
}

.pokemon1 {
    background-image: url("/images/layout/pkmn/swellow_w.gif");
    background-repeat: no-repeat;
    position:absolute;
    height: 90px;
    width: 64px;
    top:220px;
    right:30%;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    
}

.pokemon1:hover, .pokemon1:active {
  background-image: url("/images/layout/pkmn/swellow_h.gif");
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.pokemon2 {
    background-image: url("/images/layout/pkmn/eelektross_w.gif");
    background-repeat: no-repeat;
    position:absolute;
    height: 90px;
    width: 120px;
    top:20px;
    right:50%;
    color:transparent;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.pokemon2:hover, .pokemon2:active {
  background-image: url("/images/layout/pkmn/eelektross_h.gif");
  image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
      color: black;
  text-shadow: 0 0 6px rgba(0,0,0,0.7);
  font-weight:bold;
  line-height:160px;
}

.pokemon3 {
    background-image: url("/images/layout/pkmn/linoone_w.gif");
    height: 90px;
    width: 94px;
    top:400px;
    left:20%;
    color:transparent;
    position:absolute;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.pokemon3:hover, .pokemon3:active {
  background-image: url("/images/layout/pkmn/linoone_h.gif");
  image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
  color: black;
  text-shadow: 0 0 6px rgba(0,0,0,0.7);
  text-align:center;
  font-weight:bold;
  line-height:180px; 
}


.pokemon4 {
    background-image: url("/images/layout/pkmn/staravia_w.gif");
    background-repeat: no-repeat;
    position:absolute;
    height: 90px;
    width: 70px;
    top:250px;
    left:30%;
  	animation: wander3 40s infinite;
	animation-direction: alternate;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    color:transparent;
}

.pokemon4:hover, .pokemon4:active {
  background-image: url("/images/layout/pkmn/staravia_h.gif");
  image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.pokemon5 {
    background-image: url("/images/layout/pkmn/anorith_w.gif");
    background-repeat: no-repeat;
    position:absolute;
    height: 90px;
    width: 80px;
    top:350px;
    left:80%;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    color:transparent;
}

.pokemon5:hover, .pokemon5:active {
  background-image: url("/images/layout/pkmn/anorith_h.gif");
  image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}




@media screen and (max-width: 500px) {
  .friendarea {
    background-position-x: center;
    position:relative;
	width: 100%;
  }
  

  .pokemon1 {
    left: 60%;
  }

  .pokemon2 {
   left: 30%;
  }

  .pokemon3 {
    left: 10%;
  }
  
  .pokemon4 {
    left: 20%;
  }

   .pokemon5 {
    left: 60%;
  }

}