index.css

body {
}


#box {
	/*height: 300px;*/
	/*width: 600px;*/
	/*border: 1px solid grey;*/
	margin: 0 auto;
	text-align: center;

}

#box2 {
	/*border: 1px solid grey;*/
	margin: 0 auto;
	text-align: center;
}

h3 {
        margin: 33px auto 0px;
        color: #FFF;
}

button {
	margin: 10px;
	text-align: center;
}

.pokemon, .specialTeam {
        margin-top: 30px ;
    color:white;
}

.specialTeam {
margin-top: 0px ;
    color: #000000;
background-color: #e7ecff;
}

.pokeChar {
    /*float: left;*/
    display: inline-block;
    position: relative;
    border: 1px double lightgray;
    height:170px;
    width: 170px;
    vertical-align: top;
        border-radius: 50%;
        background: url('images/pokeball.png') 50% center no-repeat transparent;

}

.pokeChar img {
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
    color: #FFF;
}


.inactive {
    /*background-color: orange;*/
    /*background: url('images/pokeball.png') 50% center no-repeat transparent;*/
}

.inactive h3, .inactive img {
    visibility: hidden;
}

.active {
    background: transparent;
}
.active h3 {
    color:#000;
}
.active::after {
  content: "";
  background: url('images/pokeball.png');
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}


.found {
    pointer-events: none;
}

.found h3, .found img {
    visibility: visible;
}

.pokemon, .pokemonTeam {
    text-align: center;
}

.narrow {
 width: 700px;
 margin: 30px auto 0;
}

#overlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1000;
    display: none;
    background-color: #164357;
    color: #FFF;
    text-align: center;
}

.found
{
  -webkit-animation: glow 500ms ease-in-out 100ms ;
  animation: glow 500ms  ease-in-out 100ms;
}

@-webkit-keyframes glow
{
  50% { box-shadow: 0 0 80px #ff581c; }
}

@keyframes glow
{
  50% { box-shadow: 0 0 80px #ff581c; }
}


.special::after {
  content: "";
  background: url('images/lebowski/bowlingball.jpg');
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}

.special {
    background: url('images/lebowski/bowlingball.jpg') 50% center no-repeat transparent;
}

.specialBox {
            background: url('images/lebowski/rug-1.jpg') 50% center transparent;

}