@charset "utf-8";

/* CSS Document */

body {
  background-color: #FFD;
    background-color: #ddd;

}

.page {
  position: relative;
  margin: auto;
  width: 800px;
  height: 600px;
}

.main-img {
  width: 800px;
  height: 600px;
  border: none;
}

.main-btn {
  position: absolute;
  text-decoration: none;
  bottom: 120px;
  right: 40px;
  height: 30px;
  background-color: white;
  padding: 8px 15px;
  text-align: center;
  color: #53e277;
  border-radius: 3px;
  width: 200px;
  cursor: pointer;
  font-family: Roboto, sans-serif;
  font-weight: 300;
  font-size: 1.5rem;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
}

.main-btn:hover {
  background-color: #d9e0db;
}

#bathroom:link,
#bathroom:visited {
  position: absolute;
  top: 65px;
  left: 334px;
  display: block;
  width: 159px;
  height: 296px;
  background-image: url('../images/bathroom.png');
  background-position: top left;
}

#bathroom:hover,
#bathroom:active {
  background-position: bottom left;
}

#kitchen:link,
#kitchen:visited {
  position: absolute;
  top: 75px;
  left: 615px;
  display: block;
  width: 149px;
  height: 287px;
  background-image: url('../images/kitchen.png');
  background-position: top left;
}

#kitchen:hover,
#kitchen:active {
  background-position: bottom left;
}

#next:link,
#next:visited {
  position: absolute;
  bottom: 0px;
  right: 0px;
  display: block;
  width: 130px;
  height: 130px;
  background-image: url('../images/next.png');
  background-position: top left;
}

#next:hover,
#next:active {
  background-position: bottom left;
}

.corner-button {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

#peek:link,
#peek:visited {
  position: absolute;
  top: 70px;
  left: 450px;
  display: block;
  width: 400px;
  height: 60px;
  background-image: url('../images/peek.png');
  background-position: top left;
}

#peek:hover,
#peek:active {
  background-position: bottom left;
}

#leave:link,
#leave:visited {
  position: absolute;
  top: 10px;
  left: 450px;
  display: block;
  width: 400px;
  height: 60px;
  background-image: url('../images/leave.png');
  background-position: top left;
}

#leave:hover,
#leave:active {
  background-position: bottom left;
}

#pet:link,
#pet:visited {
  position: absolute;
  top: 10px;
  left: 450px;
  display: block;
  width: 320px;
  height: 45px;
  background-image: url('../images/pet.png');
  background-position: top left;
}

#pet:hover,
#pet:active {
  background-position: bottom left;
}

#punch:link,
#punch:visited {
  position: absolute;
  top: 70px;
  left: 450px;
  display: block;
  width: 320px;
  height: 45px;
  background-image: url('../images/punch.png');
  background-position: top left;
}

#punch:hover,
#punch:active {
  background-position: bottom left;
}

#go:link,
#go:visited {
  position: absolute;
  top: 380px;
  left: 600px;
  display: block;
  width: 110px;
  height: 50px;
  background-image: url('../images/go.png');
  background-position: top left;
}

#go:hover,
#go:active {
  background-position: bottom left;
}

#stay:link,
#stay:visited {
  position: absolute;
  top: 490px;
  left: 600px;
  display: block;
  width: 110px;
  height: 50px;
  background-image: url('../images/stay.png');
  background-position: top left;
}

#stay:hover,
#stay:active {
  background-position: bottom left;
}

#fight:link,
#fight:visited {
  position: absolute;
  top: 350px;
  left: 320px;
  display: block;
  width: 260px;
  height: 70px;
  background-image: url('../images/fight.png');
  background-position: top left;
}

#fight:hover,
#fight:active {
  background-position: bottom left;
}

#dontfight:link,
#dontfight:visited {
  position: absolute;
  top: 430px;
  left: 320px;
  display: block;
  width: 260px;
  height: 80px;
  background-image: url('../images/dontfight.png');
  background-position: top left;
}

#dontfight:hover,
#dontfight:active {
  background-position: bottom left;
}

#button:link,
#button:visited {
  position: absolute;
  top: 450px;
  left: 400px;
  display: block;
  width: 74px;
  height: 66px;
  background-image: url('../images/button.png');
  background-position: top left;
}

#button:hover,
#button:active {
  background-position: bottom left;
}

#button2:link,
#button2:visited {
  position: absolute;
  top: 450px;
  left: 530px;
  display: block;
  width: 74px;
  height: 66px;
  background-image: url('../images/button.png');
  background-position: top left;
}

#button2:hover,
#button2:active {
  background-position: bottom left;
}

#button3:link,
#button3:visited {
  position: absolute;
  top: 450px;
  left: 660px;
  display: block;
  width: 74px;
  height: 66px;
  background-image: url('../images/button.png');
  background-position: top left;
}

#button3:hover,
#button3:active {
  background-position: bottom left;
}

#dark:link,
#dark:visited {
  position: absolute;
  bottom: 70px;
  left: 580px;
  display: block;
  width: 134px;
  height: 228px;
  background-image: url('../images/dark.png');
  background-position: top left;
}

#dark:hover,
#dark:active {
  background-position: bottom left;
}

#light:link,
#light:visited {
  position: absolute;
  bottom: 50px;
  left: 710px;
  display: block;
  width: 89px;
  height: 239px;
  background-image: url('../images/light.png');
  background-position: top left;
}

#light:hover,
#light:active {
  background-position: bottom left;
}

#credits {
  color: #FF0000;
  font-size: 10px;
  font-family: "Courier New", Courier, monospace;