/* #bottom_menu{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333;
    color: white;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;
} */

@font-face {
  font-family: 'contb';
  src: url('/static/fonts/console_inspired_font/contb.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.console-font {
  font-family: 'contb', sans-serif;
}

#bottom_menu {
    position: fixed;
    /* Make this a flexbox so I can center items in it */
    display: flex;
    align-items: center;

    bottom: 0;
    height:70px;
    left: 20%;
    width: 60%;
    /* transform: translateX(-40%); */
    justify-content: space-evenly;
    align-items: center;
    /* width: 80%; */
    /* height: 7rem; Adjust based on your needs */
    background: #f0f0f0; /* Light background for visibility */
    border: #00BFFF;
    /* Make the border glow */
    box-shadow: 0 0 8px #00BFFF, 0 0 15px #00BFFF, 0 0 20px #00BFFF, 0 0 25px #00BFFF, 0 0 30px #00BFFF;
    /* Make the container have rounded corners */
    border-radius: 50px;
    background-image: url('/static/img/resorts.png');
    background-size: cover; /* Adjust based on your needs */
    background-position: center; /* Center the image */
    background-position: top; /* Focus on the top part of the image */
}



#current_time{
    font-size: 25px;
    font-weight: bold;
    color: #9148f2;
    margin: 0;
    /* Put along center of box */
    line-height: 100px;
    /* Center text horizontally */
    text-align: center;

}


.bubble_button:hover, .bubble_button:focus {
    transform: scale(1.05); /* Scale up button on hover/focus */
  }
  
.bubble_button:active {
    transform: scale(0.95); /* Scale down button on click */
  }

  .bubble_button {
    content:'';
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 50%;
    color: #b464f6; /* Adjust text color if needed */
    font-size: 14px; /* Adjust font size as necessary */
    text-align: center;
    line-height: 60px; /* Vertically center the text */
    cursor: pointer;
    outline: none;
    background: radial-gradient(circle at 35% 25%, #fff, transparent 70%),
                radial-gradient(circle at 80% 60%, #ff9, transparent 60%),
                radial-gradient(circle at 50% 50%, #0ff, transparent 50%),
                radial-gradient(circle at 60% 40%, #f0f, transparent 40%);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 
                inset 0 0 8px rgba(255, 255, 255, 0.8), 
                0 0 50px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
  }

  @media screen and (max-width: 600px) {
    #bottom_menu {
      height: 5rem;        /* Reduced height for mobile */
      width: 95%;          /* Wider relative width, if desired */
      border-radius: 30px; /* Adjusted radius */
      /* Optionally, if you want the menu fixed on mobile: */
      position: fixed;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }
    .bubble_button {
      width: 60px;        /* Smaller button width */
      height: 60px;       /* Smaller button height */
      line-height: 60px;  /* Center text vertically */
      font-size: 14px;    /* Smaller font size */
    }
    #current_time {
      font-size: 20px;    /* Adjusted text size */
      line-height: 60px;  /* To match button heights */
    }
  }