/* CSS Document */
* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   max-width: 100%;
   font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
   font-size: 16px;
   color: #FFFFFF;
   overflow-x: hidden;
   scroll-behavior: smooth;
}
*::-webkit-scrollbar-button {
   display: none;
}
*::-webkit-scrollbar-thumb {
   background-color: #999999;
   border-radius: 10px;
}
*::-webkit-scrollbar-track {
   background-color: rgba(0, 0, 0, 0);
   border-radius: 10px;
}
*::-webkit-scrollbar {
   width: 5px;
   height: 5px;
}
*::selection {
   background-color: #FFFFFF;
   color: #000000;
   box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, .5);
}
* [hidden] {
   display: none !important;
}
a {
   text-decoration: none;
}
html, body {
   display: block;
   background-color: #000000;
   min-height: 100vh;
   -ms-user-select: None;
   -moz-user-select: None;
   -webkit-user-select: None;
}
nav {
   position: fixed;
   top: 0;
   left: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   padding: 10px 25px;
   background-color: rgba(0, 0, 0, 0.75);
   background: linear-gradient(rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0));
   z-index: 10;
}
nav div {
   display: block;
   font-size: 2.5em;
   font-weight: 700;
}
nav div span {
   display: inline-flex;
   font-size: 0.75em;
   font-weight: 400;
   max-width: 45vw;
   overflow-x: auto;
}
nav a {
   display: block;
}
main {
   display: block;
}
main #chat {
   position: fixed;
   top: 0;
   left: 0;
   display: block;
   width: 100%;
   height: calc(100vh - 76px);
   padding: 60px 15px 10px 15px;
}
main #chat .chatBox {
   display: block;
   width: 75%;
   padding: 5px;
   margin: 2.5px 0px 2.5px auto;
   background-color: #000000;
   border: solid 0.5px #FFFFFF;
}
main #chat .chatBox span {
   display: block;
   width: 100%;
   padding: 5px 2.5px;
   font-weight: 750;
   text-align: right;
}
main #chat .chatBox p {
   display: block;
   width: 100%;
   height: auto;
   padding: 5px 2.5px;
   text-align: right;
   -ms-user-select: text;
   -moz-user-select: text;
   -webkit-user-select: text;
}
main #chat .chatBox[data-type='self'] {
   margin: 2.5px auto 2.5px 0px;
}
main #chat .chatBox[data-type='self'] span, main #chat .chatBox[data-type='self'] p {
   text-align: left;
}
main #chat .chatBox[data-type='lgn'] {
   padding: 0px;
   margin: 2.5px auto 2.5px auto;
   border: none;
   text-align: center;
}
main #chat .chatBox[data-type='lgn'] span {
   display: contents;
   width: auto;
   padding: 0px;
}
main #chat .chatBox[data-type='lgn'] p {
   display: none;
}
main #chatMsg {
   position: fixed;
   bottom: 0;
   left: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   height: 76px;
   padding: 10px 15px;
   background-color: rgba(255, 255, 255, 0.75);
   background: linear-gradient(rgba(0, 0, 0, 0) 10%, rgba(255, 255, 255, 1));
   z-index: 8;
}
main #chatMsg input[type=text] {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   width: 92.5%;
   height: 25px;
   padding: 2px;
   background-color: #000000;
   border: solid 0.5px #FFFFFF;
   resize: none;
   -ms-user-select: text;
   -moz-user-select: text;
   -webkit-user-select: text;
}
main #chatMsg input[type=button] {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   color: rgba(0, 0, 0, 0);
   background-color: rgba(0, 0, 0, 0);
   border: solid 0.5px #FFFFFF;
   cursor: pointer;
   z-index: 2;
}
main #chatMsg #cssSendIcon {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 7.5%;
   height: 25px;
   background-color: #000000;
   cursor: pointer;
}
main #chatMsg #cssSendIcon::before {
   content: '➼';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   display: block;
   color: #FFFFFF;
}
main #chatMsg #cssSendIcon:hover::before {
   animation: aniSendIconHov 1s infinite;
}
@keyframes aniSendIconHov {
   0% {
      transform: translate(-50%, -50%);
   }
   25% {
      transform: translate(-10%, -50%);
   }
   75% {
      transform: translate(-90%, -50%);
   }
   100% {
      transform: translate(-50%, -50%);
   }
}
#main #chatMsg #cssSendIcon:hover, #main #chatMsg #cssSendIcon:hover::before {
   pointer-events: none;
}
main #chatUsr {
   position: fixed;
   top: 2%;
   left: 50%;
   display: block;
   max-width: 50%;
   transform: translateX(-50%);
   z-index: 100;
   opacity: 0.5;
}
main #chatUsr span {
   display: flex;
   flex-flow: row;
   align-items: center;
   justify-content: flex-start;
   width: auto;
   height: 25px;
   margin: 2.5px 5px;
   padding: 5px;
   color: #000000;
   background-color: #FFFFFF;
   overflow: hidden;
}
main #chatUsr span b {
   display: block;
   width: 8px;
   margin: 0px 5px 0px 0px;
   color: #888888;
   transform: scale(1.5);
}
main #chatUsr span b[data-online='1'] {
   color: #00FF00;
}
main #chatUsr span b[data-online='0'] {
   color: #FF0000;
}
main header {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-flow: column;
   width: 100%;
   height: 100vh;
}
main header h1 {
   display: block;
   font-size: 2.5em;
   font-weight: 700;
   margin-bottom: 20px;
}
main #login {
   display: flex;
   flex-flow: column;
   align-items: center;
   justify-content: flex-start;
   width: 40%;
   padding: 10px 20px;
   background-color: rgba(0, 0, 0, 0.5);
}
main #login input {
   display: block;
   width: 90%;
   height: 40px;
   margin: 10px 0px;
   padding: 10px;
   background-color: rgba(0, 0, 0, 0.5);
   border: none;
   text-align: center;
   transition: 0.5s;
   overflow: hidden;
   -ms-user-select: text;
   -moz-user-select: text;
   -webkit-user-select: text;
}
main #login input:hover, main #login input:focus {
   background-color: rgba(0, 0, 0, 0.75);
   border: none;
}
main #login input[fail] {
   border: 1px solid red;
}
main #error {
   display: block;
   padding: 10px;
   font-size: 2em;
   font-weight: 750;
}
main #errorTtl {
   display: block;
   padding: 5px;
   font-size: 1.5em;
   font-weight: 750;
}
main #errorTxt {
   display: block;
   padding: 2.5px;
   font-size: 1em;
   font-weight: 750;
}
nav:hover ~ footer, footer:hover {
   left: 0;
   opacity: 1;
}
footer {
   position: fixed;
   top: 0;
   left: -29.5%;
   display: flex;
   flex-flow: column;
   align-items: center;
   justify-content: center;
   width: 30%;
   height: 100%;
   padding: 10px 25px;
   background-color: rgba(255, 255, 255, 0.75);
   background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
   -ms-user-select: None;
   -moz-user-select: None;
   -webkit-user-select: None;
   opacity: 0;
   z-index: 9;
   transition: 0.5s;
}
footer ul {
   display: flex;
   flex-flow: column;
   align-items: center;
   justify-content: center;
   margin-top: 10%;
}
footer ul li {
   list-style: none;
   padding: 0px 5px;
}
footer ul li a {
   font-size: 2em;
   color: #000000;
   transition: 0.5s;
}
footer ul li a:hover {
   text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
   cursor: pointer;
}
@media only screen and (max-width:800px) {
   main #chatUsr {
      max-width: 90%;
      opacity: 0.95;
      transform: scale(1.3);
   }
   footer {
      left: -47.5%;
      width: 50%;
   }
}
@media only screen and (max-width:500px) {
   * {
      font-size: 13px;
   }
   nav {
      flex-flow: column;
   }
   nav div {
      margin-bottom: 20px;
   }
   nav a {
      display: none;
   }
   main #chat .chatBox {
      width: 90%;
   }
   main #chat .chatBox[data-type='lgn'] {
      font-size: 10px;
   }
   footer {
      left: -71%;
      width: 75%;
   }
}