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; /* If vertical centering is needed as well */
  margin: 0 auto; /* Horizontally center the element */
  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; /* Keep it centered for mobile */
  }
}
.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 {
  display: flex;
  justify-content: space-between;
  gap: 0 10px;
  margin: 46px 0 0;
}
@media (max-width: 383px) {
  .main .actionButtonRow {
    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 .buyButton {
  display: flex;
  justify-content: center;
  min-width: 134px;
  font: 400 26px/1.23 "B612 Mono", Helvetica, Arial, serif;
  color: rgb(16, 11, 11);
  text-align: center;
  background-color: rgb(12, 255, 80);
  border-radius: 10px;
  padding: 8px 6px;
  outline: 3px solid rgb(230, 230, 230);
  outline-offset: -3px;
  cursor: pointer;
}
@media (max-width: 383px) {
  .main .buyButton {
    width: 100%;
    min-width: unset;
  }
}
.main .sellButton {
  display: flex;
  justify-content: center;
  min-width: 150px;
  font: 400 26px/1.23 "B612 Mono", Helvetica, Arial, serif;
  color: rgb(6, 6, 6);
  text-align: center;
  background-color: rgb(255, 18, 18);
  border-radius: 10px;
  padding: 8px 6px;
  outline: 3px solid rgb(230, 230, 230);
  outline-offset: -3px;
  cursor: pointer;
}
@media (max-width: 383px) {
  .main .sellButton {
    width: 100%;
    min-width: unset;
  }
}
.main .balanceButton {
  display: flex;
  justify-content: center;
  min-width: 134px;
  font: 400 26px/1.23 "B612 Mono", Helvetica, Arial, serif;
  color: rgb(16, 11, 11);
  text-align: center;
  background-color: rgb(140, 157, 203);
  border-radius: 10px;
  padding: 8px 6px;
  outline: 3px solid rgb(230, 230, 230);
  outline-offset: -3px;
  cursor: pointer;
}
@media (max-width: 383px) {
  .main .balanceButton {
    width: 100%;
    min-width: unset;
  }
}
.main .settingsButton {
  display: flex;
  justify-content: center;
  min-width: 150px;
  font: 400 26px/1.23 "B612 Mono", Helvetica, Arial, serif;
  color: rgb(6, 6, 6);
  text-align: center;
  background-color: rgb(140, 157, 203);
  border-radius: 10px;
  padding: 8px 6px;
  outline: 3px solid rgb(230, 230, 230);
  outline-offset: -3px;
  cursor: pointer;
}
@media (max-width: 383px) {
  .main .settingsButton {
    width: 100%;
    min-width: unset;
  }
}
.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;
  }
}
.main .historyButton {
  display: flex;
  justify-content: center;
  min-width: 134px;
  font: 400 26px/1.23 "B612 Mono", Helvetica, Arial, serif;
  color: rgb(16, 11, 11);
  text-align: center;
  background-color: rgb(140, 157, 203);
  border-radius: 10px;
  padding: 8px 6px;
  outline: 3px solid rgb(230, 230, 230);
  outline-offset: -3px;
  cursor: pointer;
}
@media (max-width: 383px) {
  .main .historyButton {
    width: 100%;
    min-width: unset;
  }
}
.main .expensesButton {
  display: flex;
  justify-content: center;
  min-width: 150px;
  font: 400 26px/1.23 "B612 Mono", Helvetica, Arial, serif;
  color: rgb(6, 6, 6);
  text-align: center;
  background-color: rgb(140, 157, 203);
  border-radius: 10px;
  padding: 8px 6px;
  outline: 3px solid rgb(230, 230, 230);
  outline-offset: -3px;
  cursor: pointer;
}
@media (max-width: 383px) {
  .main .expensesButton {
    width: 100%;
    min-width: unset;
  }
}
.main .profitsButton {
  display: flex;
  justify-content: center;
  min-width: 150px;
  font: 400 26px/1.23 "B612 Mono", Helvetica, Arial, serif;
  color: rgb(6, 6, 6);
  text-align: center;
  background-color: rgb(12, 255, 80);
  border-radius: 10px;
  padding: 8px 6px;
  outline: 3px solid rgb(230, 230, 230);
  outline-offset: -3px;
  cursor: pointer;
}
@media (max-width: 383px) {
  .main .profitsButton {
    width: 100%;
    min-width: unset;
  }
}

.tradeCard {
  /* ...existing styles... */
  position: relative;
}

.popupMessage {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 10px 20px;
  border-radius: 5px;
  color: #fff;
  z-index: 1000;
  transition: opacity 0.5s ease;
}

.popupSuccess {
  background-color: green;
}

.popupFailure {
  background-color: red;
}