body {
  background-color: rgb(255, 255, 255);
}
.main {
  display: flex;
  gap: 20px;
}
.headerDiv {
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  width: 100%;
  font-family: monospace;
  text-align: center;
}
.leftCollumn {
  margin-top: 10px;
  width: 300px;
}
.rightCollumn {
  margin-top: 10px;
  width: 300px;
}
.menu {
  font-weight: bold;
  font-size: large;
}
.category {
  margin-bottom: 10px;
}
.hr {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
}
p {
  color: rgb(0, 0, 0);
  margin: 0px 4px;  
  width: fit-content;
}
.Button {
  background-color: rgb(200, 200, 200);
  color: rgb(0, 0, 0);
  border: 3px solid rgb(90, 90, 90);
  border-radius: 6px;
  padding: 1px 5px;
}
.Button:hover {
  background-color: #aaaaaa;
}
.Button:active {
  background-color: rgb(90, 90, 90);
  color: rgb(255, 255, 255);
}.buyButton {
  background-color: rgb(200, 200, 200);
  color: rgb(0, 0, 0);
  border: 3px solid rgb(90, 90, 90);
  border-radius: 6px;
  padding: 1px 5px;
  width: 100px;
}
.buyButton:hover {
  background-color: #aaaaaa;
}
.buyButton:active {
  background-color: rgb(90, 90, 90);
  color: rgb(255, 255, 255);
}
.div1:hover {
  background-color: rgb(255, 255, 255);
  transition: 0.7s;
}
.middleCollumn {
  margin-top: 10px;
  width: 300px;
}
.upgradeButton {
  background-color: rgb(240, 240, 240);
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1,4;
  height: 5em;
  overflow: hidden;
  width: 100%;
  border-radius: 8px;
  margin-bottom: 4px;
  display: none;
}
.upgradeButton:hover {
  background-color: rgb(225, 225, 225);
  transition: 50ms;
}
.upgradeTitle {
  margin: 0px auto;
  padding-bottom: 4px;
  font-weight: bold;
}
.upgradeCost {
  padding-left: 5px;
  font-weight: normal;
}
.upgradeText {
  color: rgb(49, 49, 49);
  margin: 0px auto;
}
.upgradeBonus {
  color: rgb(0, 0, 0);
  font-weight: bold;
}
.middlerightCollumn {
  margin-top: 10px;
  width: 300px;
}