/*
 width: 
  height: 
  font-size: 
  border-radius: 
  background-size: contain;
  font-weight:
  background-image:
*/

/* style for h1 and button */

body{
  background-color: bisque;
}

h1 {
  font-family: "Jaro", monospace;
}

button {
  cursor: pointer;
  font-family: "Jaro", monospace;
}

/* style for counters (bps, bpc, total_bonks) */
#total_bonk_counter {
  position: absolute;
  top: 5%;
  left: 45%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#bps_counter {
  position: absolute;
  top: 10%;
  left: 41%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#bpc_counter {
  position: absolute;
  top: 15%;
  left: 41%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.bottom{
    text-align: center;
    font-family: "Jaro", monospace;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding-bottom: 30px;
}
.bottom a{
  color: #fff;
  text-decoration: none;
  background-color: #000;
  font-size: 25px;
  padding: 20px;
  border-radius: 30px;
  margin-right: 15px;
}
.bottom h2{
  margin-bottom: 55px;
}
.bottom a:hover{
  background-color: #fff;
  color: #000;
}

/* style for big button in the middle */
#big_button {
  width: 500px;
  height: 346.1px;
  font-size: 30px;
  border-radius: 50px;
  background-size: contain;
  font-weight: bold;
  background-image: url("https://i.imgur.com/TEVoaW3.png");
  background-repeat: no-repeat;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: left;
}

/* style for upgrade buttons on the left */
#upgrade1 {
  width: 300px;
  height: 80px;
  font-size: 20px;
  position: absolute;
  top: 10%;
  left: 90%;
  transform: translate(-50%, -50%);
}

#upgrade2 {
  width: 300px;
  height: 80px;
  font-size: 20px;
  margin: 0;
  position: absolute;
  top: 30%;
  left: 90%;
  transform: translate(-50%, -50%);
}

#upgrade3 {
  width: 300px;
  height: 80px;
  font-size: 20px;
  position: absolute;
  top: 20%;
  left: 90%;
  transform: translate(-50%, -50%);
}
 
#upgrade4 {
  width: 300px;
  height: 80px;
  font-size: 20px;
  position: absolute;
  top: 40%;
  left: 90%;
  transform: translate(-50%, -50%);
}

/* Perm upgrades (on the left) */

#perm_upgrade1 {
  width: 300px;
  height: 80px;
  font-size: 20px;
  position: absolute;
  top: 10%;
  left: 10%;
  transform: translate(-50%, -50%);
  display: block;
}

#perm_upgrade2 {
  width: 300px;
  height: 80px;
  font-size: 20px;
  position: absolute;
  top: 10%;
  left: 10%;
  transform: translate(-50%, -50%);
  display: none;
}

#perm_upgrade3 {
  width: 300px;
  height: 80px;
  font-size: 20px;
  position: absolute;
  top: 20%;
  left: 10%;
  transform: translate(-50%, -50%);
  display: block;
}

#perm_upgrade4 {
  width: 300px;
  height: 80px;
  font-size: 20px;
  position: absolute;
  top: 20%;
  left: 10%;
  transform: translate(-50%, -50%);
  display: none;
}

/* text */
#upgrade_text {
  position: absolute;
  top: 0%;
  left: 90%;
  transform: translate(-50%, -50%);
}

#perm_upgrade_text {
  position: absolute;
  top: 0%;
  left: 10%;
  transform: translate(-50%, -50%);
}

/* Images */
#small_hat1 {
  width: 50px;
  heigth: 100px;
  position: absolute;
  top: 31%;
  left: 45.5%;
  transform: translate(-50%, -50%);
  display: none;
}
/*47  55*/
#small_hat2 {
  width: 50px;
  heigth: 100px;
  position: absolute;
  top: 47%;
  left: 58.3%;
  transform: translate(-50%, -50%);
  display: none;
}
/* inf bonks button */
#developer {
  position: absolute;
  top: 97%;
  left: 5%;
  transform: translate(-50%, -50%);
  display: block;
}

#developer_off {
  position: absolute;
  top: 97%;
  left: 5%;
  transform: translate(-50%, -50%);
  display: none;
}