/*This style  gives the body element in our HTML a cool blue background color*/
body {
    /*background-image: url("https://i.postimg.cc/zXDrsFTg/PKMN.png");*/
    background-image: url("https://i.imgur.com/E9EHO5l.gif");
    background-repeat: no-repeat;
    align-content: center;
    vertical-align: center:
    text-align: center;
    display: block;
}

/*This styles the div in the HTML that contains and centers our penguin game*/
#gameholder {
    width: 612px;
    margin-left: auto;
    margin-right: auto;
}

/*This styles the title div in or HTML*/
#title {
    width: 600px;
    height: 150px;
    /*This property embeds an image into the background of our div*/
    background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1263878/penguin_title.png');
}

/*This pseudo class is applied when the mouse hovers over the 1st penguin div*/
.penguin1:hover {
    background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1263878/mound_1_hover.png');
    /*This property changes our cursor to a pointer indicating an interactive element*/
    cursor: pointer;
}

/*This pseudo class is applied when our 1st penguin div is clicked by the mouse button*/
.penguin1:active {
    width: 200px;
    height: 200px;
    background-image:url('https://i.postimg.cc/vHpsSgtR/1200px-025-Pikachu.png');
    width: 200px;
    height: 200px;
}

/*This is the style for our 1st penguin div*/
.penguin1 {
    width: 200px;
    height: 200px;
    float: left;
    background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1263878/mound_1.png');
}

/*These are the styles for our 2nd penguin div.*/

.penguin2:hover {
    background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1263878/mound_2_hover.png');
    cursor: pointer;
}

.penguin2:active {
    width: 200px;
    height: 200px;
    background-image:url('https://i.postimg.cc/h4YWfzwJ/2437349-pikachu.png');
  }

.penguin2 {
    width: 200px;
    height: 200px;
    float: left;
    background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1263878/mound_2.png');
}

/*These are the styles for our 3rd penguin div.*/

.penguin3:hover {
    background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1263878/mound_3_hover.png');
    cursor: pointer;
}

.penguin3:active {
    width: 200px;
    height: 200px;
    background-image:url('https://i.postimg.cc/9M83PrQn/5Pikachu.png');
}

.penguin3 {
    width: 200px;
    height: 200px;
    float: left;
    background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1263878/mound_3.png');
}

/*These are the styles for our 4th penguin div.*/

.penguin4:hover {
    background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1263878/mound_4_hover.png');
    cursor: pointer;
}

.penguin4:active {
    width: 200px;
    height: 200px;
    background-image:url('https://i.postimg.cc/zvQrNVmg/char-pikachu.png');
}

.penguin4 {
    width: 200px;
    height: 200px;
    float: left;
    background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1263878/mound_4.png');
}

/*These are the styles for our 5th penguin div.*/

.penguin5:hover {
    background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1263878/mound_5_hover.png');
    cursor: pointer;
}

.penguin5:active {
    width: 200px;
    height: 200px;
    background-image:url('https://i.postimg.cc/HLt1xSDH/main.png');
}

.penguin5 {
    width: 200px;
    height: 200px;
    float: left;
    background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1263878/mound_5.png');
}

/*These are the styles for our 6th penguin div.*/

.penguin6:hover {
    background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1263878/mound_6_hover.png');
    cursor: pointer;
}

.penguin6:active {
    width: 200px;
    height: 200px;
    background-image:url('https://i.postimg.cc/XJ7Syw45/main.png');
}

.penguin6 {
    width: 200px;
    height: 200px;
    float: left;
    background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1263878/mound_6.png');
}

/*These are the styles for our 7th penguin div.*/

.penguin7:hover {
    background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1263878/mound_7_hover.png');
    cursor: pointer;
}

.penguin7:active {
    width: 200px;
    height: 200px;
    background-image:url('https://i.postimg.cc/sfHy70Bg/PIKACHU.jpg');
}

.penguin7 {
    width: 200px;
    height: 200px;
    float: left;
    background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1263878/mound_7.png');
}

/*These are the styles for our 8th penguin div.*/

.penguin8:hover {
    background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1263878/mound_8_hover.png');
    cursor: pointer;
}

.penguin8:active {
    width: 200px;
    height: 200px;
    background-image:url('https://i.postimg.cc/5y6hsbHN/pikachu.png');
}

.penguin8 {
    width: 200px;
    height: 200px;
    float: left;
    background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1263878/mound_8.png');
}

/*These are the styles for our yeti div.*/

.yeti:hover {
    background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1263878/mound_9_hover.png');
    cursor: pointer;
}

.yeti:active {
    background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1263878/yeti.png');
}

.yeti {
    width: 200px;
    height: 200px;
    float: left;
    background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1263878/mound_9.png');
}
/*A red border is shown when the button changes the
border-width value > 0*/
.show-div{
  border-style: solid;
  border-width: 0px;
  border-color: red;
}

/*Changes the button's appearance*/
.btn{
  font-size:20px;
 	background-color: black;
  color: white;
  padding: 10px;
}