* {
  font-family: 'Oswald', sans-serif;
}

body {
  font-size: 20px;
  background-color: black;
}

/*--- Header ---*/

header {
  position: relative;
  width: 267px;
  height: 154px;
  float: right;
  margin: 5px;
  z-index: 100;
}

#logo {
  height: 100px;
}

#image-change {
  background-color: #FF3355;
  border: white 2px dotted;
  color: white;
  text-align: center;
  font-size: 15px;
  height: 30px;
  width: 70px;
  margin: 0 0 0 100px;
}

.image2 {
  background-image: url(../images/bg2.jpg);
}

/*--- Main ---*/

.main-body {
  width: 100%;
  height: 500px;
  border: 1px black solid;
  margin: 3% auto;
  background-image: url(../images/adventuretimebg.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.image2 {
  background-image: url(../images/bg2.jpg);
}

/*--- Hangman ---*/

#main-hangman {
  position: relative;
  top: 6%;
  left: 5%;
  width: 300px;
  height: 400px;
}

.hangman-images {
  height: 400px;
  position: relative;
  left: 10%;
}

#image1, #image2, #image3, #image4, #image5, #image6 {
  display: none;
}

/*--- Player Area ---*/

#player-bar {
  position: absolute;
  top: 8%;
  left: 41%;
  height: 320px;
  width: 400px;
}

button {
  border-radius: 5px;
}

button:disabled {
  background-color: grey;
  border-radius: 5px;
  color: white;
}

#play-button {
  background-color: #4CAF50;
  border: white 1px solid;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 20px;
  height: 40px;
  width: 100px;
  position: absolute;
  top: 20px;
  display: inline-block;
  margin: 0 0 10px 0;
}

#alert-messages {
  font-size: 30px;
  position: relative;
  top: 55px;
  color: white;
  margin: 10px 0 5px 0;
}

#lives {
  font-size: 30px;
  position: relative;
  top: 50px;
  margin: 5px 0 5px 0;
}

#alphabet {
  position: relative;
  top: 50px;
  height: 100px;
  width: 400px;
}

.alpha-buttons {
  background-color: white;
  border: 1px solid black;
  max-height: 60px;
  width: 40px;
}

#word-box {
  font-size: 40px;
  letter-spacing: 5px;
  position: relative;
  top: 50px;
  width: 700px;
  height: 40px;
  margin: 5px 0 5px 0;
}

.loser-images {
  position: absolute;
  top: 80%;
  width: 500px;
  height: 200px;
}

.winlose {
  display: none;
}

#jake, #princess, #lumpy, #beemo, #finn, #iceking {
  height: 100%;
}

#jake, #princess, #iceking {
  height: 250px;
  margin: -27px 0 0 0;
}

#rainicorn {
  width: 350px;
}

#lemongrab {
  position: relative;
  top: 83px;
  left: 90px;
  height: 280px;
}