@font-face {
  font-family: "8-bit operator";
  src: url("assets/static/fnt_main.woff");
  font-display: swap;
}

* {box-sizing: border-box}
html, body {
  margin: 0; padding: 0;
  height: 100%; width: 100%;
  background: #313338; overflow: hidden;
  font-family: "8-bit operator", monospace;
  font-smooth: never; -webkit-font-smoothing: none;
}

/*//////////////////////////////////////////////////////////////////////*/

.bg {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  height: 100vh; width: auto;
  image-rendering: pixelated;
  z-index: 0;
}

.ground {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 14px;
  background: #004fdf;
  opacity: 0; z-index: 1;
}

.dim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 1;
  pointer-events: none;
}

/*//////////////////////////////////////////////////////////////////////*/

.page {
  position: relative;
  z-index: 2; top: 0;
  display: flex; flex-direction: column;
  height: 100%;
  padding: 12px;
}

.top {
  display: flex;
  align-items: center; gap: 16px;
  padding: 8px 14px;
  background: rgba(30,31,34,0.75);
  border: 2px solid white;
  color: #f2f3f5;
}

.presence {flex: 1}

.join {
  text-decoration: none;
  padding: 4px 14px;
  background: #000000;
  border: 2px solid white;
}
.join:hover {--ink: #ffff00}

/*//////////////////////////////////////////////////////////////////////*/

.panels {
  display: flex; flex: 1;
  min-height: 0;
}

.chat {
  flex: 1; background-color: #36393f;
  border: 2px solid white;
  overflow: hidden;
  background: transparent;
}
.chat widgetbot {
  display: block;
  width: 100%; height: 100%;
}
.chat iframe {
  display: block;
  width: 100%; height: 100%;
  border: none;
}

.members {
  width: 260px;
  display: flex; flex-direction: column;
  background: rgba(43,45,49,0.8);
  border: 2px solid white;
  padding: 10px; min-height: 0;
}

.memberlist {
  overflow-y: auto; flex: 1;
  scrollbar-width: none;
}
.memberlist::-webkit-scrollbar {display: none}

.member {
  display: flex;
  align-items: center; gap: 10px;
  padding: 4px 6px;
}
.member:hover {background: rgba(255,255,255,0.06)}

.avatarwrap {position: relative; flex-shrink: 0}
.avatar {
  width: 32px; height: 32px;
  display: block;
}
.statusdot {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 12px; height: 12px;
  border: 3px solid #2b2d31;
}
.statusdot.online {background: #23a55a}
.statusdot.idle {background: #f0b232}
.statusdot.dnd {background: #f23f43}
.statusdot.offline {background: #80848e}

.memberinfo {min-width: 0}
.membername, .membergame {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.membererror {padding: 6px}

@media (max-width: 800px) {
  .members {display: none}
}

/*//////////////////////////////////////////////////////////////////////*/

.font {
  position: relative;
  display: inline-block;
  line-height: var(--lh, 16px);
  filter: drop-shadow(1px 1px 0 #000000);
}

.font .word {
  display: inline-block;
  white-space: nowrap;
  vertical-align: top;
}

.font .glyph {
  position: relative; display: inline-block;
  vertical-align: top;
  width: var(--gs); height: var(--lh, 16px);
  overflow: hidden; color: transparent;
  font-size: calc(var(--font-size, 16px) * 1.3);
  line-height: var(--lh, 16px);
  white-space: pre;
}

.font .glyph::before {
  content: "";
  position: absolute;
  top: 0; left: var(--go); width: var(--gw); height: var(--gh);
  background-color: var(--ink, #ffffff);
  -webkit-mask-image: var(--atlas); mask-image: var(--atlas);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: var(--gp); mask-position: var(--gp);
  image-rendering: pixelated;
  pointer-events: none;
}

.font .glyphx {
  display: inline-block;
  vertical-align: top;
  line-height: var(--lh, 16px);
  color: var(--ink, #ffffff);
}

.font ::selection {
  background-color: #3c64ff;
  color: transparent;
}

/*//////////////////////////////////////////////////////////////////////*/

.floradin {
  position: fixed;
  right: 80px; bottom: 6px; width: 153px;
  image-rendering: pixelated;
  z-index: 3; pointer-events: none;
  user-select: none; will-change: transform;
  animation: dance 2.6s linear infinite;
}

/* stolen from a site i haven't even released yet */
@keyframes dance {
  0% {transform: translate(12px, -1px) scaleX(1)} 1.149% {transform: translate(30px, -20px) scaleX(1)}
  2.299% {transform: translate(33px, -39px) scaleX(1)} 3.448% {transform: translate(38px, -47px) scaleX(1)}
  4.598% {transform: translate(50px, -60px) scaleX(1)} 5.747% {transform: translate(60px, -52px) scaleX(1)}
  6.897% {transform: translate(64px, -36px) scaleX(1)} 8.046% {transform: translate(72px, 1px) scaleX(1)}
  9.195% {transform: translate(74px, 13px) scaleX(1)} 9.196% {transform: translate(74px, 13px) scaleX(-1)}
  10.345% {transform: translate(67px, -24px) scaleX(-1)} 11.494% {transform: translate(57px, -45px) scaleX(-1)}
  12.644% {transform: translate(54px, -49px) scaleX(-1)} 13.793% {transform: translate(49px, -62px) scaleX(-1)}
  14.943% {transform: translate(28px, -68px) scaleX(-1)} 16.092% {transform: translate(22px, -64px) scaleX(-1)}
  17.241% {transform: translate(17px, -40px) scaleX(-1)} 18.391% {transform: translate(14px, -23px) scaleX(-1)}
  19.540% {transform: translate(2px, 12px) scaleX(-1)} 20.690% {transform: translate(-3px, 7px) scaleX(-1)}
  21.839% {transform: translate(-6px, -2px) scaleX(-1)} 22.989% {transform: translate(-9px, -10px) scaleX(-1)}
  24.138% {transform: translate(-12px, -17px) scaleX(-1)} 25.287% {transform: translate(-18px, -25px) scaleX(-1)}
  26.437% {transform: translate(-21px, -22px) scaleX(-1)} 27.586% {transform: translate(-24px, -15px) scaleX(-1)}
  28.736% {transform: translate(-26px, 7px) scaleX(-1)} 29.885% {transform: translate(-27px, 9px) scaleX(-1)}
  29.886% {transform: translate(-27px, 9px) scaleX(1)} 31.035% {transform: translate(-26px, -3px) scaleX(1)}
  32.184% {transform: translate(-25px, -8px) scaleX(1)} 33.333% {transform: translate(-16px, -19px) scaleX(1)}
  34.483% {transform: translate(-12px, -22px) scaleX(1)} 35.632% {transform: translate(-9px, -25px) scaleX(1)}
  36.782% {transform: translate(-7px, -28px) scaleX(1)} 37.931% {transform: translate(1px, -8px) scaleX(1)}
  39.081% {transform: translate(5px, 7px) scaleX(1)} 40.230% {transform: translate(5px, 5px) scaleX(1)}
  41.380% {transform: translate(5px, -9px) scaleX(1)} 41.381% {transform: translate(5px, -9px) scaleX(-1)}
  42.529% {transform: translate(-7px, -30px) scaleX(-1)} 43.678% {transform: translate(-12px, -36px) scaleX(-1)}
  44.828% {transform: translate(-15px, -37px) scaleX(-1)} 45.977% {transform: translate(-22px, -41px) scaleX(-1)}
  47.127% {transform: translate(-29px, 1px) scaleX(-1)} 48.276% {transform: translate(-38px, 16px) scaleX(-1)}
  48.277% {transform: translate(-38px, 16px) scaleX(1)} 49.426% {transform: translate(-33px, -1px) scaleX(1)}
  50.575% {transform: translate(-32px, -5px) scaleX(1)} 51.724% {transform: translate(-24px, -25px) scaleX(1)}
  52.874% {transform: translate(-20px, -32px) scaleX(1)} 54.023% {transform: translate(-13px, -35px) scaleX(1)}
  55.173% {transform: translate(-9px, -36px) scaleX(1)} 56.322% {transform: translate(-3px, -34px) scaleX(1)}
  57.471% {transform: translate(-1px, -19px) scaleX(1)} 58.621% {transform: translate(0px, -4px) scaleX(1)}
  59.770% {transform: translate(1px, 6px) scaleX(1)} 60.920% {transform: translate(3px, 0px) scaleX(1)}
  62.069% {transform: translate(0px, -3px) scaleX(1)} 62.070% {transform: translate(0px, -3px) scaleX(-1)}
  63.219% {transform: translate(-2px, -7px) scaleX(-1)} 64.368% {transform: translate(-5px, -12px) scaleX(-1)}
  65.517% {transform: translate(-10px, -18px) scaleX(-1)} 66.667% {transform: translate(-12px, -19px) scaleX(-1)}
  67.816% {transform: translate(-15px, -22px) scaleX(-1)} 68.966% {transform: translate(-16px, -20px) scaleX(-1)}
  70.115% {transform: translate(-19px, 1px) scaleX(-1)} 71.264% {transform: translate(-20px, 3px) scaleX(-1)}
  71.265% {transform: translate(-20px, 3px) scaleX(1)} 72.414% {transform: translate(-17px, -10px) scaleX(1)}
  73.563% {transform: translate(-14px, -20px) scaleX(1)} 74.713% {transform: translate(-3px, -33px) scaleX(1)}
  75.862% {transform: translate(2px, -33px) scaleX(1)} 77.012% {transform: translate(7px, -27px) scaleX(1)}
  78.161% {transform: translate(13px, -14px) scaleX(1)} 79.310% {transform: translate(19px, 8px) scaleX(1)}
  80.460% {transform: translate(21px, -1px) scaleX(1)} 81.609% {transform: translate(23px, -13px) scaleX(1)}
  82.759% {transform: translate(26px, -20px) scaleX(1)} 83.908% {transform: translate(36px, -37px) scaleX(1)}
  85.058% {transform: translate(43px, -36px) scaleX(1)} 86.207% {transform: translate(47px, -38px) scaleX(1)}
  87.356% {transform: translate(51px, -28px) scaleX(1)} 88.506% {transform: translate(58px, -3px) scaleX(1)}
  89.655% {transform: translate(62px, 12px) scaleX(1)} 89.656% {transform: translate(62px, 12px) scaleX(-1)}
  94.8% {transform: translate(38px, -24px) scaleX(-1)} 97.5% {transform: translate(24px, -32px) scaleX(-1)}
  98% {transform: translate(18px, -18px) scaleX(-1)} 99% {transform: translate(14px, -5px) scaleX(-1)}
  99.001% {transform: translate(14px, -5px) scaleX(1)} 100% {transform: translate(12px, -1px) scaleX(1)}
}