#snackbar {
    visibility: hidden;
    justify-self: center;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    top: 50%;
    height: 50px;
    width:calc( max(var(--min-game-width), min(calc(min(calc(100vh / 1.946), 100vw) * 0.7), var(--max-game-width))) * 0.7);
    /* min-width: 100px; Set a default minimum width */
    /* margin-left: 50px; */
    background-color: #333; /* Black background color */
    color: #fff; /* White text color */

    border-radius: 2px; /* Rounded borders */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    /* left: 50%;  */
        /* bottom: 30px; 30px from the bottom */
  }
  
  /* Show the snackbar when clicking on a button (class added with JavaScript) */
  #snackbar.show {
    visibility: visible; /* Show the snackbar */
    /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
    However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
  }
  
  /* Animations to fade the snackbar in and out */
  @-webkit-keyframes fadein {
    from { opacity: 0;}
    to { opacity: 1;}
  }
  
  @keyframes fadein {
    from { opacity: 0;}
    to { opacity: 1;}
  }
  
  @-webkit-keyframes fadeout {
    from { opacity: 1;}
    to { opacity: 0;}
  }
  
  @keyframes fadeout {
    from { opacity: 1;}
    to { opacity: 0;}
  }