style.css

/*   font-family: 'Mystery Quest', cursive;
font-family: 'Eagle Lake', cursive;   */

html {
  max-height: 100px;
}

body {
  background: url(images/forest.jpg) no-repeat center center fixed;
  background-size: cover;
  color: white;

}

.spacer {
  font-size: 60px;
  font-family: 'Mystery Quest', cursive;
  color: #e5f442;
  text-align: center;
  border-radius: 15px;
  height: 100px;
}

.separator {
  height: 200px;
}

.position1 {
  background-image: url(images/Troll1.png) absolute;
}

#box1 {
  background-image: url(images/troll1.png);
  width: 70px;
  height: 70px;
}

#box73 {
  background-image: url(images/trumenium.png);
  width: 70px;
  height: 70px
}

th {
  /*background-color: lightblue;*/
  text-decoration: none;
  color: transparent;
  width: 70px;
  height: 70px;
  font-size: 10px;
  /*border: 1px solid black;*/
}

h1 {
  color: white;
  text-align: center;
  font-family: 'Mystery Quest', cursive;
}

h2 {
  color: white;
  font-family: 'Mystery Quest', cursive;
}

h3 {
  color: #5b601f;
  font-size: 36px;
  font-family: 'Mystery Quest', cursive;
}

p {
  text-align: center;
  color: #5b601f;
  font-family: 'Mystery Quest', cursive;
}

.col-lg-1 {
  background-color: lightgrey;
}



.relative {
  position: relative;
}

/* Styles the Popup Window*/

#mask {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9000;
  background-color: #000;
  display: none;
}

#boxes .window {
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  display: none;
  z-index: 9999;
  padding: 20px;
  border-radius: 15px;
  text-align: center;
}

#boxes #dialog {
  width: auto;
  height: auto;
  padding: 10px;
  background-color: #e5f442;
  font-family: 'Segoe UI Light', sans-serif;
  font-size: 15pt;
}

#popupfoot {
  font-size: 16pt;
  position: absolute;
  bottom: 0px;
  width: 250px;
  left: 50%;
}

#dialog {
  text-aling: justified;
}


/*Style for main game title*/

@keyframes wobble {
  from {
    transform: none;
  }
  15% {
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
  to {
    transform: none;
  }
}

.wobble {
  animation-name: wobble;
}

.pulse {
  animation-name: pulse;
}

@keyframes rubberBand {
  from {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, .95, 1);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}



@keyframes rotateIn {
  from {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    transform-origin: center;
    transform: none;
    opacity: 1;
  }
}

.rotateIn {
  animation-name: rotateIn;
}

.reset {
  text-align: center;
  text-align: center;
  background-color: #e5f442;
  color: black;
  font-size: 20px;
  font-family: 'Mystery Quest', cursive;
  margin: 100px;
  padding: 20px;
  border-radius: 15px;
}