body {
  color: #222;
  background: transparent;
}
.msgWrapper {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: clip;
}
.allMessages {
 border-radius: 5px;
 font-family: Arial, sans-serif;
 font-size: 10pt;
 width: calc(95% - 60px);
 padding: 10px;
 position: relative;
 border: solid 1px #000;
 margin-top: 5px;
 transition: margin-bottom 500ms ease-out;
 transition-delay: 250ms;
}
.msgWrapper + .msgWrapper {
  margin-top: 5px;
  margin-bottom: 5px;
}
.allMessages.containsOnlyEmojis .emoji {
    height: 50px;
}
.allMessages.pm {
  padding-top: 26px;
}
.allMessages.pm:before {
  content: "[Private Message]";
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 16px;
  padding: 5px;
  width: calc(100% - 10px);
  position: absolute;
  right: 0;
  top: 0;
  font-size: 8pt;
  font-weight: bold;
  color: #F33;
}
#timestamp {
    display: none;
}
.sent {
 background-color: #fff;
 color: #111;
 border-color: #CCC;
}
.sent:after {
 content: " ";
 background-color: inherit;
 height: 10px;
 width: 10px;
 position: absolute;
 right: -6px;
 bottom: 6px;
 transform: rotateZ(45deg);
 border-radius: 0 2px 0 0;
 border-right: solid 1px #CCC;
 border-top: solid 1px #CCC;
}
.msgWrapper:has(.sent){
  flex-direction: row-reverse;
}
/* Default Pfp below */
.msgWrapper:has(.sent, .recieved):before {
  content: " ";
  width: 30px;
  height: 30px;
  background-color: #FFF;
  background-image: url(/media/user2.jpg);
  background-size: 100% auto;
  display: inline-block;
  margin: 2px;
  margin-left: 15px;
  border-radius: 50%;
  transition: margin-bottom 500ms ease-out;
  transition-delay: 250ms;
}
.msgWrapper:has(.recieved):before {
  margin-left: 0;
  margin-right: 15px;
}
.msgWrapper:has(.sent:hover, .recieved:hover):before {
  margin-bottom: calc(10pt + 12px);
}
/* Custom Pfps below */
.msgWrapper:has(.allMessages[uid="kaW7woNk6lXjj2e8LxWDywo4LAG2"]):before {
  background-image: url(https://andrew-grider.com/media/me-min.png);
}
.msgWrapper:has(.allMessages[uid="qDQkWftkPIMyUDJppSHQTVJI6ex2"]):before {
  background-image: url(https://dexaroth.neocities.org/favicon.gif);
}
.recieved:after {
 content: " ";
 background-color: inherit;
 height: 10px;
 width: 10px;
 position: absolute;
 left: -6px;
 bottom: 6px;
 transform: rotateZ(45deg);
 border-radius: 0 0 0 2px;
 border-left: solid 1px #0d6efd;
 border-bottom: solid 1px #0d6efd;
}
.recieved {
 background-color: #0d6efd;
 color: #fff;
 border-color: #0d6efd;
}
.recieved .senderInfo:has(.mod, .owner, .beta):after {
  filter: invert(100%) contrast(1.5);
}
.allMessages:hover {
   margin-bottom: calc(10pt + 10px);
}
.sent:hover:before {
   content: attr(time);
   position: absolute;
   right: 5px;
   top: calc(100% + 5px);
   z-index: 3;
   pointer-events: none;
   font-style: italic;
   font-size: 10pt;
   color: #000;
   width: 100vw;
   text-align: right;
}
.received:hover:before {
   content: attr(time);
   position: absolute;
   left: 5px;
   top: calc(100% + 5px);
   z-index: 3;
   pointer-events: none;
   font-style: italic;
   font-size: 10pt;
   width: 100vw;
   color: #000;
}
blockquote {
 background-color: #777;
 color: #111;
 border-color: #000;
}
#background {
 background: transparent;
 scrollbar-color: #000 transparent;
 scrollbar-width: thin;
}
#input, #nameEntry {
 color: #111;
 background: #FFF;
 border: none;
 outline: none;
}
#input:empty::before {
 content: "Send a message...";
 color: #777;
}
.badge {
  display: none;
}
.senderInfo:has(.mod, .owner, .beta):after {
 content: " ";
 height: 10pt;
 width: 10pt;
 background: transparent;
 border-radius: 50%;
 background-image: url(/media/verified.png);
 background-size: 100% 100%;
 margin-left: 5px;
 filter: contrast(1.5);
}
.devTag {
    display: none;
}
.senderInfo * {
 text-decoration: none;
}
.senderInfo {
 font-style: italic;
}
#textInput {
 background-color: #FFF;
}
#top_banner {
  display: none;
}
#replyBanner {
  background-color: #CCC;
  font-size: 10pt;
}
.msgBody a {
  color: inherit !important;
}
#settings {
  filter: invert(100%) drop-shadow(0 0 2px #000);
} 

#settingsMenu hr {
  height: 2px;
  width: 100%;
  margin: auto;
  background-color: #AAA;
  border: none;
}
#is_typing {
  display: none !important;
}
#emojiTray {
  color: #111;
}
.pinned {
 position: sticky;
 top: 0;
 
 z-index: 2;
 border-radius: 5px;
 overflow: hidden;
 cursor: default;
}
.pinned:before {
    all: unset !important;
}
.pinned > .allMessages {
    box-shadow: 0 0 3px #000;
    width: 100%;
    transition: opacity 250ms ease;
}
.pinned:hover > .allMessages {
    opacity: 0.25;
}
.pinned > .allMessages::after {
    display: none;
}
.pinned:after {
 display: inline-block;
 position: absolute;
 right: 2px;
 top: 2px;
 content: "📌";
}