/* Font imports */
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lemon&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Buenard&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

h1 {
  font-family: Comic Neue;
}

.upg {
  font-family: "Poppins";
  font-weight: bolder;
  border: none;
  background: #0000d6;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 5px 5px 5px 5px;
}

#cash {
  background: url(./assets/moneytexture.png);
  position: relative;
  width: fit-content;
  text-align: center;
  overflow: hidden;
  color: white ;
  text-overflow: ellipsis;
  font-weight: bold;
  font-family: Poppins;
  left: 10px;
  top: -50px;
}

#pickaxe {
  position: absolute;
  top:200px;
  left:18%;
  height:120px;

}
@keyframes swing {
  0% {
    transform: rotate(70deg);
    left:16%;
    top:210px;
  }
  30% {
  transform: rotate(0deg);
  top:150px;
  left:15%;
  }
  100% {
    transform: rotate(70deg);
    left:16%;
  }
}
#ore {
  position: absolute;
  left:260px;
  top:200px;
}


.running {
  animation-name:swing;
  animation-duration:3.5s;
  animation-iteration-count: infinite;
  transform:rotate(70deg);
}
.not-running {
  animation-name: none;
}
@keyframes none {
  0% {

  }
  100% {

  }
}
#modal-background {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: .50;
  -webkit-opacity: .5;
  -moz-opacity: .5;
  filter: alpha(opacity=50);
  z-index: 1000;
}

#modal-content {
  background-color: white;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  box-shadow: 0 0 20px 0 #222;
  -webkit-box-shadow: 0 0 20px 0 #222;
  -moz-box-shadow: 0 0 20px 0 #222;
  display: none;
  height: 240px;
  left: 50%;
  margin: -120px 0 0 -160px;
  padding: 10px;
  position: fixed;
  top: 50%;
  width: 320px;
  z-index: 1000;
  overflow-x: hidden;
  overflow-y: auto;
  text-align:justify;
}

#modal-background.active, #modal-content.active {
  display: block;
}
#modal-close {
  right:20px;
}
#settingsbtn {
  border:none;
  background:none;
  position: absolute;
  right:0;
  bottom:0;
}