/*****************
* START VARIABLES
*****************/
.startTitle {
  font-size: 70px;
}

.startTitle {
  color: red;
  transform: scale(1.3) rotate(4deg);
  animation-name: title-screen;
  animation-duration: 9s;
  animation-iteration-count: 1;
}

@keyframes title-screen {
  0% {color: white; transform: scale(1);}
}

.startInfo {
  font-size: 20px;
  width: 60%;
  margin: auto;
}

body {
  background-color: black;
  text-align: center;
  font-family: Arial;
  color: white;
  background-size: cover;
  background-repeat: no-repeat;
}

footer {
  background-color: black;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 30px;
  width: 100%;
  overflow:hidden;
  padding-top: 10px;
  font-size: 20px;
  color: dimgrey;
}

p {
  background-color: rgba(0, 0, 0, .7);
  background: auto;
  border-radius: 10px;
  padding: 6px;
}

.creepy {
  font-family: fantasy;
  background-color: rgba(0,0,0,0);
}

#items {
  font-family: fantasy;
  background-color: rgba(0,0,0,0.5);
  margin-left: 35%;
  margin-right: 35%;
  border-radius: 10px;
}

h1 {
  font-family: fantasy;
}

h1:hover {
  color: red;
  transition-duration: 6s;
}

.health100, .health75, .health50, .health25 {
  text-decoration: underline;
}

#container {
  width: 60%;
  margin: auto;
}

.gameOver {
  font-family: fantasy;
  font-size: 50px;
  color: red;
}

.win {
  font-family: fantasy;
  font-size: 50px;
  color: limegreen;
}
/*****************
* BUTTONS
*****************/

button {
  height: 40px;
  width: auto;
  margin: 10px;
  border: 2px solid red;
  border-radius: 4px;
  background-color: black;
  color: red;
  font-size: 15px;
  cursor: pointer;
}

#startButton {
  width: 100px;
}

#startButton:hover {
  transform: scale(1.3);
  transition-duration: 1s;
}

#window {
  width: 110px;
  height: 50px;
}

#window:hover {
  transform: scale(1.3);
  transition-duration: 1s;
}

.button1:hover {
  transform: scale(1.4) rotate(-8deg);
  transition-duration: 1s;
}

.button2:hover {
  transform: scale(1.4) rotate(8deg);
  transition-duration: 1s;
}

/***************
*HEALTH HOVER
****************/
.health100:hover {
  color: limegreen;
  transform: scale(1.4);
  transition-duration: 1s;
}

.health75:hover {
  color: yellow;
  transform: scale(1.4);
  transition-duration: 1s;
}

.health50:hover {
  color: darkorange;
  transform: scale(1.4);
  transition-duration: 1s;
}

.health25:hover {
  color: red;
  transform: scale(1.4);
  transition-duration: 1s;
}