.custom-emoji {
width: auto !important;
height: auto !important;
}

:root {
  --font-sans-serif: "Roboto Mono", sans-serif !important;
  --font-display: "Roboto Mono", sans-serif !important;
}

html {
  font-family: "Roboto Mono", sans-serif !important;
}

body,
body.system-font,
body.app-body {
  font-family: "DotGothic16", sans-serif !important;
}

body *,
body *::before,
body *::after {
  font-family: "Roboto Mono", sans-serif !important;
}


/* =========================================
   MASTODON RETRO THEME
   Flat corners + chunky bevels + pastel palette
   ========================================= */

:root {
  --retro-purple: #74569b;
  --retro-mint: #96fbc7;
  --retro-yellow: #f7ffae;
  --retro-pink: #ffb3cb;
  --retro-lavender: #d8bfd8;

  --retro-dark: #3d3150;
  --retro-light: #fff7e8;
}

/* =========================================
   FLAT, SQUARE UI
   ========================================= */

*,
*::before,
*::after {
  border-radius: 0 !important;
}

/* =========================================
   GENERAL BACKGROUND
   ========================================= */

body {
  background: var(--retro-lavender) !important;
  color: var(--retro-dark) !important;
}

/* Main Mastodon surfaces */

.column,
.drawer,
.getting-started,
.admin-wrapper,
.compose-form,
.status,
.notification,
.account-card,
.filters-settings-panel,
.list-editor {
  background: var(--retro-light) !important;
  color: var(--retro-dark) !important;
  border-color: var(--retro-purple) !important;
}

/* =========================================
   COLUMN HEADERS
   ========================================= */

.column-header {
  background: var(--retro-purple) !important;
  color: var(--retro-yellow) !important;

  border: 0 !important;
  border-bottom: 5px solid var(--retro-dark) !important;

  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.column-header__button,
.column-header__back-button {
  color: var(--retro-yellow) !important;
}

/* =========================================
   BUTTONS — BIG RETRO BEVEL
   ========================================= */

button,
.button,
.btn,
a.button,
.button.button-secondary,
.button.button-tertiary,
.button--destructive,
.button--block,
.simple_form button,
.simple_form .button,
input[type="submit"],
input[type="button"],
input[type="reset"],
select {
  border-radius: 0 !important;

  background: var(--retro-purple) !important;
  color: var(--retro-yellow) !important;

  border-top: 5px solid var(--retro-pink) !important;
  border-left: 5px solid var(--retro-pink) !important;
  border-right: 5px solid var(--retro-dark) !important;
  border-bottom: 5px solid var(--retro-dark) !important;

  box-shadow:
    3px 3px 0 var(--retro-dark) !important;

  font-weight: 800 !important;

  transition:
    transform 0.05s linear,
    box-shadow 0.05s linear,
    filter 0.05s linear !important;
}

/* Button hover */

button:hover,
.button:hover,
.btn:hover,
a.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background: var(--retro-pink) !important;
  color: var(--retro-dark) !important;
  filter: none !important;
}

/* Button pressed state */

button:active,
.button:active,
.btn:active,
a.button:active,
input[type="submit"]:active,
input[type="button"]:active {
  border-top: 5px solid var(--retro-dark) !important;
  border-left: 5px solid var(--retro-dark) !important;
  border-right: 5px solid var(--retro-pink) !important;
  border-bottom: 5px solid var(--retro-pink) !important;

  box-shadow: none !important;
  transform: translate(3px, 3px) !important;
}

/* =========================================
   PRIMARY ACTIONS
   ========================================= */

.button--primary,
.button.button-primary,
.compose-form__publish-button-wrapper .button {
  background: var(--retro-purple) !important;
  color: var(--retro-yellow) !important;

  border-width: 6px !important;

  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 900 !important;
}

/* =========================================
   COMPOSE AREA
   ========================================= */

.compose-form {
  border: 4px solid var(--retro-purple) !important;
  background: var(--retro-yellow) !important;
}

.compose-form__textarea,
.compose-form textarea,
textarea {
  background: var(--retro-light) !important;
  color: var(--retro-dark) !important;

  border: 4px solid var(--retro-purple) !important;
}

/* =========================================
   INPUTS
   ========================================= */

input,
textarea,
select,
.form-control,
.input,
.autosuggest-input {
  border-radius: 0 !important;

  background: var(--retro-light) !important;
  color: var(--retro-dark) !important;

  border: 4px solid var(--retro-purple) !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: 4px solid var(--retro-pink) !important;
  outline-offset: 2px;
}

/* =========================================
   STATUS POSTS
   ========================================= */

.status {
  border: 0 !important;
  border-bottom: 3px solid var(--retro-lavender) !important;
}

/* Alternate subtle pastel treatment */

.status:nth-child(even) {
  background: var(--retro-light) !important;
}

.status:nth-child(odd) {
  background: #fffbe0 !important;
}

/* =========================================
   LINKS
   ========================================= */

a {
  color: var(--retro-purple) !important;
  font-weight: 700;
}

a:hover {
  color: var(--retro-pink) !important;
}

/* =========================================
   HASHTAGS / TAGS
   ========================================= */

.hashtag,
.tag,
.chip,
.badge {
  border-radius: 0 !important;

  background: var(--retro-mint) !important;
  color: var(--retro-dark) !important;

  border: 3px solid var(--retro-dark) !important;
  box-shadow: 2px 2px 0 var(--retro-dark);
  font-weight: 800;
}

/* =========================================
   NOTIFICATIONS
   ========================================= */

.notification {
  border-left: 6px solid var(--retro-purple) !important;
}

.notification--mention {
  border-left-color: var(--retro-pink) !important;
}

.notification--follow {
  border-left-color: var(--retro-mint) !important;
}

/* =========================================
   AVATARS — SQUARE RETRO STYLE
   ========================================= */

.account__avatar,
.account__avatar img,
.avatar,
.avatar img,
.account-card__header__bar,
.account__avatar-composite {
  border-radius: 0 !important;
}

.avatar img {
  border: 4px solid var(--retro-purple) !important;
  box-shadow: 3px 3px 0 var(--retro-dark);
}

/* =========================================
   MEDIA
   ========================================= */

.media-gallery,
.media-gallery__item,
.media-gallery__item-thumbnail,
.video-player,
.audio-player,
.status-card {
  border-radius: 0 !important;
}

.media-gallery {
  border: 4px solid var(--retro-purple) !important;
}

/* =========================================
   MENUS / DROPDOWNS
   ========================================= */

.dropdown-menu,
.popup-menu,
.navigation-panel {
  border-radius: 0 !important;

  background: var(--retro-yellow) !important;
  color: var(--retro-dark) !important;

  border: 4px solid var(--retro-purple) !important;
  box-shadow: 6px 6px 0 var(--retro-dark) !important;
}

.dropdown-menu__item:hover,
.popup-menu__item:hover {
  background: var(--retro-pink) !important;
  color: var(--retro-dark) !important;
}

/* =========================================
   TABS
   ========================================= */

.tabs-bar {
  background: var(--retro-lavender) !important;
  border-bottom: 4px solid var(--retro-purple) !important;
}

.tabs-bar__link {
  border-radius: 0 !important;
  color: var(--retro-purple) !important;
  font-weight: 800 !important;
}

.tabs-bar__link.active {
  background: var(--retro-purple) !important;
  color: var(--retro-yellow) !important;
  box-shadow: inset 0 -5px 0 var(--retro-pink);
}

/* =========================================
   MODALS
   ========================================= */

.modal-root__container {
  border-radius: 0 !important;

  background: var(--retro-light) !important;
  border: 6px solid var(--retro-purple) !important;

  box-shadow:
    8px 8px 0 var(--retro-dark) !important;
}

/* =========================================
   SCROLLBARS
   ========================================= */

::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-track {
  background: var(--retro-lavender);
  border-radius: 0 !important;
}

::-webkit-scrollbar-thumb {
  background: var(--retro-purple);
  border: 3px solid var(--retro-pink);
  border-radius: 0 !important;
}

/* =========================================
   RETRO SELECTION
   ========================================= */

::selection {
  background: var(--retro-pink) !important;
  color: var(--retro-dark) !important;
}

/* =========================================
   EXTRA RETRO TOUCH:
   make important controls look like physical
   plastic buttons
   ========================================= */

.icon-button {
  border-radius: 0 !important;
  background: var(--retro-mint) !important;
  color: var(--retro-dark) !important;

  border-top: 4px solid var(--retro-yellow) !important;
  border-left: 4px solid var(--retro-yellow) !important;
  border-right: 4px solid var(--retro-dark) !important;
  border-bottom: 4px solid var(--retro-dark) !important;
}

.icon-button:hover {
  background: var(--retro-pink) !important;
}