better 4get by mimvahedi

  /* ==UserStyle==
@name         better 4get
@version      0.2.4
@namespace    mimv
@var number    custom_hue   "hue" [35,0,360]
@var number    custom_bradius  "border radius" [12,0,32]
==/UserStyle== */
  @-moz-document domain(4get.ca),
  domain(4g.ggtyler.dev),
  domain(4get.dcs0.hu),
  domain(4get.hbubli.cc),
  domain(4get.kizuki.lol),
  domain(4get.konakona.moe),
  domain(4get.lunar.icu),
  domain(4get.lvkaszus.pl),
  domain(4get.seitan-ayoub.lol),
  domain(4get.silly.computer),
  domain(4get.milivojevic.in.rs),
  domain(4get.sijh.net),
  domain(search.milivojevic.in.rs),
  domain(4get.perennialte.ch) {
    /* instance list from farside.link and 4get.ca/instances */
    /*TODO: update instance list*/
    /*TODO: use stylus mixins for repeating parts like gradient*/
    /*TODO: redesign image,video,music,news pages*/
    :root {

      --hue: var(--custom_hue, 220);

      --bg-1: hsl(var(--hue), 20%, 5%);
      --bg-2: hsl(var(--hue), 30%, 12%);
      --bg-3: hsl(var(--hue), 40%, 17%);
      --accent: hsl(var(--hue), 80%, 60%);
      --accent-fg: hsl(var(--hue), 40%, 12%);


      --1d2021: var(--bg-1);
      --282828: var(--bg-2);
      --3c3836: var(--bg-3);

      --ebdbb2: var(--accent);

      --title-color: hsl(var(--hue), 75%, 75%);
      --title-weight: 750;


      /*border*/
      --504945: var(--3c3836);

      /* links  */
      --928374: hsl(var(--hue), 5%, 100%);

      /* default text*/
      --a89984: hsl(var(--hue), 15%, 66%);

      --bdae93: inherit;

      --g-a: hsl(calc(var(--hue) - 10), 80%, 60%);
      --g-b: hsl(calc(var(--hue) + 10), 100%, 50%);
      --gradient: linear-gradient(to top, var(--g-a), var(--g-b));
      --gradient-h: linear-gradient(to right, var(--g-a), var(--g-b));

      --bradius: calc(var(--custom_bradius, 12) * 1px);
      --bradius-2: calc(var(--bradius) * 1.333);
      --input-shadow: 0 2px 4px -2px #0004;
    }



    * {
      box-sizing: border-box;
    }

    body {
      max-width: 1500px;
      margin: auto;
      font-family: nunito, inter, cantarell, vazirmatn, system-ui, sans-serif;
      padding: 2em 1em;
    }

    /*TODO: add option to enable this:*/
    /*
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-image: var(--gradient);
    max-width: max-content;
  }
  */
    audio {
      border-radius: var(--bradius);
    }
    .thumb-wrap,
    #images img {
      border-radius: var(--bradius);
      object-fit: cover;
    }

    .duration {
      border: none;
      bottom: 0.5em;
      right: 0.5em;
      border-radius: .33rem;
      line-height: 1.2;
      padding: 0 0.25em;
      font-family: inherit;
      background: #000c;
    }

    .web .text-result {
      padding: 0;
      margin: 0 0 2.5rem;
    }

    .web .text-result .title {
      font-size: 1.125em;
      line-height: 1.1;
      font-weight: var(--title-weight);
      color: var(--928374);
    }

    .web .text-result > a .title {
      font-size: 1.25em;
      color: var(--title-color);
    }

    .web .text-result a:visited .title {
      color: hsl(var(--hue), 25%, 85%) !important;
    }

    .web .text-result .greentext {
      color: inherit;
      opacity: .75;
    }
    .web .text-result .title b {
      font-weight: unset;
    }

    .web .description {
      font-size: .9em;
    }

    .web .url {
      color: var(--a89984);
    }

    /*TODO: optional*/
    /*
  .url {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  }
  */
    .web .url .part {
      color: inherit;
    }
    .web .url .part:first-of-type {
      font-weight: var(--title-color);
    }
    .web .url .separator::before {
      content: "›";
      font-weight: bold;
      color: inherit;
    }

    .web .text-result:last-child {
      border-bottom: none;
    }

    /*top nav*/
    .navigation {
      margin: 1rem;
      line-height: 1;
    }
    .navigation > a {
      padding: 0 1em;
      line-height: 1;
      display: inline-block;
      font-size: 0.75rem;
    }

    .navigation > a:not(:first-child) {
      border-left: 1px solid #8884;
    }

    .navigation > a:not(:last-child)::after {
      content: none;
    }

    .filters .filter input,
    .filters .filter select,
    input,
    select {
      padding: 0.5em;
      border-radius: var(--bradius);
      background-color: var(--bg-2);
      color: inherit;
      border: 1px var(--bg-2) solid;
      font-family: inherit;
      &:not(.searchbox input[type="text"]):focus {
        box-shadow: 0 0 0 2px;
      }
    }
    .filters .filter select,
    select {
      appearance: none;
      background-image: conic-gradient(from 45deg at 50% 50%, #0000 0%, #0000 75%, currentColor 75%), conic-gradient(from 225deg at 50% 50%, #0000 0%, #0000 75%, currentColor 75%);
      background-size: .75em .75em;
      background-repeat: no-repeat;
      background-position: right .75em top 75%, right .75em top 25%;
      padding-right: 2.25em;
    }


    .filters .filter .title {
      font-size: 0.75em;
      margin: 0 0 -.75em 0rem;
      width: max-content;
      background: var(--1d2021);
      border-bottom-right-radius: 1em;
      z-index: 3;
      position: relative;
      padding: .25em .75em .25em .5em;
      color: var(--a89984);
    }

    .filters .filter .title::after {
      content: "";
      display: block;
      top: 100%;
      left: 0;
      width: 1em;
      height: 1em;
      position: absolute;
      box-shadow: -.5em -.5em var(--bg-1);
      border-radius: 50%;
    }

    .searchbox input[type="submit"] {
      background: var(--gradient);
      border-radius: var(--bradius);
      color: var(--accent-fg);
      border: none;
    }
    .searchbox input[type="text"] {
      border: none;
      border-radius: var(--bradius);
    }
    .searchbox {
      border: 1px solid transparent;
      height: unset;
      padding: .25em;
      border-radius: var(--bradius-2);
      margin-bottom: 0;
      box-shadow: var(--input-shadow);
      background: var(--bg-3);
    }
    .autocomplete {
      border-radius: 0 0 var(--bradius) var(--bradius);
      top: calc(100% + 1px);
      background: var(--bg-3);
      box-shadow: var(--input-shadow);

      padding: .25em;
      .entry {
        padding: .25em .5em;
        &:hover,
        &:focus {
          background: var(--bg-2);
          border-radius: var(--bradius);
        }
      }
    }
    .searchbox:has(.autocomplete[style*="display: block"]) {
      border-radius: var(--bradius-2) var(--bradius) 0 0;
      border-color: rebeccapurple;
    }

    .searchbox:has(.autocomplete[style*="display: block"]),
    .autocomplete {
      border-color: #8884;
    }

    .tabs {
      max-width: max-content;
      margin: .25rem 0 2rem;
      padding-bottom: 0;
    }
    .tabs .tab {
      padding: .5em 1em;
    }

    .tabs .tab.selected {
      -webkit-text-fill-color: transparent;
      background-clip: text;
      background-image: var(--gradient);

      font-weight: var(--title-weight);

      border: none;
      position: relative;
      &:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: var(--gradient-h);
        border-radius: 50em;
      }
    }

    .tabs .tab:hover {
      -webkit-text-fill-color: transparent;
      background-clip: text;
      background-image: var(--gradient);
      text-decoration: none;
    }

    /**/
    .timetaken {
      margin-bottom: 2.5rem;
    }

    /*favicon*/
    .favicon {
      float: none;
      display: inline-block;
      vertical-align: middle;
    }
    .web .favicon img,
    .favicon-dropdown img {
      margin: 0;
      margin-inline-end: .5rem;
      border-radius: 4px;
      width: 1em;
      height: 1em;
      font-size: 1.25rem;
    }

    .favicon-dropdown {
      border-radius: var(--bradius);
      padding: .25em;
    }
    .favicon-dropdown a {
      padding: 0.25em;
    }
    .favicon-dropdown a:hover {
      background: var(--3c3836);
      border-radius: var(--bradius);
    }

    .favicon-dropdown:hover,
    .favicon:focus + .favicon-dropdown,
    .favicon-dropdown:focus-within,
    .favicon:hover + .favicon-dropdown {
      animation: up ease 125ms;
    }


    @keyframes up {
      from {
        transform: translateY(1em);
        opacity: 0;
      }
    }



    .web .right-right,
    .web .right-left {
      width: 100%;
      float: none;
      padding: 0;
    }


    @media only screen and (min-width: 1000px) {
      .web .right-wrapper {
        width: 34%;
      }
      .web .left {
        width: 66%;
      }
    }


    .related tr td {
      padding: .25em !important;
    }
    .related a {
      padding: .5em .75em;
      border: 1px solid var(--504945);
      border-radius: var(--bradius-2);
    }
    input[type="submit"],
    .web .spoiler-button,
    .nextpage {
      border: 1px solid var(--bg-3);
      background: var(--282828);
      width: fit-content;

      border-radius: var(--bradius);
    }


    /*captcha*/
    .captcha-wrapper {

      .captcha::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 6.2%;
        z-index: 1;
        backdrop-filter: hue-rotate( calc(var(--hue) * 1deg - 50deg)) saturate(125%) contrast(115%);
      }

      border: none;
      input:checked + label::after {
        border-bottom-color: var(--accent);
        border-right-color: var(--accent);
      }
      label {
        --accent: hsl(var(--hue), 50%, 75%);
      }
      input + label {
        box-shadow: 0 0 0 .25em inset var(--bg-1);
        background: transparent;
      }
      input:checked + label {
        box-shadow: 0 0 0 .2em inset var(--bg-1), 0 0 0 .3em inset var(--accent);
      }
    }

    @media only screen and (max-width: 1000px) {
      body {
        padding: 0;
        --padding-x: .75em;
        display: flex;
        flex-dire...