html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.main.mainSection {
  min-height: 100vh; /* Full viewport height */
  display: flex;
  flex-direction: column;
  background-color: rgb(24, 24, 52);
}

.main .flex_col {
  display: flex;
  flex-direction: column;
  margin: 60px auto 0;
  width: 345px;
  max-width: 85%;
}

@media (max-width: 383px) {
  .main .flex_col {
    margin: 50px auto 0;
  }
}

.main .heroTitle {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center;
  margin: 0 auto;
  width: 63px;
  max-width: 85%;
  font: 400 128px/1.21 Asul, Helvetica, Arial, serif;
  color: rgb(255, 255, 255);
  text-align: center;
}

@media (max-width: 383px) {
  .main .heroTitle {
    margin: 0 auto;
  }
}

.main .heroSubtitle {
  display: flex;
  justify-content: center;
  margin: 18px auto 0;
  font: 400 40px/1.22 Asul, Helvetica, Arial, serif;
  color: rgb(255, 255, 255);
  text-align: center;
}

.main .actionButtonRow,
.main .breakButtonRow,
.main .dinnerButtonRow {
  display: flex;
  justify-content: space-between;
  gap: 0 10px;
  margin: 46px 0 0;
}

@media (max-width: 383px) {
  .main .actionButtonRow,
  .main .breakButtonRow,
  .main .dinnerButtonRow {
    flex-direction: column;
    align-items: center;
    gap: 30px 8px;
  }
}

.main .profitsButtonRow {
  display: flex;
  justify-content: space-between;
  gap: 0 10px;
  margin: 46px 0 0;
}

@media (max-width: 383px) {
  .main .profitsButtonRow {
    flex-direction: row;
    align-items: center;
    gap: 30px 8px;
  }
}

.main .secondaryButtonRow {
  display: flex;
  justify-content: space-between;
  gap: 0 10px;
  margin: 36px 0 0;
}

@media (max-width: 383px) {
  .main .secondaryButtonRow {
    flex-direction: column;
    align-items: center;
    gap: 30px 8px;
  }
}

.main button {
  display: flex;
  justify-content: center;
  min-width: 134px;
  width: 100%;
  font: 400 26px/1.23 "B612 Mono", Helvetica, Arial, serif;
  color: rgb(16, 11, 11);
  text-align: center;
  border-radius: 10px;
  padding: 8px 6px;
  outline: 3px solid rgb(230, 230, 230);
  outline-offset: -3px;
  cursor: pointer;
}

.main .cameButton,
.main .homeStart,  /* Add this */
.main .coffeeStartButton,
.main .dinnerStartButton,
.main .profitsButton,
.main .buyButton {
  background-color: rgb(12, 255, 80);
}

.main .leftButton,
.main .homeFinish,  /* Add this */
.main .sellButton {
  background-color: rgb(255, 18, 18);
  color: rgb(6, 6, 6);
}

.main .coffeeEndButton,
.main .dinnerEndButton {
  background-color: rgb(140, 157, 203);
}


@media (max-width: 383px) {
  .main button {
    min-width: unset;
  }
}

.main .profitsButtonRow {
  margin: 46px 0 0;
}

.main .historyButtonRow {
  display: flex;
  justify-content: space-between;
  gap: 0 10px;
  margin: 37px 0 0;
}

@media (max-width: 383px) {
  .main .historyButtonRow {
    flex-direction: column;
    align-items: center;
    gap: 30px 8px;
  }
}