@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next&display=swap');

* {
  transition:
    color 200ms ease-in,
    background 200ms ease-in,
    background-color 200ms ease-in,
    border 200ms ease-in,
    transform 250ms ease-in !important;
}

*:hover {
  transition:
    color 200ms ease-out,
    background 200ms ease-out,
    background-color 200ms ease-out,
    border 200ms ease-out,
    transform 250ms ease-out !important;
}

:root {
  font-family: 'Atkinson Hyperlegible Next', system-ui, sans-serif !important;
  font-optical-sizing: auto;
  line-height: 1.5;
  font-weight: 400;
  font-size: 15px;

  color-scheme: light dark;
  color: var(--font-color);
  background-color: var(--background-color);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  --light-color: white;
  --dark-color: black;
  --background-color: black;
  --foreground-color: #FFFFFF20;
  --highlight-color: #FFFFFF40;
  --hover-color: #FFFFFF60;
  --border-color: transparent;
  --font-color: white !important;
  --notice-color: white !important;
  --success-color: #A6E3A1FF !important;
  --warning-color: #FAB387FF !important;
  --danger-color: #F38BA8FF !important;
  --link: white;

  --accent-primary-color: white;
  --accent-secondary-color: white;
  --accent-color: white;

  --btn-radius: 0.25rem !important;

  --grad-color1: hsl(343, 81%, 75%);
  --grad-color2: hsl(41, 86%, 83%);
  --grad-color3: hsl(232, 97%, 85%);
  --iridescent: linear-gradient(20deg, var(--grad-color1) 0%, var(--grad-color2) 50%, var(--grad-color3) 100%);

  animation: iridescent 3s linear infinite;
  overscroll-behavior-y: none;
}

.bottom-bar-btn {
  background: transparent !important;
  color: white !important;
  border-color: transparent !important;
  border-width: thin;
  border-style: solid;
}

.bottom-bar-btn:hover {
  background: var(--hover-color) !important;
}

.post-btn {
  background: var(--highlight-color) !important;
  color: white !important;
  border-color: transparent !important;
  border-width: thin;
  border-style: solid;
}

.post-btn:hover {
  background: var(--hover-color) !important;
  border-color: var(--accent-primary-color) !important;
}

.active .text,
.name .mfm,
.post-btn .icon-wrapper .icon-container .icon,
.current-timeline {
  background: var(--iridescent) !important;
  background-clip: text !important;
  color: transparent !important;
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.5' width='0' height='0'><filter id='process'><feGaussianBlur stdDeviation='.55'/><feComponentTransfer><feFuncR type='identity'/><feFuncG type='identity'/><feFuncB type='identity'/><feFuncA type='identity'/></feComponentTransfer><feMerge><feMergeNode/><feMergeNode in='SourceGraphic'/></feMerge><feGaussianBlur stdDeviation='.5'/><feMerge><feMergeNode/><feMergeNode in='SourceGraphic'/></feMerge><feGaussianBlur stdDeviation='1.0'/><feMerge><feMergeNode/><feMergeNode in='SourceGraphic'/></feMerge></filter></svg>#process") !important;
}

.active .sidebar-btn {
  border-color: var(--accent-primary-color);
  border-width: thin;
  border-style: solid;
}

.sidebar {
  transition: width 200ms linear;
}

.sidebar .open {
  transition: width 200ms linear;
}

nav .sidebar-btn {
  background: var(--highlight-color) !important;
  border-color: transparent !important;
  border-width: thin !important;
  border-style: solid !important;
}

.nav .sidebar-btn:hover {
  border-color: var(--hover-color) !important;
}

[b-zlatubmrva] {
  & .active {
    > .sidebar-btn {
      background: var(--highlight-color) !important;
      border-color: var(--hover-color) !important;
    }
  }
  & .active {
    > .sidebar-btn:hover {
      background: var(--hover-color) !important;
    }
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.menu,
.main *,
.dialog {
  animation: fade 0.25s cubic-bezier(0.39, 0.58, 0.57, 1) !important;
}

@property --grad-color1 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsl(343, 81%, 75%);
}

@property --grad-color2 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsl(41, 86%, 83%);
}

@property --grad-color3 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsl(232, 97%, 85%);
}

.note-container[b-9iccjxjkej] {
  max-width: 97%;
}

@keyframes iridescent {
  0% {
    --grad-color1: #f38ba8;
    --grad-color2: #f9e2af;
    --grad-color3: #b4befe;
  }

  33% {
    --grad-color1: #a6e3a1;
    --grad-color2: #f5c2e7;
    --grad-color3: #f38ba8;
  }

  66% {
    --grad-color1: #b4befe;
    --grad-color2: #89dceb;
    --grad-color3: #f9e2af;
  }

  100% {
    --grad-color1: #f38ba8;
    --grad-color2: #f9e2af;
    --grad-color3: #b4befe;
  }
}

.labeled-ruler,
.labeled-ruler .label {
  text-align: center !important;
  margin: 0px auto !important;
  width: 100% !important;
}

.profile-card {
  width: 100% !important;
  max-width: none !important;
}

.memo {
  width: 100% !important;
  background-color: #FFFFFF20 !important;
}

.avatar,
.memo,
.button,
.btn,
.badge,
.elements,
.menu,
.menu-element,
.note-container,
.emoji-picker,
.ticker,
.scroller,
.controls,
.cw-button,
.notification,
.input,
.root-note,
.container,
.banner,
.profile-card,
.user,
.note,
.mention,
.h-card,
input,
select,
button {
  border-radius: 0.25rem !important;
}

form.search section.fields input.input {
  margin-right: 0.5em !important;
}

.notification-icon {
  left: 2.25em !important;
  top: 2.25em !important;
}

.notification {
  margin: 0px !important;
  padding: 0.25em !important;
  gap: 0px !important;
  width: 100% !important;
  max-width: none !important;
}
.scroller {
  gap: 0.75em !important;
  width: 100% !important;
}

.notification-metadata {
  min-width: fit-content !important;
}

.notification-metadata .mark-as-read {
  margin-left: 1.0ch !important;
}

.display-name {
  min-width: 0px !important;
  width: min-content !important;
  max-width: none !important;
}

.notification-body .display-name {
  max-width: calc(12rem - 1.0ch - 1px) !important;
}

div.emoji-picker div.scroller details {
  content-visibility: auto !important;
  will-change: auto !important;
  backface-visibility: hidden !important;
  transform-style: flat !important;
}

button.btn div.icon-wrapper div.icon-container i.ph-fill.ph-heart {
  background: var(--iridescent) !important;
  background-clip: text !important;
  color: transparent !important;
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.5' width='0' height='0'><filter id='process'><feGaussianBlur stdDeviation='.55'/><feComponentTransfer><feFuncR type='identity'/><feFuncG type='identity'/><feFuncB type='identity'/><feFuncA type='identity'/></feComponentTransfer><feMerge><feMergeNode/><feMergeNode in='SourceGraphic'/></feMerge><feGaussianBlur stdDeviation='.5'/><feMerge><feMergeNode/><feMergeNode in='SourceGraphic'/></feMerge><feGaussianBlur stdDeviation='1.0'/><feMerge><feMergeNode/><feMergeNode in='SourceGraphic'/></feMerge></filter></svg>#process") !important;
}

form.search {
  align-items: center !important;
  text-align: left !important;
}

.sidebar {
  border-right: thin white solid;
  margin-right: 0.5em !important;
}

.search-filters,
.filter-groups {
  width: 100% !important;
  max-width: none !important;
}

span.acct,
span.mfm span.user,
span.mfm span.host,
span.identifier {
  background: var(--iridescent) !important;
  background-clip: text !important;
  color: transparent !important;
  text-decoration: none !important;
  opacity: 1 !important;
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.5' width='0' height='0'><filter id='process'><feGaussianBlur stdDeviation='.55'/><feComponentTransfer><feFuncR type='identity'/><feFuncG type='identity'/><feFuncB type='identity'/><feFuncA type='identity'/></feComponentTransfer><feMerge><feMergeNode/><feMergeNode in='SourceGraphic'/></feMerge><feGaussianBlur stdDeviation='.5'/><feMerge><feMergeNode/><feMergeNode in='SourceGraphic'/></feMerge><feGaussianBlur stdDeviation='1.0'/><feMerge><feMergeNode/><feMergeNode in='SourceGraphic'/></feMerge></filter></svg>#process") !important;
}

a {
  text-decoration: none !important;
}

.warning-banner {
  color: var(--notice-color) !important;
}

div.main {
  height: 100% !important;
  max-height: 100% !important;
}

div.main .scroller .wrapper,
div.main .scroller {
  height: 100% !important;
  margin: 0px !important;
  padding: 0px !important;
  gap: 0px !important;
  background: none !important;
}

.banner {
  max-width: none !important;
}

.container {
  margin: 1em !important;
  padding: 0.5em !important;
  max-width: none !important;
}

.note-container {
  margin-top: 0.5em !important;
  padding: 0.25em !important;
  max-width: none !important;
}

.reply {
  background: inherit !important;
  border-radius: 0.25em !important;
}

.reply * {
  background: none !important;
}

.root-note {
  margin: 0.5em !important;
  width: calc(100% - 1.0em) !important;
  max-width: none !important;
  padding: 0.5em !important;
}

.root-note .note-container {
  margin: 0px !important;
}

.details,
.details .buttons,
.descendant {
  width: 100% !important;
  max-width: none !important;
}

div.note-footer button.btn,
.details .buttons button.tab-button {
  margin-right: 0.25em !important;
  margin-left: 0px !important;
  gap: 0px !important;
}

.details .buttons {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-left: 0.5em !important;
}

div.menu,
.emoji-picker {
  background: #00000080 !important;
  border-color: white !important;
  border-style: solid !important;
  border-radius: 0.25em !important;
  border-width: thin !important;
  backdrop-filter: blur(1.0ch) !important;
}

.main {
  margin-left: 0.35em !important;
}

.main .scroller .notification {
  margin-bottom: 0.35em !important;
}

.main {
  margin-left: 0.35em !important;
}

.main .scroller .notification {
  margin-bottom: 0.35em !important;
}

.name-section * {
  width: fit-content !important;
  max-width: none !important;
}

.name, .identifier, .acct {
  text-shadow: none !important;
}

.emoji img {
  transition: transform 0.25s ease-in !important;
}

.emoji img:hover {
  transform: scale(1.25) !important;
  transition: transform 0.25s ease-out !important;
}

::-moz-selection {
  background: #FFFFFF50 !important;
}

::selection {
  background: #FFFFFF50 !important;
}