/* style.css */

/* NAVBAR RESPONSIVENESS */
@media screen and (max-width: 570px) {
  .plant_clicker_logo img {
    width: 330px;
    height: auto;
  }
}

@media screen and (max-width: 400px) {
  .plant_clicker_logo img {
    width: 275px;
    height: auto;
  }
}

body {
  background: url('images/cobblestone.png');
}

#game-container {
  text-align: center;
  padding-top: 5rem; 
}

@media screen and (max-width: 1300px) {
  #game-container {
    padding-top: 5rem !important; 
  }
}

@media screen and (max-width: 1090px) {
  #game-container {
    padding-top: 7rem !important; 
  }
}

@media screen and (max-width: 1070px) {
  #game-container {
    padding-top: 10rem !important; 
  }
}

@media screen and (max-width: 1038px) {
  #game-container {
    padding-top: 13rem !important; 
  }
}

@media screen and (max-width: 990px) {
  #game-container {
    padding-top: 1rem !important; 
  }
}

.everything_container {
  height: 100%;
}

#score {
  margin-top: 20px;
  font-size: 24px;
}

#clicker {
  margin-top: 3rem;
  margin-bottom: 3rem;
  border: none;
  width: 300px; /* Adjust based on your image's aspect ratio */
  height: 300px; /* Adjust based on your image's aspect ratio */
  cursor: pointer;
}

@keyframes bounceWobble {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.2) rotate(5deg);
  }
  50% {
    transform: scale(1.2) rotate(0deg);
  }
  75% {
    transform: scale(1.2) rotate(-5deg);
  }
}

.bounceWobble {
  animation: bounceWobble 0.1s;
}

.power-up {
  width: 50px; /* Adjust based on the size of your PNG */
  height: 50px; /* Adjust based on the size of your PNG */
  cursor: pointer; /* Indicates clickable items */
  position: absolute;
}

/* Plant LVLS */

.plantLvl1 {
  background: url('images/lvl1plant.png') no-repeat center / contain;
  border: none;
  width: 300px; /* Adjust based on your image's aspect ratio */
  height: 300px; /* Adjust based on your image's aspect ratio */
  cursor: pointer;
}

.plantLvl2 {
  background: url('images/lvl2plant.png') no-repeat center / contain;
  border: none;
  width: 300px; /* Adjust based on your image's aspect ratio */
  height: 300px; /* Adjust based on your image's aspect ratio */
  cursor: pointer;
}

.plantLvl3 {
  background: url('images/lvl3plant.png') no-repeat center / contain;
  border: none;
  width: 300px; /* Adjust based on your image's aspect ratio */
  height: 300px; /* Adjust based on your image's aspect ratio */
  cursor: pointer;
}

.plantLvl4 {
  background: url('images/lvl4plant.png') no-repeat center / contain;
  border: none;
  width: 300px; /* Adjust based on your image's aspect ratio */
  height: 300px; /* Adjust based on your image's aspect ratio */
  cursor: pointer;
}

.plantLvl5 {
  background: url('images/lvl5plant.png') no-repeat center / contain;
  border: none;
  width: 300px; /* Adjust based on your image's aspect ratio */
  height: 300px; /* Adjust based on your image's aspect ratio */
  cursor: pointer;
}

/* Store Styling! */

#clickerStore {
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-family: "Pixelify Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

#clickerStore h1 {
  font-family: "Pixelify Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 70px;
  color: white;
}

#passiveStore {
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-family: "Pixelify Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

#passiveStore h1 {
  font-family: "Pixelify Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 70px;
  color: white;
}

#multiplier {
  font-family: "Bungee Spice", sans-serif;
  font-size: 30px;
  font-weight: 400;
  font-style: normal;
}

#passive {
  font-family: "Bungee Spice", sans-serif;
  font-size: 20px;
  font-weight: 400;
  font-style: normal;
  -webkit-text-stroke: 3px white;
}

#score {
  font-family: "Bungee Spice", sans-serif;
  font-size: 40px;
  font-weight: 400;
  font-style: normal;
}

#purchases {
  font-family: "Jersey 20", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Background for game section */

#game-section {
  background: url('images/pixel_garden.jpg')  center;
}

#passiveStore {
  background: url('images/storeShelf.png') center;
}

#clickerStore {
  background: url('images/storeShelf.png') center;
}