body {
    font-family: monospace;
}

.rich-formatting {
    font-family: monospace;
}

.rich-formatting h1 {
    font-family: monospace;
    text-transform: uppercase;
}

.rich-formatting h2 {
    font-family: monospace;
    text-transform: uppercase;
}

.rich-formatting h3 {
    font-family: monospace;
    text-transform: uppercase;
}

.rich-formatting h4 {
    font-family: monospace;
    text-transform: uppercase;
}

.rich-formatting h5 {
    font-family: monospace;
    text-transform: uppercase;
}

/* === pride toot button === */

/* mobile UI - button at the top*/
.ui__header__links a.button[href="/publish"] {
  background-image:
    radial-gradient(circle at -1% 50%, #0000 5.5%, #6d2380 6% 8%, #0000 8.5%),
    conic-gradient(at 20% 50%, #0000 225deg, #fdd817 0 315deg, #0000 0),
    conic-gradient(at 27% 50%, #0000 225deg, #ffffff 0 315deg, #0000 0),
    conic-gradient(at 34% 50%, #0000 225deg, #f4aec8 0 315deg, #0000 0),
    conic-gradient(at 41% 50%, #0000 225deg, #7bcce5 0 315deg, #0000 0),
    conic-gradient(at 48% 50%, #0000 225deg, #945516 0 315deg, #0000 0),
    conic-gradient(at 55% 50%, #0000 225deg, #000000 0 315deg, #0000 0),
    linear-gradient(
      #e22016 0 calc((100% / 6)),
      #f28917 0 calc((100% / 6) * 2),
      #efe524 0 calc((100% / 6) * 3),
      #78b82a 0 calc((100% / 6) * 4),
      #2c58a4 0 calc((100% / 6) * 5),
      #6d2380 0 calc((100% / 6) * 6));
  border-color: transparent;
  background-repeat: no-repeat;
  background-size: calc(100% + 2px) calc(100% + 2px);
  background-position: center;
}

/* compose form */
.compose-form__submit button[disabled] {
  cursor: not-allowed;
}

.compose-form__submit button[type="submit"] {
  color: transparent;
	background-image:
    radial-gradient(circle at 0% 50%, #0000 2.5%, #6d2380 3% 5%, #0000 5.5%),
    conic-gradient(at 10% 50%, #0000 225deg, #fdd817 0 315deg, #0000 0),
    conic-gradient(at 14% 50%, #0000 225deg, #ffffff 0 315deg, #0000 0),
    conic-gradient(at 18% 50%, #0000 225deg, #f4aec8 0 315deg, #0000 0),
    conic-gradient(at 22% 50%, #0000 225deg, #7bcce5 0 315deg, #0000 0),
    conic-gradient(at 26% 50%, #0000 225deg, #945516 0 315deg, #0000 0),
    conic-gradient(at 30% 50%, #0000 225deg, #000000 0 315deg, #0000 0),
    linear-gradient(
      #e22016 0 calc((100% / 6)),
      #f28917 0 calc((100% / 6) * 2),
      #efe524 0 calc((100% / 6) * 3),
      #78b82a 0 calc((100% / 6) * 4),
      #2c58a4 0 calc((100% / 6) * 5),
      #6d2380 0 calc((100% / 6) * 6));
}

.compose-form__submit button[type="submit"]::before,
.ui__header__links a.button[href="/publish"]::before {
  content: "";
  position: absolute;
  inset: -1px;
  transition: opacity 200ms;
  opacity: 0;
  backdrop-filter: saturate(0.65) brightness(1.4) contrast(0.75) blur(1px);
}

.compose-form__submit button[type="submit"]:hover::before,
.ui__header__links a.button[href="/publish"]:hover::before {
  opacity: 0.5;
}

.compose-form__submit button[type="submit"][disabled]::before {
  opacity: 1;
}

.compose-form__submit button[type="submit"][disabled]:hover::before {
  opacity: 0.5;
}

.compose-form__submit button[type="submit"]::after,
.ui__header__links a.button[href="/publish"]::after {
  content: "Cybertoot!";
  color: white;
  --text-shadow-color: #00000080;
  text-shadow:
    var(--text-shadow-color) 1px 0px 1px,
    var(--text-shadow-color) -1px 0px 1px,
    var(--text-shadow-color) 0px 1px 1px,
    var(--text-shadow-color) 0px -1px 1px,
    var(--text-shadow-color) 1px 1px 1px,
    var(--text-shadow-color) -1px -1px 1px,
    var(--text-shadow-color) 1px -1px 1px,
    var(--text-shadow-color) -1px 1px 1px;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}



.sign-in-banner > .button[href*='/auth/sign_up']::after {
	content: 'Chippin\0027 in!';
	font-size: 15px;
	transform: translateY(2px);
	display: inline-block;
}

.sign-in-banner > .button[href*='/auth/sign_up'] {
	font-size: 0;
}

.ui__header__links > .button[href*='/auth/sign_up']::after {
	content: 'Chippin\0027 in!';
	font-size: 15px;
	transform: translateY(2px);
	display: inline-block;
}

.ui__header__links > .button[href*='/auth/sign_up'] {
	font-size: 0;
}

.sign-in-banner > .button[href*='/auth/sign_in']::after {
	content: 'Netrun!';
	font-size: 15px;
	transform: translateY(2px);
	display: inline-block;
}

.sign-in-banner > .button[href*='/auth/sign_in'] {
	font-size: 0;
}

.ui__header__links > .button[href*='/auth/sign_in']::after {
	content: 'Netrun!';
	font-size: 15px;
	/* transform: translateY(2px); */
	display: inline-block;
}

.ui__header__links > .button[href*='/auth/sign_in'] {
	font-size: 0;
}

.account__avatar {
	border-radius: 50%;
}

.server-banner__number::before {
	content: "1";
}

.coolbutton {
	color: #fff;
	text-decoration: none;
}

@supports selector(:has(a, b)) {
	:where( .status__content, .status__content .e-content, .status__content .status__content__text, :not(.reply-indicator__display-name)>.display-name, .status__display-name, .status__info>span, label.poll__option, .conversation__content__names, .detailed-status__display-name, .detailed-status__display-name strong, .conversation__content__info, .conversation__content, .status__prepend>span, .notification__message>span, .account__display-name strong, .account .account__display-name, .account__header__tabs__name h1, .account__header__content, .account__header__fields dd, .account__header__fields dt, .reply-indicator, .reply-indicator__content, .status__content, .picture-in-picture__header__account, .picture-in-picture__header .display-name span, .picture-in-picture__header .display-name strong ):has(img.emojione:hover) {
		overflow: revert;
	}

	:not( .reply-indicator__header strong, .emoji-button, .reactions-bar__item__emoji )>img.emojione {
		transition: transform 200ms, opacity 200ms;
	}

	:not( .reply-indicator__header strong, .emoji-button, .reactions-bar__item__emoji )>img.emojione:hover {
		transform: scale(5);
		opacity: 1;
		z-index: 2;
		position: relative;
	}
}

.cyberdon {
	background-image: url("https://obeythesystem.com/cyberdon_bd.gif");
	width: 400px;
	height: 50%;
}

body.layout-single-column:after {
	content: "";
	position: fixed;
	top: 80vh;
	left: 1vw;
	height: 20vh;
	aspect-ratio: 1;
	background-image: url(/system/site_uploads/files/000/000/007/original/e5c5e3f3bf771af8.gif);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: bottom;
	pointer-events: none;
	z-index: -9999;
	opacity: 0.8;
}

code {
  background: #1e1e1e;
  font-family: 'Courier New', Courier, monospace;
  padding: 8px 12px;
  border-radius: 4px;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(90deg, 
    #f00, #f80, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  animation: rainbow-text 5s infinite linear;
}

@keyframes rainbow-text {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

code:hover {
  transform: scale(1.02);
}
/*
.status__action-bar .icon {
	height: 17px;
	width: 17px;
}
*/
.status__action-bar {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-top: 16px;
}


/* -- fixes for 4.3.x by maxi -- */

/* general icon fixes */
button > svg.icon {
    display: block;
}
.status__action-bar .icon {
    /* actions under a post */
    height: 20px;
    width: 20px;
    padding: 2px;
}


.account__avatar,
.account__avatar-overlay-base,
.account__avatar-overlay-overlay {
    border-radius: unset;
}

/* fix the <person> boosted text */
.status__prepend {
    /* line up the text and the username underneath */
    margin-inline-start: 56px;
    /* make sure the height stays the same, 
    but the text has the same vertical whitespace infront and after it */
    margin-bottom: 1px;
    margin-top: -1px;
    height: 24px;
    /* center the text within the aside */
    line-height: 24px;
}
.status__prepend > span {
    white-space: nowrap;
}
.status__prepend-icon-wrapper {
    /* line up boost icon with the avatars */
    inset-inline-start: -36px;
}

/* align the post icons with the poster's name, give them equal spacing */
.status__info__icons {
    height: 100%;
    display: grid;
    grid-auto-flow: column;
    justify-items: center;
    align-items: center;
    grid-auto-columns: 1fr;
    flex-shrink: 0;
}
.status__info__icons > * {
    min-width: 24px;
    box-sizing: border-box;
}
.status__info__icons .text-icon {
    text-align: center;
    line-height: 18px;
    height: 15px;
}
/* similar thing for reports */
.columns-area--mobile .notification__report {
    padding-inline-start: 71px;
}

/* fix alignment of items in the right menu */
.column-link .icon {
    margin-inline-end: 4px;
}
.column-link span {
    height: 16px;
    line-height: 18px;
}

/* previous/next announcement */
.announcements__pagination {
    display: flex;
    padding: 13px;
}
.announcements__pagination > span {
    line-height: 24px;
    margin-inline: 2px;
}
.reactions-bar {
    /* make sure an announcement's reactions don't overlap */
    width: calc(100% - 90px);
    /* better align items */
    display: grid;
    grid-template-columns: repeat(auto-fill, 6ch);
}

/* Notification filter bar icons */
.notification__filter-bar button {
    display: grid;
    place-items: center;
}

/* fix layout of date, publicity, etc */
.detailed-status__meta {
    display: flex;
    gap: 0.2em;
}
.detailed-status__meta > * {
    position: unset;
}
.detailed-status__favorites,
.detailed-status__reblogs {
    font-size: inherit;
}

/* === custom role colors === */
.account-role {
  position: relative;
  margin-top: 2px !important;
  /* Start a new stacking context */
  z-index: 1;

  --color-role-bg: hsl(225deg 10% 30%);
  --color-role-border: hsl(227deg 16% 76%);
  --color-role-bg-shine: hsl(227deg 16% 54%);
  --color-role-border-shine: hsl(227deg 16% 10%);

  color: color-mix(in srgb, white, var(--color-role-border));

  /* moderator */
  &[data-account-role-id="1"] {
    --color-role-border: hsl(149.12deg 34% 60.78%);
    --color-role-border-shine: hsl(240deg 100% 69%);
  }

  /* owner */
  &[data-account-role-id="3"] {
    --color-role-border: hsl(330deg 100% 50%);
    --color-role-border-shine: hsl(254deg 100% 65%);
  }

  /* supporter */
  &[data-account-role-id="34"] {
    --color-role-border: hsl(187deg 98% 48%);
    --color-role-border-shine: hsl(58deg 100% 47%);
  }
  /* mk1 */
  &[data-account-role-id="38"] {
    --color-role-border: hsl(120 100% 72.4%);
    --color-role-border-shine: hsl(120 100% 90%);
  }
  /* mk2 */
  &[data-account-role-id="40"] {
    --color-role-border: hsl(251 97.4% 69.4%);
    --color-role-border-shine: hsl(251 97.4% 81%);
  }
  /* mk3 */
  &[data-account-role-id="39"] {
    --color-role-border: hsl(350 98.7% 69.8%);
    --color-role-border-shine: hsl(350 98.7% 82%);
  }
}

@keyframes shine {
  0%   { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

.account-role::before,
.account-role::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  background-size: 300% 100%;
  animation: shine 5000ms infinite;
  background-position: -100% 50%;
}

/* border */
.account-role::before {
  z-index: -2;
  inset: -1px;
  background-image:
    linear-gradient(60deg,
      transparent 0%,
      transparent 40%,
      color-mix(in srgb, var(--color-role-border-shine) 40%, transparent) 50%,
      transparent 60%,
      transparent 100%
    ),
    linear-gradient(var(--color-role-border), var(--color-role-border));
}
/* background */
.account-role::after {
  z-index: -1;
  inset: 0px;
  background-image:
    linear-gradient(60deg,
      transparent 0%,
      transparent 45%,
      color-mix(in srgb, var(--color-role-bg-shine) 20%, transparent) 55%,
      transparent 65%,
      transparent 100%
    ),
    linear-gradient(var(--color-role-bg), var(--color-role-bg));
}