cryn ml by justaprgmr

/* ==UserStyle==
@name           crayon for mal
@namespace      USO Archive
@author         pajamapop
@description    `Comes in various parts! An extra is <i>barely</i> needed for Firefox. Customises and refines all aspects of the site. Optimised for symmetricality, friendly appearance and ease of use. Easily changeable background by <a href="https://userstyles.org/styles/169748/">installing another style</a>.<b>PS</b>. All ads and social media elements are removed ‎(ヽ`д´)┌┛★)`з゜)<b>*</b> This theme will put stats back on top for myanimelist profiles.`
@version        20211028.13.42
@license        NO-REDISTRIBUTION
@preprocessor   uso
==/UserStyle== */
@-moz-document regexp(".*myanimelist\\.net/(?!animelist|mangalist|store|membership).*") {
/* Crayon for MAL */

@font-face {
    font-family: 'FontAwesome';
    src: url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');
    src: url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); }

* {line-height: 1.35em !important;}

body {
    color: rgba(var(--colorText)) !important;
    text-align: center;
    margin: 0 !important;
    font-size: 13px !important;
    font-family: Segoe UI !important;
    background-color: rgba(var(--colorLightGray)) !important;
    background-image: url(http://static.colourlovers.com/images/patterns/3518/3518772.png) !important;
    background-size: auto !important;
    background-repeat: repeat !important;
    animation: pattern var(--speed) linear infinite; }

@keyframes pattern {
    from{background-position: 0 0;}
    to{background-position: var(--size);}}

/* Animated pattern */
body {background-attachment: fixed !important;}
:root {
    --size: 200px 200px;
    --speed: 25s;
}

/* Colours */
:root {
    --colorBlue: 112,200,237; /* #70c8ed */
    --colorPink: 244,101,146; /* #f46592 */
    --colorOrange: 255,196,108; /* #ffc46c */
    --colorGreen: 112,208,182; /* #70d0b6 */
    --colorPurple: 140,125,208; /* #8c7dd0 */
    --colorLightBlue: 240,248,252; /* #f0f8fc */
    --colorText: 65,65,65; /* #414141 */
    --colorTextHeader: 65,66,65; /* #414241 */
    --colorTextLink: 96,96,96; /* #606060 */
    --colorLightGray: 234,234,234; /* #eaeaea */
    --colorLightGrayText: 150,150,150; /* #969696 */
    --colorBackground: 250,250,250; /* #fafafa */
    --colorForeground: 246,246,246; /* #f6f6f6 */
    --colorButton: 244,244,244; /* #f4f4f4 */
    --colorButtonText: 174,174,174; /* #aeaeae */
    --colorButtonDarkText: 128,128,128; /* #808080 */
    --colorDark: 24,24,24; /* #181818 */
    --colorDarkText: 85,85,85; /* #555555 */
    --colorDarkTextHover: 104,104,104; /* #686868 */
    --colorLessDark: 50,50,50; /* #323232 */
    --colorLessDarkText: 96,97,96; /* #606160 */
    --colorLessDarkTextAlt: 111,111,111; /* #6f6f6f */
    --colorLightShadow: 0 0 0 1px #e7e7e7;
    --colorDarkShadow: 65,65,65;
    --colorHeaderShadow: 65,65,65; }

/* Temporary */
.initialize-tutorial, .notice_open_public {display: none !important;}

a img:hover {opacity: 0.8 !important;}
a img:active {opacity: 1 !important;}
a, a:visited {color: rgba(var(--colorTextLink)) !important;text-decoration: none !important;font-style: italic !important;}
a:hover, a > span[style^="color:"]:hover {color: rgba(var(--colorBlue)) !important;transition: 0.2s;}
.link1 {color: #818081;} /* ??? */
td {font-size: 13px !important;}
small {font-size: 10px !important;}
body[onload="onloadManga();"] {background: rgba(var(--colorBackground)) !important;}
.page-common .ff-avenir, .breadcrumb, .ff-Verdana, .floatRightHeader {font-family: Segoe UI !important;}
.breadcrumb {font-size: 13px !important;display: none !important;}
.page-common .fn-red1, .badresult-text {color: rgba(var(--colorPink)) !important;}

#horiznav_nav {
    margin: 10px !important;
    padding: 0 0 2px !important;
    border: none !important; }
#horiznav_nav + div {padding-top: 10px !important;}
#horiznav_nav + strong {display: inline-block !important;padding: 15px 8px !important;} /* Add entry (Mods) */
td[width="225"] + td #horiznav_nav {margin: 10px 0 24px -3px !important;width: 101.8% !important;} /* A/M/Char/People */
#content.style-setting #horiznav_nav {margin: 10px 10px 24px -6px !important;} /* Edit style page */
/* td[width="225"] + td .js-scrollfix-bottom-rel #horiznav_nav {margin: 10px 0 20px -3px !important;} /* Manga */
/* td[width="225"] + td .js-scrollfix-bottom-rel #horiznav_nav + div + h2 {margin-top: 24px !important;} /* Manga */

#header, #headerSmall {height: 65px !important;background: transparent !important;}
#headerSmall > a {height: 100% !important;position: relative;z-index: 499 !important;}
#headerSmall > .logo_overwrite .logo_size {display: none !important;} /* Panel page */

#contentWrapper {position: relative;min-height: 0 !important;padding-bottom: 0 !important;border-radius: 0 0 18px 18px;}

#content, #contentHome {
    border: 1px solid white !important;
    border-radius: 0 0 18px 18px;
    min-height: 0 !important;
    padding-top: 10px !important; }

/* Upper navigation */
#menu {
    background: rgba(var(--colorDark)) !important;
    border-radius: 8px 8px 0 0;
    height: 46px !important;
    position: relative; }

#menu_left, #menu_right {background: none !important;}
#menu_left {position: relative;left: 85px;z-index: 490 !important;}
#menu_right {right: 75px;}

#nav li {
    background: none !important;
    text-indent: 0 !important;
    width: auto !important;
    height: 46px !important;
    z-index: 401 !important; }

#nav li a {
    padding: 5px 20px !important;
    font-style: normal !important;
    font-size: 14px !important;
    height: 36px !important;
    line-height: 36px !important;
    color: rgba(var(--colorDarkText)) !important;
    background: rgba(var(--colorDark)) !important; }

#nav li a:hover {color: rgba(var(--colorDarkTextHover)) !important;transition: 0.5s;}

#nav ul {
    z-index: -1;
    padding-bottom: 7px !important;
    background: rgba(var(--colorLessDark)) !important;
    border-radius: 0 0 5px 5px !important;
    box-shadow: 0 0 10px rgba(var(--colorHeaderShadow),0.5); } /* Top bar dropdown, main */

#nav ul a {
    font-size: 13px !important;
    background: rgba(var(--colorLessDark)) !important; }
#nav ul a:hover {background: none !important;color: rgba(var(--colorLessDarkTextAlt)) !important;}

#nav ul li {width: 150px !important;height: 36px !important;} /* Top bar dropdown, spacing */
#nav ul li a {
    color: rgba(var(--colorLessDarkTextAlt)) !important;
    padding: 0 20px !important;
    background: none !important; } /* Top bar dropdown, links */
#nav ul li:hover {background: none !important;}

#nav li.tiny {width: 50px;}
#nav li.smaller {width: auto !important;}
#nav li.small {width: auto !important;}
#nav li.large {width: 97px;}
#nav .wide li {width: 110px;}
#nav .wider li {width: 130px;}
#nav li.small:first-of-type {background: rgba(var(--colorDark)) !important;}

/* 'Blog' */
.header-profile-dropdown ul li {overflow: hidden;}
.header-profile-dropdown ul li a[href*="/blog/"]:before {content: "Blog";margin-right: 125px;}

/* 'Seasonal' */
#nav li:nth-child(1) ul li {overflow: hidden;}
#nav li:nth-child(1) ul li a[href*="/season"]:before {content: "Seasonal";margin-right: 125px;}

/* 'Articles' */
#nav li:nth-child(4) ul li {overflow: hidden;}
#nav li:nth-child(4) ul li a[href*="/featured"]:before {content: "Articles";margin-right: 125px;}

/* 'Streams' */
#nav li:nth-child(5) ul li {overflow: hidden;}
#nav li:nth-child(5) ul li a[href*="/watch/episode"]:before {content: "Streams";margin-right: 125px;}

/* 'Promos' */
#nav li:nth-child(5) ul li {overflow: hidden;}
#nav li:nth-child(5) ul li a[href*="/watch/promotion"]:before {content: "Promos";margin-right: 125px;}

/* 'Special' */
#nav li:nth-child(5) ul li {overflow: hidden;}
#nav li:nth-child(5) ul li a[href*="/watch/special"]:before {content: "Special";margin-right: 125px;}

/* Hide 'Help' */
#nav > li:nth-child(6) {display: none !important;}

/* 'Profile' */
#header-menu {display: block !important;right: inherit !important;}
#header-menu.pulldown {top: 0 !important;height: 0 !important;width: 0 !important;}
#header-menu .header-menu-unit {display: block !important;position: absolute !important;padding-left: 0 !important;}
.header-list, .header-message, .header-notification, .header-profile {height: 0 !important;width: 0 !important;}
.header-menu-unit.header-profile, #header-menu .border {visibility: hidden;}
.header-menu-unit.header-profile {top: 39px !important;}
.header-profile .header-profile-dropdown {
    display: block !important; visibility: visible !important;
    right: inherit !important; padding: 5px 0 0 !important;
    border: none !important; box-shadow: none !important;
    height: 41px !important; width: 160px !important;
    background: transparent !important; overflow: hidden; }
.header-profile .header-profile-dropdown:hover {height: auto !important;}
.header-profile .header-profile-dropdown ul {border-radius: 0 0 5px 5px;margin: -5px 10px 10px 0 !important;}
.header-profile .header-profile-dropdown ul:hover {box-shadow: 0 0 10px rgba(var(--colorHeaderShadow),0.5);}

.header-profile .header-profile-dropdown ul li:first-child a {
    font-weight: bold !important;
    font-size: 14px !important;
    color: rgba(var(--colorDarkText)) !important;
    padding: 14px 20px !important;
    background: transparent !important; }
.header-profile .header-profile-dropdown ul li:first-child a:hove...