body {
  background-image: url(../andere/cookieBack.png);
  background-attachment: fixed;
  color:#000000;
}

.mainContainer {
  padding-top:20px;
  min-width:fit-content;
  margin-left: auto;
  margin-right: auto;
  width:50%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
}

.cookie {
  text-align:center;
}

.cookieButton {
  width:420px;
  height:420px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  background-image: url(../andere/keks.png);
  -webkit-tap-highlight-color: transparent;
}

.cookieButton:active,
.cookieButton.active {
    transform: scale(0.985);
    transition: transform 0.1s;
}

.upgradeB {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.upgradeButton {
  width:200px;
  height:150px;
  background-color:cadetblue;
}



#cpsText {
  right:0;
}

@media(min-width:1000px) {
  .mainContainer {
    zoom:120%;
  }
}

@media(max-width:800px) {
  .mainContainer {
    zoom:80%;
  }
}

@media(max-width:600px) { /*der Keks und die Upgrades werden kleiner, wenn man einen Bildschirm mit weniger als 600px(Handys, kleinere Tablets, etc.)*/
  .mainContainer {
    zoom:50%;
  }
}

#resetButtonContainer {
  position:fixed;
  bottom:10px;
  left:10px;
}

#resetButton {
  background-image: url(../andere/resetPic.png);
  background-size: contain;
  width:100px;
  height:100px;
  border-radius: 20%;
  border:none;
}

.cps {
  max-width:200px;
  padding-right:20px;
}

.stats {
  max-width:400px;
  backdrop-filter: blur(5px);
  display:flex;
  flex-direction:row;
}

.statText {
  display: inline;
}

/* css für die Keksklicker-Seite */