/*This style  gives the body element in our HTML a cool blue background color*/
body {
    background-image: url("https://media2.giphy.com/media/l378wcSfS7eXWQgla/giphy.gif");
}

h1{color:blue;
 	font-size: 100px;
  text-align: center;
}

/*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*/
.goldcoins: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*/
.goldcoins:active {
    background-image:url('https://live.staticflickr.com/193/442965594_f1ba641913_z.jpg');
}

/*This is the style for our 1st penguin div*/
.goldcoins {
    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.*/

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

.mario:active {
    background-image:url('https://upload.wikimedia.org/wikipedia/en/thumb/a/a9/MarioNSMBUDeluxe.png/220px-MarioNSMBUDeluxe.png');
}

.mario {
    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.*/

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

.scratchcat:active {
    background-image:url('https://cdn2.scratch.mit.edu/get_image/gallery/4217445_200x130.png');
}

.scratchcat {
    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.*/

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

.pikachu:active {
    background-image:url('https://bit.ly/2IZ49AQ');
}

.pikachu {
    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 {
    background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1263878/penguin_5.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.*/

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

.minecraft:active {
    background-image:url('https://gamepedia.cursecdn.com/minecraft_gamepedia/c/c7/Grass_Block.png');
}

.minecraft {
    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.*/

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

.robloxlogo:active {
    background-image:url('https://i.redd.it/7lwxtefz5s031.png');
}

.robloxlogo {
    width: 420px;
    height: 420px;
    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.*/

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

.robloxgif:active {
    background-image:url('https://media1.tenor.com/images/68b4a3e2a4bded23f88bba28223c81a1/tenor.gif?itemid=7798015');
}

.robloxgif{
    width: 256px;
    height: 256px;
    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.*/

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

.sans:active {
    background-image:url('https://media.giphy.com/media/UCkZPALajEs8M/200.gif');
}

.sans {
    width: 227px;
    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;
}