body{
  background-color: #000;
  /*background-image: url('./Resources/images/cp-animated04.gif');
  background-repeat: no-repeat;
  background-size: cover; /* This will ensure your image covers the whole element */
}

.main {
    position: fixed;
    top: 50%;
    left: 50%;
    height: 1px;
    width: 1px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: -42vw -4vh 0px 0px #fff,25vw -41vh 0px 0px #fff,-20vw 49vh 0px 1px #fff,5vw 40vh 1px 1px #fff,29vw 19vh 1px 0px #fff,-44vw -13vh 0px 0px #fff,46vw 41vh 0px 1px #fff,-3vw -45vh 0px 1px #fff,47vw 35vh 1px 0px #fff,12vw -8vh 1px 0px #fff,-34vw 48vh 1px 1px #fff,32vw 26vh 1px 1px #fff,32vw -41vh 1px 1px #fff,0vw 37vh 1px 1px #fff,34vw -26vh 1px 0px #fff,-14vw -49vh 1px 0px #fff,-12vw 45vh 0px 1px #fff,-44vw -33vh 0px 1px #fff,-13vw 41vh 0px 0px #fff,-36vw -11vh 0px 1px #fff,-23vw -24vh 1px 0px #fff,-38vw -27vh 0px 1px #fff,16vw -19vh 0px 0px #fff,28vw 33vh 1px 0px #fff,-49vw -4vh 0px 0px #fff,16vw 32vh 0px 1px #fff,36vw -18vh 1px 0px #fff,-25vw -30vh 1px 0px #fff,-23vw 24vh 0px 1px #fff,-2vw -35vh 1px 1px #fff,-25vw 9vh 0px 0px #fff,-15vw -34vh 0px 0px #fff,-8vw -19vh 1px 0px #fff,-20vw -20vh 1px 1px #fff,42vw 50vh 0px 1px #fff,-32vw 10vh 1px 0px #fff,-23vw -17vh 0px 0px #fff,44vw 15vh 1px 0px #fff,-40vw 33vh 1px 1px #fff,-43vw 8vh 0px 0px #fff,-48vw -15vh 1px 1px #fff,-24vw 17vh 0px 0px #fff,-31vw 50vh 1px 0px #fff,36vw -38vh 0px 1px #fff,-7vw 48vh 0px 0px #fff,15vw -32vh 0px 0px #fff,29vw -41vh 0px 0px #fff,2vw 37vh 1px 0px #fff,7vw -40vh 1px 1px #fff,15vw 18vh 0px 0px #fff,25vw -13vh 1px 1px #fff,-46vw -12vh 1px 1px #fff,-18vw 22vh 0px 0px #fff,23vw -9vh 1px 0px #fff,50vw 12vh 0px 1px #fff,45vw 2vh 0px 0px #fff,14vw -48vh 1px 0px #fff,23vw 43vh 0px 1px #fff,-40vw 16vh 1px 1px #fff,20vw -31vh 0px 1px #fff,-17vw 44vh 1px 1px #fff,18vw -45vh 0px 0px #fff,33vw -6vh 0px 0px #fff,0vw 7vh 0px 1px #fff,-10vw -18vh 0px 1px #fff,-19vw 5vh 1px 0px #fff,1vw 42vh 0px 0px #fff,22vw 48vh 0px 1px #fff,39vw -8vh 1px 1px #fff,-6vw -42vh 1px 0px #fff,-47vw 34vh 0px 0px #fff,-46vw 19vh 0px 1px #fff,-12vw -32vh 0px 0px #fff,-45vw -38vh 0px 1px #fff,-28vw 18vh 1px 0px #fff,-38vw -46vh 1px 1px #fff,49vw -6vh 1px 1px #fff,-28vw 18vh 1px 1px #fff,10vw -24vh 0px 1px #fff,-5vw -11vh 1px 1px #fff,33vw -8vh 1px 0px #fff,-16vw 17vh 0px 0px #fff,18vw 27vh 0px 1px #fff,-8vw -10vh 1px 1px #fff;
    animation: zoom 16s infinite; 
    z-index: 0;
    }

@keyframes zoom {
    0%{
        transform: scale(.1);
    }
    100%{
        transform: scale(5);
    }
}

#chat-container {
    position: absolute;
    width: 99%;
    height: 90%;
    /*border-left: 1px solid white;*/
  }
  
  #chat-box {
    height: calc(100% - 150px);
    overflow-y: auto;
    /* Custom scrollbar styles */
    scrollbar-width: thin;
    scrollbar-color: white transparent;
}

/* For Webkit browsers like Chrome, Safari */
#chat-box::-webkit-scrollbar {
  width: 8px;
}

#chat-box::-webkit-scrollbar-thumb {
  background-color: white;
  border-radius: 4px;
}

#chat-box::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

#chat-box::-webkit-scrollbar-track {
  background: transparent;
}
  
  #chat-input {
    width: calc(100% - 60px);
    padding: 10px;
    border-radius: 5px 5px 5px 5px ;
  }
  
  #send-button,#microphone-button,#mute-button,#regen-button, #new-convo-button {
    padding: 5px;
    border-radius: 5px 5px 5px 5px ;
    cursor: pointer;
  }

  #new-convo-button {
    font-size: 35px;
    margin-right: 30%;
  }

  #microphone-button {
    font-size: 50px;
  }

 .dark-ui {
    border: 1px solid white;
    background-color: transparent;
    color: white;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    text-shadow: 1px 1px 2px black;
  }

  #live2d-selection, #tts-selection, #history-selection, #character-selection  {
    background-color:black;
  }
  
  #chat-input::placeholder {
    color: white;
    opacity: 0.5;
  }
  
  .message {
    margin: 5px;
    word-wrap: break-word; /* Automatic line breaks */
    color:white;
    font-family: 'Roboto', sans-serif;
    text-align: justify;
    text-shadow: 1px 1px 2px black;
    font-size: 18px;
}

  /* Style for messages aligned to the right (you) */
.message.you {
    color: gainsboro;
    font-style: italic;
  }
  
  /* Style for the bot's name */
.names {
    font-size: 16px;
    font-weight: bold;
  }
  
  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.5);
    }
    100% {
      transform: scale(1);
    }
  }
  
  .pulse {
    animation: pulse 1.5s infinite;
  }

  .center {
    text-align:center;
  }

  .justify {
    text-align:justify;
  }

  #video-container
  {
    text-align: center;
    position: relative;
    z-index: 2;
    background-color: rgba(0, 0, 0, 1);
    width: 250px;
    left: 50%;
    transform: translateX(-50%);
  }

  @media (max-width: 720px) {
    
    #chat-input {
      width: calc(100% - 50px);
      font-size: 14px;
    }
  
    .message {
      font-size: 14px;
    }
  
    .names {
      font-size: 12px;
    }

  }