/**
 * @name Stardust Void
 * @description Space-themed floating chat with shooting stars, falling particles and Space Grotesk font
 * @basetheme dark
 * @author Lowell
 * @version v1.0.0
 */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");

:root {
  --font-sans: "Space Grotesk", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* {
  font-family: var(--font-sans) !important;
}

html, body {
  background-color: #05060f !important;
}

html::before,
html::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 3px;
  height: 110px;
  background-image:
    radial-gradient(circle 2px at 50% 4px, #f4f7ff, transparent 65%),
    linear-gradient(180deg, rgba(244, 247, 255, 0.9) 0%, transparent 75%);
  z-index: 999998;
  pointer-events: none;
  opacity: 0;
}

html::before {
  top: -10%;
  left: 15%;
  transform: rotate(135deg);
  animation: fluxer-shoot-1 9s linear infinite;
}

html::after {
  top: -10%;
  left: 75%;
  height: 85px;
  transform: rotate(225deg);
  animation: fluxer-shoot-2 14s linear infinite;
  animation-delay: 4s;
}

@keyframes fluxer-shoot-1 {
  0%   { transform: translate3d(0, 0, 0) rotate(135deg); opacity: 0; }
  1%   { opacity: 1; }
  8%   { transform: translate3d(60vw, 60vh, 0) rotate(135deg); opacity: 0; }
  100% { transform: translate3d(60vw, 60vh, 0) rotate(135deg); opacity: 0; }
}

@keyframes fluxer-shoot-2 {
  0%   { transform: translate3d(0, 0, 0) rotate(225deg); opacity: 0; }
  1%   { opacity: 1; }
  7%   { transform: translate3d(-60vw, 60vh, 0) rotate(225deg); opacity: 0; }
  100% { transform: translate3d(-60vw, 60vh, 0) rotate(225deg); opacity: 0; }
}

body::before {
  content: "";
  position: fixed;
  inset: -890px 0 0 0;
  z-index: 999999;
  pointer-events: none;
  will-change: transform;
  mix-blend-mode: screen;
  filter: blur(0.4px);
  background-color: transparent;
  background-repeat: repeat;
  background-size: 210px 890px;
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, #9aa4c7, transparent),
    radial-gradient(1.5px 1.5px at 70px 210px, #f4f7ff, transparent),
    radial-gradient(1.5px 1.5px at 120px 390px, #9aa4c7, transparent),
    radial-gradient(2px 2px at 150px 470px, #f4f7ff, transparent),
    radial-gradient(1.5px 1.5px at 40px 610px, #9aa4c7, transparent),
    radial-gradient(1.5px 1.5px at 170px 740px, #f4f7ff, transparent),
    radial-gradient(1.5px 1.5px at 95px 820px, #9aa4c7, transparent);
  animation: fluxer-fall-fast 17s linear infinite;
  opacity: 0.9;
}

body::after {
  content: "";
  position: fixed;
  inset: -1240px 0 0 0;
  z-index: 999999;
  pointer-events: none;
  will-change: transform;
  mix-blend-mode: screen;
  filter: blur(0.5px);
  background-color: transparent;
  background-repeat: repeat;
  background-size: 340px 1240px;
  background-image:
    radial-gradient(2.5px 2.5px at 30px 50px, #f4f7ff, transparent),
    radial-gradient(3px 3px at 110px 310px, #2cb1bc, transparent),
    radial-gradient(2.5px 2.5px at 200px 560px, #f4f7ff, transparent),
    radial-gradient(3.5px 3.5px at 240px 830px, #7f5af0, transparent),
    radial-gradient(2.5px 2.5px at 60px 1040px, #f4f7ff, transparent),
    radial-gradient(3px 3px at 300px 1150px, #2cb1bc, transparent);
  animation: fluxer-fall-slow 29s linear infinite;
  opacity: 1;
}

@keyframes fluxer-fall-fast {
  0%   { transform: translate3d(0px, 0px, 0); }
  30%  { transform: translate3d(18px, 267px, 0); }
  60%  { transform: translate3d(-10px, 534px, 0); }
  100% { transform: translate3d(0px, 890px, 0); }
}

@keyframes fluxer-fall-slow {
  0%   { transform: translate3d(0px, 0px, 0); }
  35%  { transform: translate3d(-22px, 434px, 0); }
  70%  { transform: translate3d(14px, 868px, 0); }
  100% { transform: translate3d(0px, 1240px, 0); }
}

div[class*="ChannelChatLayout"][class*="container"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 19px !important;
  border: none !important;
}

div[class*="ChannelChatLayout"][class*="messagesArea"] {
  flex: 1 !important;
  margin: 0 8px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  outline: 1px solid rgba(255, 255, 255, 0.10) !important;
  outline-offset: -1px !important;
}

div[class*="ChannelChatLayout"][class*="textareaArea"] {
  margin: 0 -1px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  outline: 1px solid rgba(255, 255, 255, 0.10) !important;
  outline-offset: -1px !important;
}

div[class*="InputWrapper"][class*="box"] {
  border-radius: 16px !important;
  overflow: hidden !important;
  outline: 1px solid rgba(255, 255, 255, 0.08) !important;
  outline-offset: -1px !important;
}

div[class*="MemberListContainer"][class*="memberListContainer"] {
  background: rgba(23, 23, 23, 0.85) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  margin: 10px 10px 10px 0 !important;
  backdrop-filter: blur(10px) !important;
}

.ChannelIndexPage\.module__memberListDivider___Xzg2OD {
  background: none !important;
  display: none !important;
}

.ChannelListContent\.module__navigationContainer___XzdINz {
  background: rgba(23, 23, 23, 0.85) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  margin: 10px !important;
  backdrop-filter: blur(10px) !important;
}

div[class*="ChannelLayout"][class*="channelLayoutContainer"] {
  padding-left: 5px !important;
}

div[class*="UserArea"][class*="userAreaContainer"] {
  border-radius: 18px !important;
  overflow: hidden !important;
  margin: 0 10px 12px 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: inline-flex !important;
  width: auto !important;
}

div[class*="OutlineFrame"][class*="frame"],
div[class*="OutlineFrame"][class*="divider"],
div[class*="OutlineFrame"][class*="contentWrapper"],
div[class*="OutlineFrame"][class*="body"],
div[class*="GuildsLayout"][class*="contentContainer"],
div[class*="GuildLayout"][class*="guildLayoutContent"],
div[class*="GuildsLayout"][class*="userAreaWrapper"],
div[class*="UserArea"][class*="userAreaInnerWrapper"] {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

div[class*="UserArea"] {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.GuildHeader\.module__headerContainer___ZGNlOD,
.ChannelHeader\.module__headerContainer___XzkyNm {
  border: none !important;
  outline: none !important;
}

.GuildNavbar\.module__guildNavbarContainer___Xzc4Nm {
  background: transparent !important;
}

:root { --brand-primary: #6B50FF; }
:root { --brand-secondary: #6B50FF; }
:root { --background-primary: #171717; }
:root { --background-secondary: #171717; }
:root { --brand-primary-light: #6B50FF; }
:root { --background-secondary-alt: #171717; }
:root { --background-tertiary: #1A1A1A; }
:root { --background-header-primary: #171717; }
:root { --background-textarea: #1A1A1A; }
:root { --background-header-primary-hover: #1A1A1A; }
:root { --background-header-secondary: #1A1A1A; }
:root { --accent-danger: #FF388B; }
:root { --accent-info: #4949FF; }
:root { --alert-note-color: #FF60FF; }
:root { --accent-warning: #FF577D; }
:root { --accent-success: #00FFB2; }
:root { --button-primary-fill: #292929; }
:root { --button-primary-active-fill: #3331B2; }
:root { --button-danger-active-fill: #3331B2; }
:root { --button-danger-fill: #E23080; }
:root { --button-danger-outline-border: #3331B2; }
:root { --button-danger-outline-active-fill: #6B50FF; }
:root { --button-outline-border: #6B50FF; }
:root { --bg-code: #171717; }
:root { --background-modifier-accent: #3A3934; }
:root { --background-modifier-accent-focus: #C5CAD3; }
:root { --background-modifier-selected: #6B50FF; }
:root { --status-online: #00FFB2; }
:root { --status-idle: #FF985A; }
:root { --status-dnd: #FF388B; }
:root { --border-color: #3D3D3D; }
:root { --text-tertiary-muted: #7F899C; }
:root { --border-color-hover: #6B50FF; }
:root { --status-danger: #FF388B; }
:root { --markup-mention-fill: #3331B2; }
:root { --markup-interactive-hover-fill: #6B50FF; }
:root { --markup-mention-text: #6B50FF; }
:root { --markup-interactive-hover-text: #6B50FF; }
:root { --bg-secondary: #171717; }
:root { --bg-tertiary: #171717; }
:root { --bg-primary: #171717; }
:root { --bg-table-header: #171717; }
:root { --text-chat: #FFFAF1; }
:root { --text-primary: #FFFAF1; }
:root { --alert-tip-color: #00FFB2; }
:root { --text-link: #6B50FF; }
:root { --border-color-focus: #6B50FF; }
:root { --accent-purple: #6B50FF; }
:root { --alert-warning-color: #FF985A; }
:root { --background-modifier-hover: #1C1C1C; }
:root { --brand-primary-fill: #FFFFFF; }
:root { --alert-caution-color: #FF388B; }
:root { --background-secondary-lighter: #171717; }