@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
@import url("https://monstrousdev.github.io/themes/addons/user-tags.css");
@import url('https://commandcrafterhd.github.io/DiscordDarkNeon/css/usertags.css');
@import url("https://discord-custom-covers.github.io/usrbg/snippets/userPopouts.css");

:root, .theme-light {
  --rgb-highlight: 4, 217, 255;
  --highlight: var(--text-color);
  --background: #000900;
  --text-color: #4AEF98;
  --close-button: var(--dnd-color) !important;
  --online-color: #39ff14;
  --afk-color: #FFFF33;
  --dnd-color: #FF0000;
  --streaming-color: #bc13fe;
  --rs-online-color: var(--online-color);
  --rs-idle-color: var(--afk-color);
  --rs-dnd-color: var(--dnd-color);
  --rs-offline-color: gray;
  --rs-invisible-color: gray;
  --rs-streaming-color: var(--stream-color);
  --interactive-hover: var(--highlight);
  --interactive-active: var(--highlight);
  --text-link: var(--highlight);
  --bdfdb-blurple: var(--highlight);
  --logo-primary: var(--highlight);
  --focus-primary: var(--highlight);
  --radio-group-dot-foreground: var(--highlight);
  --scrollbar-thin-thumb: var(--highlight);
  --scrollbar-auto-thumb: var(--highlight);
  --scrollbar-auto-scrollbar-color-thumb: var(--highlight);
  --scrollbar-thin-track: var(--background);
  --scrollbar-auto-track: var(--background);
  --scrollbar-auto-scrollbar-color-track: var(--background);
  --activity-card-background: var(--background);
  --background-primary: var(--background);
  --background-mobile-primary: var(--background);
  --background-secondary: var(--background);
  --background-mobile-secondary: var(--background);
  --background-secondary-alt: var(--background);
  --background-tertiary: var(--background);
  --background-accent: var(--background);
  --background-floating: var(--background);
  --text-normal: var(--text-color);
  --text-muted: var(--text-color);
  --header-primary: var(--text-color);
  --header-secondary: var(--text-color);
  --channels-default:var(--text-color);
  --interactive-normal: var(--text-color);
  --channeltextarea-background: var(--background);
  --textbox-markdown-syntax: var(--background);
}

/* VERSION INFO */
.info-1VyQPT:last-child::after {
  content: "Fallout Terminal Version 1.2.1";
  font-size: 12px;
  line-height: 16px;
  color: var(--highlight);
}
/* VERSION INFO */

/* --== Change font ==-- */
html, body {
  font-family: 'Share Tech Mono', monospace;
}

/* --== Add CRT effect ==-- */
html,body::before, .theme-dark .perksModal-fSYqOq::before,
.standardSidebarView-3F1I7i::before, .userPopout-3XzG_A::before,
.inner-1ilYF7::before, .container-1CE3eW::before, .resultsGroup-r_nuzN::before,
.theme-dark .root-1gCeng::after, .container-1r6BKw.themed-ANHk51::after,
.drawerSizingWrapper-17Mss4::after, .layer-v9HyYc::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

/* --== Make sure everything's still clickable ==-- */
body *, .userPopout-3XzG_A * {
  pointer-events: auto;
}

/* --== Okay maybe not everything... ==-- */
.target-3LqNfV, .centerTarget-1vR_1-,
.spoilerText-3p6IlD.hidden-HHr2R9 .inlineContent-3ZjPuv .wrapper-3WhCwL,
.layer-2KE1M9 {
  pointer-events: none !important;
}

.autoPointerEvents-3UGDkq {
  pointer-events: auto !important;
}

.wordmarkWindows-1v0lYD svg {
  width: 0px;
}

/* Add custom title! */
.wordmarkWindows-1v0lYD::after {
  content: '';
  display: inline-block;
  -webkit-mask-image: url("https://commandcrafterhd.github.io/Fallout4TerminalTheme/svg/title.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  background-color: var(--highlight);
  width: 240px !important;
  height: 14px !important;
}

/* --== Styling custom User Popouts ==-- */

.popoutBanner-19WKGg {
  height: 120px;
}

.userPopout-xaxa6l {
	--USRBG-banner-height: 120px;
}

.avatarWrapperNormal-26WQIb {
  top: 76px;
}

.newMessagesBar-265mhP {
  background-color: var(--highlight);
}

.newMessagesBar-265mhP * {
  color: var(--background);
}

/* --== Style the unread message bar ==-- */
.isUnread-3Ef-o9 {
  border-color: var(--highlight);
}

.isUnread-3Ef-o9 .content-1o0f9g {
  color: var(--highlight);
  border: 1px solid var(--highlight);
}

.wrapper-2jXpOf:hover > .unread-2lAfLh {
  background-color: var(--highlight);
}

.unreadPill-2HyYtt {
  background-color: var(--highlight);
  color: var(--background);
}

.guildSeparator-33mFX6 {
  background-color: var(--highlight);
  border-radius: 2px;
}

.unreadPillCapStroke-7rkHbg {
  color: var(--highlight);
  fill: var(--highlight);
}

/* --== Re-color blue/gray button(s) ==-- */
.lookFilled-1Gx00P.colorBrand-3pXr91,
.theme-dark .lookFilled-1Gx00P.colorPrimary-3b3xI6,
.theme-dark .lookFilled-1Gx00P.colorGrey-2DXtkV {
  background-color: var(--background);
  color: var(--highlight);
  border: 1px solid var(--highlight);
  transition-duration: .3s;
}

.lookFilled-1Gx00P.colorBrand-3pXr91:hover,
.theme-dark .lookFilled-1Gx00P.colorPrimary-3b3xI6:hover,
.theme-dark .lookFilled-1Gx00P.colorGrey-2DXtkV:hover {
  background-color: var(--highlight);
  color: var(--background);
}

.theme-dark .lookLink-9FtZy-.colorPrimary-3b3xI6 {
  color: var(--highlight);
}

.theme-dark .lookLink-9FtZy-.colorPrimary-3b3xI6:hover > div {
  background-image: linear-gradient(0deg,transparent,transparent 1px,var(--highlight) 0,var(--highlight) 2px,transparent 0) !important;
}

/* --== Style home button ==-- */
.wrapper-1BJsBx.selected-bZ3Lue .childWrapper-anI2G9, .wrapper-1BJsBx:hover .childWrapper-anI2G9 {
  background-color: var(--highlight);
}

.wrapper-1BJsBx.selected-bZ3Lue .childWrapper-anI2G9 svg path, .wrapper-1BJsBx:hover .childWrapper-anI2G9 svg path {
  fill: var(--background);
}

.homeIcon-FuNwkv path {
  fill: var(--highlight);
}

/* --== Style GIF Picker text's ==-- */

.theme-dark .categoryText-2-8pri, .theme-light .categoryText-2-8pri  *{
  color: var(--highlight);
}

/* --== Style codeblocks and Markdown notation in Chat inputbox ==-- */
.codeBlockSyntax-2i-tMA, .syntaxAfter-hcA4AH, .syntaxBefore-1YQ9lW {
  color: var(--highlight);
}

/* --== Style "Create Server" popout ==-- */
.markup-2BOw-j code {
  border: 1px solid var(--highlight);
}

.colorHeaderPrimary-26Jzh- {
  color: var(--highlight);
}

.root-1gCeng, .theme-light .footer-2gL1pp {
  background-color: var(--background) !important;
}

/* --== Style server explorer ==-- */
.scroller-1d5FgU {
  background-color: var(--background);
}

.notice-2X5hT5 {
  background-color: var(--background);
  border: 1px solid var(--highlight);
}

/* --== Style Server Boost/Friends page ==-- */
.closeWrapper-9ScmSq, .theme-dark .perksModal-fSYqOq, .peopleList-3c4jOR, .peopleColumn-29fq28 {
  background-color: var(--background);
}

/* --== Style the emoji-autocomplete window ==-- */
.autocompleteInner-zh20B_ {
  background-color: var(--background);
}

/* --== Style the user popout ==-- */
.userPopout-3XzG_A {
  margin-right: 1vw;
  border: 1px solid var(--highlight);
}

.headerPlaying-j0WQBV, .theme-dark .body-3iLsc4, .theme-dark .footer-1fjuF6,
.headerTop-3C2Zn0 {
  background-color: var(--background);
}

.input-cIJ7To.focused-1mmYsC, .input-cIJ7To:focus {
  border: 1px solid var(--highlight);
}

.header-QKLPzZ {
  background-color: var(--background);
}

.headerFill-adLl4x {
  background-color: var(--background);
}

.lookFilled-1Gx00P.colorGreen-29iAKY, .lookInverted-2D7oAl.colorBrand-3pXr91 {
  background-color: var(--background);
  color: var(--highlight);
  transition-duration: .3s;
}

.lookFilled-1Gx00P.colorGreen-29iAKY:hover, .lookInverted-2D7oAl.colorBrand-3pXr91:hover {
  background-color: var(--highlight);
  color: var(--background);
}

/* --== Style search popout ==-- */
.input-2VB9rf {
  background-color: var(--background);
}

.inner-1ilYF7 * {
  font-family: 'Share Tech Mono', monospace;
}

.resultsGroup-r_nuzN {
  background-color: var(--background);
}

.resultsGroup-r_nuzN * {
  color: var(--highlight) !important;
}

.theme-dark .option-96V44q:after {
  display: none;
}

/* --== Style "Reactions" popout ==-- */
.theme-dark .container-1If-HZ, .theme-dark .reactors-Blmlhw, .theme-dark .scroller-1-nKid {
  background-color: var(--background);
}

/* --== Style payment page ==-- */
.theme-dark .paymentPane-3bwJ6A div, .theme-dark .codeRedemptionRedirect-1wVR4b {
  background-color: var(--background);
}

/* --== Style audio/video settings ==-- */
.css-1ye7vu0, .horizontal-1ae9ci>.flex-1xMQg5:last-child, .horizontal-1ae9ci>.flexChild-faoVW3:last-child {
  background-color: var(--background);
}

/* --== Style "activity" settings ==-- */
.theme-dark .notDetected-33MY4s, .theme-light .notDetected-33MY4s,
.theme-dark .addGamePopout-2RY8Ju {
  background-color: var(--background);
}

/* --== Style color picker ==-- */
.theme-dark .colorPickerCustom-2CWBn2 {
  background-color: var(--background);
}

/* --== Style phonenumber input ==-- */
.theme-dark .elevationBorderLow-2qgTRQ {
  background-color: var(--background);
}

/* --== Style create DM Group ==-- */
.nameTag-m8r81H {
  color: var(--highlight);
}

/* --== Style Keyboard shortcuts modal ==-- */
.theme-dark .keyboardShortcutsModal-3piNz7 {
  background-color: var(--background);
}

/* --== Style boost server plus and minus buttons ==-- */
.theme-dark .iconWrapper-3LVgIo {
  background-color: var(--background);
}

/* --== Style custom emoji upload page ==-- */
.theme-dark .card-FDVird:before, .emojiRow-zIc7ZX:focus-within .emojiRemove-1k6MlJ, .emojiRow-zIc7ZX:hover .emojiRemove-1k6MlJ,
.theme-dark .emojiAliasInput-1y-NBz .emojiInput-1aLNse {
  background-color: var(--background);
}

/* --== Style datepicker I suppose? Why is this stuff so convoluted?! ==-- */
.theme-dark .calendarPicker-2yf6Ci .react-datepicker,
.theme-dark .datePicker--XZbmJ .datePickerHint-3Q1Udw,
.theme-dark .datePicker--XZbmJ,
.theme-dark .calendarPicker-2yf6Ci .react-datepicker__current-month,
.theme-dark .calendarPicker-2yf6Ci .react-datepicker__header,
.theme-dark .calendarPicker-2yf6Ci .react-datepicker__day,
.theme-dark .calendarPicker-2yf6Ci .react-datepicker__day.react-datepicker__day--disabled, .theme-dark .calendarPicker-2yf6Ci .react-datepicker__day.react-datepicker__day--disabled:hover,
.datePicker--XZbmJ .datePickerHint-3Q1Udw .hint-165cR4 {
  background-color: var(--background);
}

/* --== Style upload modal ==-- */
.uploadModal-2ifh8j .inner-3nWsbo, .theme-dark .uploadModal-2ifh8j, .uploadModal-2ifh8j .footer-3mqk7D.hasSpoilers-1IRtQC {
  background-color: var(--background);
}

/* --== Style search panel ==-- */
.theme-dark .focused-2bY0OD {
  background-color: var(--background);
}

/* --== Style "Connected apps" info ==-- */
.formNotice-2_hHWR {
  background-color: var(--background);
}

/* --== Style Invite friends to this server modal ==-- */
.theme-dark .footer-1FPmkC {
  background-color: var(--background);
}

.input-cIJ7To.focused-1mmYsC, .input-cIJ7To:focus {
  border: none;
}

.theme-dark .checkBoxLabel-4PWfpk, .theme-dark .footerText-2a7NxZ, .theme-dark .subText-bCySlS {
  color: var(--highlight);
}

/* --== Style custom status ==-- */
.theme-dark .footer-2gL1pp {
  background-color: var(--background);
}

:root {
    /* Mine */
    --guild-width: 40px;
}

[data-popout-root],html {
    --brand-experiment: #738ADB; /* Discords new blue */   
}

[class^=blockedAction] {
    display: none !important;
}

[class^=sidebar] {
    
    width: 100px;
    transition: ease-in-out .2s all;
    z-index: 21;
    filter: blur(.5px) grayscale(60%) brightness(40%);
}

[class^=sidebar]:hover {
    width: 200px;
    filter: unset;
    box-shadow: none;
}
[class*=guilds] {
    z-index: 1;
    filter: blur(2px) grayscale(50%) brightness(15%);
    transition: ease-in-out .2s all;
    width: var(--guild-width);
}

[class*=guilds]:hover {
    width: 70px;
    z-index: 999;
    filter: unset;
}

/* Some boxes have hard colors for some reason */

/* Search box */
.theme-dark .container-3ayLPN {
    background-color: var(--background-floating);
}

/* Search box has some dumb alpha shit */
.theme-dark .option-96V44q:after {
    background: none;
}

/* Autocomplete: @ tags menu, giphy, tenor, etc */
.theme-dark [class^=autocomplete] {
    background-color: var(--background-tertiary);
}

/* When picking from giphy, tenor, etc; background highlight */
.theme-dark .selected-1Tbx07 {
    background-color: var(--background-primary);
}

/* When creating group dm */
.theme-dark .root-1gCeng {
    background-color: var(--background-tertiary);
}

/* When u click on a name, upper */
.theme-dark [class^=headerNormal] {
    background-color: var(--background-tertiary);
}

/* When u click on a name, lower */
.theme-dark [class^=body] {
    background-color: var(--background-primary);
}

/* Upload dialog */
.theme-dark [class^=uploadModal] {
    background-color: var(--background-secondary);
}

/* Upload dialog and when u click a name, lower half */
.theme-dark [class^=footer] {
    background-color: var(--background-primary);
}

/* Friends list has no color on its own?? */
[class^=peopleColumn] {
    background-color: var(--background-primary);
}

[class^=peopleListItem]:hover {
    border: 1px solid var(--background-secondary);
}

.outer-1AjyKL {
    background-color: var(--background-primary);
}

.reactionMe-wv5HKu {
    background-color: var(--background-accent);
    border: none;
}