body._404 {
  display: grid;
  width: 100vw;
  height: 100vh;
  font-size: 80px;
  justify-content: center;
  align-items: center; }

body#page__chat #vue_app main {
  width: 100vw;
  height: 100vh;
  background: #111; }
  body#page__chat #vue_app main .main_chat {
    --shadow_color: black;
    --shadow_size: calc(1em * 0.15);
    --shadow_offset: calc(1em * 0.1);
    position: absolute;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    width: 100%;
    height: max-content;
    bottom: 0;
    gap: 1.6rem;
    text-shadow: var(--shadow_size) var(--shadow_size) var(--shadow_offset) var(--shadow_color), calc(-1 * var(--shadow_size)) var(--shadow_size) var(--shadow_offset) var(--shadow_color), var(--shadow_size) calc(-1 * var(--shadow_size)) var(--shadow_offset) var(--shadow_color), calc(-1 * var(--shadow_size)) calc(-1 * var(--shadow_size)) var(--shadow_offset) var(--shadow_color), var(--shadow_size) var(--shadow_size) 0 var(--shadow_color), calc(-1 * var(--shadow_size)) var(--shadow_size) 0 var(--shadow_color), var(--shadow_size) calc(-1 * var(--shadow_size)) 0 var(--shadow_color), calc(-1 * var(--shadow_size)) calc(-1 * var(--shadow_size)) 0 var(--shadow_color), 0 0 var(--shadow_size) var(--shadow_color), 0 0 var(--shadow_offset) var(--shadow_color); }
    body#page__chat #vue_app main .main_chat .chat_msg_block,
    body#page__chat #vue_app main .main_chat .msg__height_test {
      position: relative;
      padding: 1.2rem;
      background: #222a;
      border-radius: 1rem; }
      body#page__chat #vue_app main .main_chat .chat_msg_block .msg_username,
      body#page__chat #vue_app main .main_chat .msg__height_test .msg_username {
        position: absolute;
        top: -0.8rem;
        left: 1.6rem;
        color: var(--clr);
        font-weight: 900;
        display: flex;
        gap: 0.8em;
        align-items: center; }
        body#page__chat #vue_app main .main_chat .chat_msg_block .msg_username .msg_username_badge img,
        body#page__chat #vue_app main .main_chat .msg__height_test .msg_username .msg_username_badge img {
          width: 1.2em;
          height: 1.2em;
          display: block;
          object-fit: contain; }
    body#page__chat #vue_app main .main_chat .msg__height_test {
      padding: 1.2rem 2.2rem;
      opacity: 0;
      pointer-events: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw; }
    body#page__chat #vue_app main .main_chat[anim='true'] .chat_msg_block {
      position: relative; }
      body#page__chat #vue_app main .main_chat[anim='true'] .chat_msg_block[rand='0'] {
        animation: msg_animation_0 0.5s ease-in-out 0s 1; }
      body#page__chat #vue_app main .main_chat[anim='true'] .chat_msg_block[rand='1'] {
        animation: msg_animation_1 0.7s ease-in-out 0s 1; }
      body#page__chat #vue_app main .main_chat[anim='true'] .chat_msg_block[rand='2'] {
        animation: msg_animation_2 0.6s ease-in-out 0s 1; }
    body#page__chat #vue_app main .main_chat .msg_message img {
      height: 2em;
      vertical-align: middle;
      width: calc(2em * var(--ratio, 1));
      object-fit: contain; }
    body#page__chat #vue_app main .main_chat .msg_message .zero-width {
      position: relative; }
      body#page__chat #vue_app main .main_chat .msg_message .zero-width img {
        position: absolute;
        right: 0.5em; }
  body#page__chat #vue_app main .main_no_channel {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    text-align: center;
    gap: 12px; }
    body#page__chat #vue_app main .main_no_channel .mono {
      font-family: monospace;
      background: #222;
      letter-spacing: 0.1em;
      font-size: 36px; }

body#page__chat[obs] #vue_app main {
  background: transparent; }

@keyframes msg_animation_0 {
  0% {
    top: var(--offset, 0);
    transform: rotate(0deg); }
  40% {
    transform: rotate(4deg); }
  60% {
    top: -0.5rem;
    transform: rotate(-2deg); }
  80% {
    transform: rotate(1deg);
    top: 0; }
  100% {
    transform: rotate(0deg); } }

@keyframes msg_animation_1 {
  0% {
    top: var(--offset, 0);
    transform: rotate(0deg); }
  30% {
    transform: rotate(-2deg); }
  70% {
    top: -0.3rem;
    transform: rotate(1deg); }
  100% {
    transform: rotate(0deg);
    top: 0; } }

@keyframes msg_animation_2 {
  0% {
    top: var(--offset, 0);
    transform: rotate(0deg); }
  30% {
    transform: rotate(4deg); }
  60% {
    top: -0.8rem;
    transform: rotate(-4deg); }
  80% {
    transform: rotate(2deg); }
  90% {
    transform: rotate(-1deg);
    top: 0; }
  100% {
    transform: rotate(0deg); } }

:root {
  --white: #fff;
  --black: #111;
  --dark_bg: #080808;
  --gold: #e6c24e; }

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
  color: var(--white);
  font-family: 'B612 Mono', monospace;
  box-sizing: border-box;
  max-width: 100vw;
  max-height: 100vh; }

html {
  font-size: var(--size, 20px); }

* {
  scrollbar-color: var(--white) var(--dark_bg);
  scrollbar-width: thin; }

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0; }

a {
  text-decoration: unset; }
  a:hover {
    opacity: 0.6; }
  a, a:active, a:visited {
    color: inherit; }