@font-face {
  font-family: 'playfair';
  font-style: italic, oblique;
  src: url('../fonts/PlayfairDisplay-BoldItalic.ttf');
}

@font-face {
  font-family: 'playfair';
  font-style: normal;
  src: url('../fonts/PlayfairDisplay-Bold.ttf');
}


body{
  margin:0;
}

#gameHolder{
  position:absolute;
  width:100%;
  height:100%;
  background: linear-gradient(#e4e0ba, #f7d9aa);
  overflow: hidden;
}
#world {
  position: absolute;
  width:100%;
  height: 100%;
  overflow: hidden;
}

H1{
  position:absolute;
  color:#d1b790;
  font-size:72px;
  letter-spacing:-3px;
  top:10px;
  left:50%;
  transform:translate(-50%,0%);
  font-family: playfair;
  text-align:center;
}

H1 span {
  font-size:14px;
  font-style: italic;
  letter-spacing:0px;
  display:block;
  margin-bottom:-35px;
  margin-left:-100px;
}

H2 {
  position:absolute;
  text-transform:uppercase;
  text-align:center;
  color:#c9564f;
  width:300px;
  font-size:8px;
  top:120px;
  left:50%;
  transform:translate(-50%,0%);
  letter-spacing:10px;
}

#score{
  position:absolute;
  top:170px;
  left:50%;
  transform : translate(-50%,0%);
}
#level{
  position:absolute;
  margin-left: -154px;
  padding:2px 20px 0px 20px;
  border-right : #d1b790 solid 1px;
}

#dist{
  position:absolute;
  margin-left: -68px;
  padding:2px 20px 0px 20px;
  border-right : #d1b790 solid 1px;
}
#energy{
  position:absolute;
  margin-left: 45px;
  padding:2px 20px 0px 20px;


}

.label{
  position:relative;
  text-transform:uppercase;
  color:#d1b790;
  font-size:9px;
  letter-spacing:3px;
  text-align:center;
}

#levelValue{
  position:relative;
  text-transform:uppercase;
  color:#d1b790;
  font-size:26px;
  font-family: playfair;
  text-align:center;
}


#distValue{
  position:relative;
  text-transform:uppercase;
  color:#d1b790;
  font-size:30px;
  font-family: playfair;
  text-align:center;
}

#levelCircle{
  position:absolute;
  display:block;
  transform-origin : 50% 50%;
  margin-top:-33px;
  margin-left:1px;
  transform: rotate(-90deg);
}

#energyValue{
  box-sizing:border-box;
  position:relative;
  width:60px;
  height:8px;
  margin-top:20px;
  border-radius:3px;
  background-color:#d1b790;
}
#energyBar{
  position:absolute;
  margin:2px;
  left:0;
  right:0%;
  top:0;
  bottom:0;
  background-color:#f25346;
  animation-name:none;
  animation-duration:150ms;
  animation-iteration-count: infinite;
}

#replayMessage {
  position:absolute;
  color:#68c3c0;
  font-size:10px;
  width:400px;
  text-transform:uppercase;
  letter-spacing:10px;
  bottom:130px;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  display:none;
}
#replayMessage::before {
  position:absolute;
  width:10px;
  height:1px;
  margin-top:-10px;
  left:50%;
  transform:translate(-50%,0%);
  background-color:#d1b790;
  content:"";
}

#replayMessage::after {
  position:absolute;
  width:10px;
  height:1px;
  margin-top:20px;
  left:50%;
  transform:translate(-50%,0%);
  background-color:#d1b790;
  content:"";
}


#instructions {
  position:absolute;
  color:#d1b790;
  font-size:14px;
  width:400px;
  font-family: playfair;
  text-transform:uppercase;
  letter-spacing:3px;
  bottom:50px;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
}

@keyframes blinking {
    0% {
      opacity:1;
    }
    50% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
}