/*Again, ignore*/ /* CSS */ 
body {
   background-color: antiquewhite; 
   color: black; 
   margin: 0; 
   height: 100vh; 
   font-family: Comic Sans MS; 
   display: flex; 
   justify-content: center; 
   align-items: flex-start; } 
   
   .moneybtn{ outline: none; 
    border: none; 
    padding: 0; 
    background: none; 
    cursor: pointer; 
    transition: transform 0.2s ease; 
  } 
  
  .moneybtn:hover{ 
    transform: scale(1.1); 
  }
    
    .moneybtn:active{ 
      transform: scale(0.95); 
    } 
    .layout{ 
      display: flex; 
      width: 100%; 
      height: 100vh; 
    } 
    
    .main{ 
      flex: 1; 
      display: flex; 
      flex-direction: 
      column; justify-content: 
      center; 
      align-items: center; 
    } .main h1{ 
      text-align: center; 
    } /* SHOP PANEL */ 
    .shopbutton{ 
      top: 0; 
      right: 0; 
    } 
    .shopcontainer { 
      width: 260px; 
      background-color: black; 
      color: white; 
      padding: 20px; 
      box-sizing: border-box; 
      max-height: 0; 
      opacity: 0; 
      overflow: hidden; 
      transition: max-height 0.5s ease, opacity 0.5s ease; 
    } 
    .shopcontainer.open { 
      max-height: 1000px; 
      overflow-y: auto;
      opacity: 1; 
    } #shop div{ 
      background: #222; 
      margin-bottom: 10px; 
      padding: 10px; 
      border-radius: 6px; 
      opacity: 0; 
      transform: translateY(20px); 
      transition: opacity 0.3s ease, 
      transform 0.3s ease; 
    } 
    #shop div.show { 
      opacity: 1; 
      transform: translateY(0); 
    }
    .shopbutton {
  position: absolute;
  top: 20px;
  right: 20px;

  background: #222;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
#achievementsTab {
  margin-top: 50px;
  position: absolute;
  top: 20px;
  left: 20px;
  width: 300px;
  background: white;
  padding: auto;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.hidden {
  display: none;
}

#achievements {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 10px 15px;
  font-size: 1.2rem;
  cursor: pointer;
}
.coin {
  width: 100px;
  height: 100px;
  position: absolute;
  cursor: pointer;
}

  .audiobutton {
  position: absolute;
  bottom: 20px;
  right: 20px;
  padding: 10px 15px;
  font-size: 1.2rem;
  background: rgba(0,0,0,0.4);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s;
}
.prestige {
  margin-left: 250px;
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 12px 20px;
  background: gold;
  color: black;
  border: none;
  border-radius: 10px;
  font-size: 1.3rem;
  cursor: pointer;
  box-shadow: 0 0 15px gold;
  transition: 0.2s;
}

.prestige:hover {
  transform: scale(1.1);
  box-shadow: 0 0 25px gold;
}
.goldshop{
 margin-left: 500px;
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 12px 20px;
  background: rgb(46, 252, 207);
  color: black;
  border: none;
  border-radius: 10px;
  font-size: 1.3rem;
  cursor: pointer;
  transition: 0.2s;
}
  .goldshop:hover {
  transform: scale(1.1);
  
}
.goldshopcontainer {
  position: absolute;
  padding: auto;
  height:750px;
  width: 1200px;
  padding: 15px;
  background: rgb(8, 53, 47);
  border-radius: 10px;
  color: rgb(7, 3, 0);
 display: none;
}

.goldshopcontainer.open {
  display: block;
}
.stereobutton{
  margin-right: 100px;
   position: absolute;
  bottom: 20px;
  right: 20px;
  padding: 10px 15px;
  font-size: 1.2rem;
  background: rgba(0,0,0,0.4);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s ease;
}
.stereobutton:hover{
  transform: scale(1.1);
}
.ultraprestige{
  position: absolute;
  background: #9cf0f6;
  color:rgb(0, 0, 0);
  padding: auto;
  font-size: 1.2rem;
  cursor:pointer;
  box-shadow: 0,0,15px,#9dd0d4;
  bottom: 20px;
  left: 20px;
transition: 0.2s ease;
}
.ultraprestige:hover{
    transform: scale(1.1);
  }
  .craft{
    margin-top: 350px;
     position: absolute;
    background: #361f00;
    color:rgb(0, 0, 0);
     padding: auto;
     cursor: pointer;
     font-size: 1.2rem;
     top: 20px;
     left:20px;
     height: 50px;
     width: 200px;
  }
  .craftcontainer{
    position: absolute;
    display: none;
    height:750px;
  width: 1200px;
  background: #361f00;
  color: aliceblue;
  font-size: 1.2rem;
  cursor: pointer;
  padding: auto;
  
  }
  .craftcontainer.open{
    display:block;
  }