.py-10 {
  padding-left: 10%;
  padding-right: 10%;
}

.my-10 {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.py-2-5 {
  padding-left: 2.5%;
  padding-right: 2.5%;
}

/* main speech bubble with text */
#board-description-wrapper {
  width: 77%;
  border-radius: 30% 40% 50% 70%;
  border: 4px black solid;
  padding: 1em;
  padding-bottom: 2em;
  position: relative;
}

/* larger mini speech bubble */
#board-description-wrapper::before {
  content: "";
  position: absolute;
  left: 95%;
  bottom: 100%;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 30% 40% 50% 70%;
  border: 4px solid black;
}

/* smaller mini speech bubble */
#board-description-wrapper::after {
  content: "";
  position: absolute;
  left: 90%;
  bottom: 128%;
  width: 1rem;
  height: 1rem;
  border-radius: 30% 40% 50% 70%;
  border: 4px solid black;
}

/* Box - Handling Hover Functionality in Character Equation Section */
.hover-box1 
{
    padding: 20px;
    position: relative;
}

.hover-box2 
{
    padding: 20px;
    position: relative;
}

.hover-box3 
{
    padding: 20px;
    position: relative;
}

.row 
{
  position: relative;
}

.equation-row 
{
  display: flex;            
  align-items: center;       
  justify-content: center;  
  gap: 20px;                 
}

.equationBoxesHealth 
{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 75vw;
  opacity: 0;
  visibility: hidden;
  border: 10px solid #ffc107;
}

.equationBoxesLiberty 
{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 75vw;
  opacity: 0;
  visibility: hidden;
  border: 10px solid #0d6efd;
}

.equationBoxesHappiness 
{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 75vw;
  opacity: 0;
  visibility: hidden;
  border: 10px solid #dc3545;
}


.hover-box1:hover ~ .equationBoxesHealth 
{
  opacity: 1;
  visibility: visible;
}

.hover-box2:hover ~ .equationBoxesLiberty
{
  opacity: 1;
  visibility: visible;
}

.hover-box3:hover ~ .equationBoxesHappiness 
{
  opacity: 1;
  visibility: visible;
}

#tiles-link {
  cursor: pointer;
}

h1,
h2,
#character-name,
#block-name,
#block-number,
.card-title,
#tiles-link {
  font-family: "Londrina Solid";
}

.stone-0 {
  background-color: #fffdc8;
}

.stone-1 {
  background-color: #b5c7a4;
}

.stone-2 {
  background-color: #b6cfeb;
}

.stone-3 {
  background-color: #c18daa;
}

.stone-4 {
  background-color: #f6a99d;
}

.stone-5 {
  background-color: #fadc9a;
}
@media (max-width: 600px){
  .main-container {
      padding: 10px;
  }
}