.dice-points {
    color: red;
  }

.upgrade-section {
  margin-bottom: 40px; /* Adjust the space between sections as needed */
}

.path-choice {
  padding: 20px 20px; 
  margin-right: 10px; /* Adjust the value as needed */
  font-size: 16px; 
  transition: transform 0.3s ease; 
}

.path-choice:last-child {
  margin-right: 0; /* No margin for the last button */
}

.path-choice:hover {
  transform: scale(1.1); 
}

.selected-tab {
  background-color: #04AA6D; /* Green */
  color: white;
}

.button:hover {
  background-color: #04AA6D; /* Green */
  color: white;
}

.prestige-button:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

/* styles for desktop devices */
@media only screen and (min-width: 992px) {
  body {
    font-size: 16px;
    width: 80%;
    margin: auto;
  }
}

/* styles for tablet devices */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  body {
    font-size: 14px;
    width: 90%;
    margin: auto;
  }
}

/* styles for mobile devices */
@media only screen and (max-width: 767px) {
  body {
    font-size: 12px;
    width: 100%;
    margin: 0;
  }
  .button {
    width: 80%;
  }
}

  body { /* no . means element type */
    text-align: center; /* text-align centers text AND children */
  }

  * { /* * applies to all elements, use with caution */
    outline: none;
  }

  #board {
    display: grid;
    margin-top: 20px; /* Adjust this value as needed */
    padding-top: 20px; /* Adjust this value as needed */
    position: relative;
    top: 20px; /* Adjust this value as needed */
    margin-left: 20px; /* Adjust this value as needed */
    padding-left: 20px; /* Adjust this value as needed */
    /*gap: 5px;*/
  }


  .square {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 1px solid #000;
    width: 50px;
    height: 50px;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
  }
  .square.highlight {
      background-color: yellow;
      border: 2px solid yellow;
  }
  .arrow {
      position: absolute;
      width: 0; 
      height: 0; 
      border-style: solid;
  }
  .up { 
      border-width: 0 5px 10px 5px;
      border-color: transparent transparent black transparent;
      top: -5px;
  }
  .down {
      border-width: 10px 5px 0 5px;
      border-color: black transparent transparent transparent;
      bottom: -5px;
  }
  .left {
      border-width: 5px 10px 5px 0;
      border-color: transparent black transparent transparent;
      left: -5px;
  }
  .right {
      border-width: 5px 0 5px 10px;
      border-color: transparent transparent transparent black;
      right: -5px;
  }
  .player {
      position: absolute;
      background-color: red;
      width: 20px;
      height: 20px;
      border-radius: 50%;
  }