@media (max-width: 600px) {


  


  html {
    overflow-x: hidden;
    overflow-x: clip;
  }

  body {
    overflow-x: hidden;
    overflow-x: clip;
  }

  .container {
    display: flex;
    flex-direction: column;
    padding: 5px;
    overflow-x: hidden;
  }

  .terminal {
    margin: 0px;
    width: 93%;
    margin-left: 0px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    padding: 5px;
  }

  .chatterminal {
    margin: 0px;
    width: 93%;
    display: flex;

    justify-content: flex-start;
    overflow: hidden;
    white-space: nowrap;
    padding: 5px;
    flex-wrap: wrap;

  }

  .queueList {
    overflow-y: scroll;
    white-space: pre-line;
    /* Allow lines to break horizontally */
    word-wrap: break-word;
    width: 38vh;
    margin: 0;
    height: 10%;

  }

  .chat-slate-bar-top {
    margin: 0;
    display: flex;
    white-space: nowrap;
    padding-bottom: 0;
    /* Enable horizontal scrolling */
    max-width: 110%;
    /* Adjust as needed */
    z-index: 1;
    /* Ensure the slate bar is above the chat messages */
  }

  .slate-bar-bottom {
    overflow-y: scroll;
    justify-content: left;
    align-items: center;
    /* Enable horizontal scrolling */
    white-space: nowrap;
    padding-bottom: 5px;
    max-width: 1000px;
    height: 50px;
    /* Adjust as needed */
    margin-top: -150px;
  }

  @media screen and (max-width: 570px) {
    .slate-bar-bottom {
      justify-content: left;
      align-items: center;
      /* Enable horizontal scrolling */
      white-space: nowrap;
      padding-bottom: 5px;
      width: 100%;
      /* Adjust as needed */
      margin-top: -110px;
    }
  }

  .slate-bar-top {
    height: 32px;
   overflow-x: scroll; /* Enable horizontal scrolling */
  flex-wrap: nowrap;
       line-height: 2;
       z-index: 999;

  }

  .slate-bar-text-left {
    display: none;
  }

  .slate-bar-text-right span {
    text-indent: -9999px;
  }

  .slate-bar-text-right {
    text-align: right;
    white-space: nowrap;
    
    
     overflow-x: scroll; 
  }

  .right-half {
    width: 100%;
  }

  .btn {
    margin: 5px;
  }

  #visualizer-container {
    width: 100%;
    height: 434px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px;
    z-index: 1;
    overflow: hidden;
    white-space: nowrap;
  }

  .centered-gif {
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: 434px;
    max-width: 100%;
  }

  .hidden {
    display: none;
  }

  .motd-bar {

    margin-top: -50px;


    height: 32px;
    margin-left: 0px;
    color: #fff;
    text-align: center;
    font-size: 18px;
    width: 93%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    margin-left: 0px !important;
  }




  [id*="tooltip"] {
    transform: scale(0.9);
    max-width: 90vw;


  }

  [class*="tooltip"] {
    transform: scale(0.9);
    max-width: 400px;
    padding: 0;
    margin-left: 25px;
    margin-top: -25px;
  }

  [class*="tooltip"]>* {
    margin: 0;
  }




  #chat-button {
    width: 100%;
  }

  #userButton {
    justify-content: right;
    align-items: right;

  }



  .slate-bar-bottom span {
    border: none;
    margin: 5px;
    border: 5px double steelblue;
  }

  body {
    max-height: 1000px;
  }





  .hide-span {
    display: none;
  }


  .queueList {

    height: auto;

  }

  .user-list {
    overflow-y: scroll;
    word-wrap: break-word;
    margin-top: 20px;
    margin-left: 20px;
    overflow-y: scroll;
  }

  .chat-messages {
    text-align: left;
    justify-content: left;
    /* Enable horizontal scrolling */
    overflow-y: auto;
    /* Enable vertical scrolling */
    white-space: pre-line;
    /* Allow lines to break horizontally */
    word-wrap: break-word;
    /* Ensure long words are broken correctly */
    /* Adjust height to fit content */
    margin-top: 0;
    margin-left: -5px;
    width: 100%;
    height: 445px;
  }

  .chat-main {
    position: absolute;
    margin-top: -15px;
    top: 0;
    width: 100%;
  }

  #chat-form {
    height: 100%;
  }

  .volumebar-container {
    display: none;
  }

  #shop-container .item p {
    overflow-wrap: break-word;
  }

.centered-gif-image,
.iot-image {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  z-index: 0;
}



}


@media (min-width: 2500px) {
  /* Existing styles */
  body {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 2500px !important;
  }

  .container {
    transform: scale(1.7);
  }

  /* Tooltip scaling */
  .tooltip {
    transform: scale(1.7);
  }
}

@media (min-width: 3500px) {
  /* Existing styles */
  body {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 3500px !important;
  }

  .container {
    transform: scale(2.2);
  }

  /* Tooltip scaling */
  .tooltip {
    transform: scale(2.2);
    position: absolute !important;
  }
}