@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap');
@import url('https://a.thered.sh/assets/fa/css/all.min.css');

@keyframes appear {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes appear-notif {
  0% {
    transform: translateX(-50%) translateX(50vw) translateY(100%);
  }
  5% {
    transform: translateX(-50%) translateX(50vw) translateY(0%);
  }
  95% {
    transform: translateX(-50%) translateX(50vw) translateY(0%);
  }
  100% {
    transform: translateX(-50%) translateX(50vw) translateY(100%);
  }
}

* {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
  color-scheme: dark;
}

body {
  background-color: #13131f;
  font-family:'Ubuntu Mono';
  font-size:16pt;
  color:white;
}

h1 {
  text-align:center;
  margin-top:20px;
   background: rgb(44,255,254);
background: linear-gradient(40deg, rgba(44,255,254,1) 0%, rgba(139,0,255,1) 50%, rgba(255,75,75,1) 100%);
  background-clip:text;
  -webkit-background-clip:text;
  color:#ffffff80;
}

.chatbox {
  display:none;
  width:60vw;
  height: calc(100vh - 270px);
  background-color: #191924;
  padding:20px;
  border: 1px #2A2A38 solid;
  color:white;
  overflow-x: hidden;
  overflow-y: scroll;
  /* margin-top:10px; */
  animation: appear 0.5s ease-in-out;
  animation-fill-mode:forwards;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 20px 0px #00000060;
  box-shadow: 0px 0px 20px 0px #00000060;
}

.chatbox > p {
  max-width: calc(80vw - 40px);
  color:white;
  font-size: 20px;
  word-wrap: break-word;
  word-break: break-all;
}

.textbox {
  display:none;
  margin:auto;
  background-color:#191924;
  padding:20px;
  padding-left: 60px;
  color:#CCCCE8;
  border: 1px #2A2A38 solid;
  width:60vw;
  margin-top:20px;
  font-family: 'Ubuntu Mono';
  animation: appear 0.5s ease-in-out;
  animation-fill-mode:forwards;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 20px 0px #00000060;
  box-shadow: 0px 0px 20px 0px #00000060;
  outline: none;
  font-size:20px;
}

.textbox:focus {
  /* outline: 1px #aabbcc solid; */
}

.textbox::placeholder {
  color: #76768C;
}

.message-bubble-icon {
  display:none;
  position:absolute;
  left: 40px;
  z-index:10;
  margin-top: 42px;
  color: #76768C80;
  animation: appear 0.5s ease-in-out;
  animation-fill-mode:forwards;
}

#leform {
  display:block;
  margin:auto;
  height:30px;
}

#leform > input[type=text] {
  display:inline-block;
  position:relative;
  padding:10px;
  padding-left: 20px;
  background-color: #20202b;
  color:#CCCCE8;
  font-family:'Ubuntu Mono';
  width:300px;
  border:none;
  outline:none;
  line-height:0;
  height:50px;
  border: 1px #2A2A38 solid;
  border-right: none;
  border-radius: 10px 0px 0px 10px;
  font-size:16px;
  -webkit-box-shadow: 0px 0px 20px 0px #00000060;
  box-shadow: 0px 0px 20px 0px #00000060;
}

span.label {
  color:#52526E;
  font-size:16px;
  display:block;
  margin-bottom:10px;
}

.submitbutton {
  display:inline-block;
  position:relative;
  padding: 0px 20px;
  /* line-height:0; */
  height:50px;
  border:none;
  margin-left:0px;
  background-color: #4A63FF;
  color:#CCCCE8;
  cursor:pointer;
  transition: all .1s ease-in-out;
  border: 1px #4A63FF solid;
  border-left: none;
  border-radius: 0px 10px 10px 0px;
  font-size:16px;
  font-family: "Font Awesome 6 Free";
  top:1px;
  -webkit-box-shadow: 0px 0px 20px 0px #00000060;
  box-shadow: 0px 0px 20px 0px #00000060;
}

.messages-container {
  display:table-cell;
  position:relative;
  margin:auto;
  padding-left: 20px;
  vertical-align: center;
}

.people {
  display:none;
  width: 20vw;
  padding: 20px;
  text-align:center;
  border: 1px #2A2A38 solid;
  border-radius: 10px;
  background-color:#191924;
  font-family: 'Ubuntu Mono';
  animation: appear 0.5s ease-in-out;
  animation-fill-mode:forwards;
  -webkit-box-shadow: 0px 0px 20px 0px #00000060;
  box-shadow: 0px 0px 20px 0px #00000060;
  color: #CCCCE8;
  font-size: 16px;
  overflow-y: scroll;
  vertical-align: center;
  max-width: 20vw;
  overflow-x: hidden;
}

.people-container {
  text-align:left;
  color: #BBBBD7;
  word-break: break-all;
}

.people-container p {
  text-align:left;
  color: #BBBBD7;
  line-height: 1.3;
  margin-top: 5px;
}

.people-container > p > p {
  display:inline-block;
}

.people-container > p > i {
  display:inline-block;
  margin-right: 10px;
}

.people-container p:first-child {
  margin-top: 10px;
}

.submitbutton:hover {
  background-color: #494F63;
  border-color: #494F63;
}

.containerthingy {
  display:block;
  margin:auto;
  text-align:center;
  width:fit-content;
  margin-top:10px;
}

.hahayes {
  display: table;
  table-layout: auto;
  vertical-align: center;
  margin-top: 10px;
}

.msg_username {
  color:#9D9DB0;
}

.msg_username::after {
  content: ":";
  color:white;
}

.msg_message {
  color:white;
  margin-left:10px;
}

.notif {
  width:fit-content;
  display:block;
  margin:auto;
  position:fixed;
  bottom:0;
  margin-bottom:10px;
  padding:10px;
  background-color: #aaaaff;
  color:black;
  font-family:'Ubuntu Mono';
  font-size:16pt;
  transform: translateX(-50%) translateX(50vw) translateY(100%);
  animation: appear-notif 5s ease-in-out;
  border-radius:10px;
}

.msg_message img {
  border-radius:10px;
  max-height:400px;
  background-color: black;
  max-width: 50vw;
}

.msg_message video {
  border-radius:10px;
  max-height:400px;
  background-color: black;
  max-width: 50vw;
}

/* scrollbar on chrome */

::-webkit-scrollbar {
  width: 6px;
  border-radius: 20px;
}

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 20px;
}

::-webkit-scrollbar-thumb {
  background: #37374a;
  border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
  background: #5a627b;
}

/* scrollbar on firefox */

* {
  scrollbar-color: #5a627b transparent;
}