User:Exempt-Medic/fandommobile.css

/*
 * Hollow Knight Wiki (EN) - Version 1.0.000 (11.03.2022)
 * Skin created by User:Polymeric - CC-BY-SA (11.03.2022)
 * Please, note that this skin was made specifically for the mobile skin of
 * https://hollow-knight.fandom.com/ and that if you want to copy it, either
 * partially or completely, don't forget to give the corresponding credits and
 * cite its origin.
 * cite its origin.

/* TABLE OF CONTENTS */ /*
 * To find a specific section of the document, press CTRL + F and, in the
 * search bar, write the name of the section that you want to jump in.
 * 1. Imports
 * 2. Fonts
 * 3. Global variables
 * 3.1. Themed variables
 * 4. General styles
 * 4.1. Utility classes
 * 5. Templates and components
 * 5.1. Templates
 * 5.2. Components
 * 6. Fixes and tweaks
 * 7. User preferences
 * 7. User preferences

/* 1. Imports. */ @import url(https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap);

/* 2. Fonts. */ @font-face { font-display: swap; font-family: TrajanPro; font-style: normal; font-weight: 400; src: local('TrajanPro-Regular'), url(https://hollowknight.fandom.com/Special:Filepath/TrajanPro-Regular.otf) format('opentype'); }

@font-face { font-display: swap; font-family: TrajanPro; font-style: normal; font-weight: 700; src: local('TrajanPro-Bold'), url(https://hollowknight.fandom.com/Special:Filepath/TrajanPro-Bold.otf) format('opentype'); }

/* 3. Global variables. */
 * root {

--theme-font-1: TrajanPro, 'Times New Roman', serif; --theme-font-2: Lato, Roboto, Arial, sans-serif; --theme-font-3: Perpetua, 'Times New Roman', serif; --scrollbar-background-color: #464646; --scrollbar-corner-color: #121212; --theme-alert-color: #ef9a9a; --theme-alert-color--rgb: 239, 154, 154; --theme-alert-label: #121212; --theme-success-color: #a5d6a7; --theme-success-color--rgb: 165, 214, 167; --theme-success-label: #121212; --theme-message-color: #81d4fa; --theme-selection-color-alpha: .16; --theme-border-color: #ccc; --theme-border-color--rgb: 204, 204, 204; --theme-header-background-color: #000; --theme-header-background-color--rgb: 0, 0, 0; --theme-link-color--filter: invert(67%) sepia(14%) saturate(1350%) hue-rotate(186deg) brightness(113%) contrast(105%); --theme-link-color--hover: #cfdded; --theme-link-color--hover-rgb: 207, 221, 237; --theme-link-color--hover-filter: invert(89%) sepia(16%) saturate(242%) hue-rotate(175deg) brightness(97%) contrast(91%); --theme-text-on-background: rgb(255, 255, 255); --theme-text-on-background--rgb: 255, 255, 255; --theme-text-primary-on-background: rgba(255, 255, 255, .87); --theme-text-secondary-on-background: rgba(255, 255, 255, .6); --theme-text-disabled-on-background: rgba(255, 255, 255, .38); --theme-text-on-background--inverse: rgb(0, 0, 0); --theme-text-on-background--inverse--rgb: 0, 0, 0; --theme-text-primary-on-background--inverse: rgba(0, 0, 0, .87); --theme-text-secondary-on-background--inverse: rgba(0, 0, 0, .6); --theme-text-disabled-on-background--inverse: rgba(0, 0, 0, .38); --theme-color__red: #ef9a9a; --theme-color__red--rgb: 239, 154, 154; --theme-color__red--filter: invert(80%) sepia(36%) saturate(3969%) hue-rotate(306deg) brightness(119%) contrast(87%); --theme-color__pink: #f48fb1; --theme-color__pink--rgb: 244, 143, 177; --theme-color__purple: #ce93d8; --theme-color__purple--rgb: 206, 147, 216; --theme-color__deep-purple: #b39ddb; --theme-color__deep-purple--rgb: 179, 157, 219; --theme-color__indigo: #9fa8da; --theme-color__indigo--rgb: 159, 168, 218; --theme-color__blue: #90caf9; --theme-color__blue--rgb: 144, 202, 249; --theme-color__blue--filter: invert(71%) sepia(49%) saturate(398%) hue-rotate(177deg) brightness(98%) contrast(100%); --theme-color__light-blue: #81d4fa; --theme-color__light-blue--rgb: 129, 212, 250; --theme-color__cyan: #80deea; --theme-color__cyan--rgb: 128, 222, 234; --theme-color__teal: #80cbc4; --theme-color__teal--rgb: 128, 203, 196; --theme-color__green: #a5d6a7; --theme-color__green--rgb: 165, 214, 167; --theme-color__light-green: #c5e1a5; --theme-color__light-green--rgb: 197, 225, 165; --theme-color__lime: #e6ee9c; --theme-color__lime--rgb: 230, 238, 156; --theme-color__yellow: #fff59d; --theme-color__yellow--rgb: 255, 245, 157; --theme-color__yellow--filter: invert(92%) sepia(15%) saturate(1162%) hue-rotate(338deg) brightness(106%) contrast(105%); --theme-color__amber: #ffe082; --theme-color__amber--rgb: 255, 224, 130; --theme-color__orange: #ffcc80; --theme-color__orange--rgb: 255, 204, 128; --theme-color__deep-orange: #ffab91; --theme-color__deep-orange--rgb: 255, 171, 145; --theme-color__brown: #bcaaa4; --theme-color__brown--rgb: 188, 170, 164; --theme-color__grey: #eee; --theme-color__grey--rgb: 237, 237, 237; --theme-color__blue-grey: #b0bec5; --theme-color__blue-grey--rgb: 176, 190, 197; --theme-body-text-color: #fff; --theme-body-text-color--rgb: 255,255,255; --theme-body-text-color--hover: #ccc; --theme-page-background-color: #1a1e23; --theme-page-background-color--rgb: 26, 30, 35; --theme-page-background-color--secondary: #3c4044; --theme-page-background-color--secondary--rgb: 60, 64, 68; --theme-page-text-color: #e6e6e6; --theme-page-text-color--rgb: 230, 230, 230; --theme-page-text-color--hover: #b3b3b3; --theme-link-color: #a0cbff; --theme-link-color--rgb: 160, 203, 255; --theme-link-label-color: #000; --theme-accent-color: #000; --theme-accent-color--rgb: 0,0,0; --theme-accent-color--hover: #333; --theme-accent-label-color: #fff; --theme-page-text-mix-color: #808285; --theme-page-text-mix-color-95: #24282d; --theme-page-accent-mix-color: #0d0f12; --theme-alert-color--hover: #ff3f56; --theme-warning-color: #cf721c; --theme-table-background-color: rgba(230, 230, 230, .08); --theme-table-header-color: rgba(255, 255, 255, .05); --fandommobile-toc-close-icon-color: currentColor; --fandommobile-section-edit-icon-color: var(--theme-link-color); accent-color: var(--theme-color__light-blue); color-scheme: dark light; }

/** Themed variables. **/ /*** Hidden Dreams. ***/ .page-Category_Hidden_Dreams, .page-White_Defender, .page-Grey_Prince_Zote, .page-Hopping_Zoteling, .page-Winged_Zoteling, .page-Volatile_Zoteling, .page-Dreamgate { --theme-border-color: #ce93d8; --theme-border-color--rgb: 207, 147, 216; --theme-page-background-color: #272531; --theme-page-background-color--secondary: #51495b; --theme-page-text-mix-color: #ce93d8; --theme-accent-label-color: #f3e5f5; --theme-link-color: #c078d2; --theme-link-color--rgb: 192, 120, 210; --theme-link-color--hover: #ce93d8; --theme-link-color--hover-rgb: 207, 147, 216; --theme-selection-color-alpha: .2; }

/*** The Grimm Troupe. ***/ body[class*='Grimm'], .page-Brumm, .page-Divine, .page-Nymm, .page-Dreamshield, .page-Sprintmaster, .page-Weaversong, .page-Carefree_Melody, .page-Seal_of_Binding { --theme-border-color: #ef9a9a; --theme-border-color--rgb: 239, 154, 154; --theme-page-background-color: #2b2328; --theme-page-background-color--secondary: #59454a; --theme-page-text-mix-color: #ef9a9a; --theme-accent-label-color: #ffebee; --theme-link-color: #ef6069; --theme-link-color--rgb: 239, 96, 106; --theme-link-color--hover: #ef9a9a; --theme-link-color--hover-rgb: 229, 43, 81; --theme-selection-color-alpha: .32; }

/*** Godmaster. ***/ .page-Category_Godmaster, .page-Brothers_Oro_Mato, .page-Fluke_Hermit, .page-Flukemunga, .page-Godseeker_Mode, .page-Great_Nailsage_Sly, .page-Hall_of_Gods, .page-Paintmaster_Sheo, .page-Pale_Lurker, .page-Pantheon_of_Hallownest, .page-Pantheon_of_the_Artist, .page-Pantheon_of_the_Knight, .page-Pantheon_of_the_Master, .page-Pantheon_of_the_Sage, .page-Pure_Vessel, .page-Eternal_Ordeal, .page-Godseeker, .page-Void_Idol, .page-Weathered_Mask, .page-Godtuner, .page-Godhome, .page-Pantheons, .page-Sisters_of_Battle, .page-Winged_Nosk, .page-Absolute_Radiance { --theme-border-color: #fff59d; --theme-border-color--rgb: 255, 246, 157; --theme-page-background-color: #393933; --theme-page-background-color--secondary: #565750; --theme-page-text-mix-color: #fff59d; --theme-accent-label-color: #fffde7; --theme-link-color: #cdc686; --theme-link-color--rgb: 220, 206, 146; --theme-link-color--hover: #fff59d; --theme-link-color--hover-rgb: 255, 245, 157; }

/*** Lifeblood. ***/ .page-Category_Lifeblood, .page-Hive_Knight { --theme-border-color: #81d4fa; --theme-border-color--rgb: 129, 212, 250; --theme-page-background-color: #182a34; --theme-page-background-color--secondary: #374853; --theme-page-text-mix-color: #81d4fa; --theme-accent-label-color: #e1f5fe; --theme-link-color: #31cee8; --theme-link-color--rgb: 49, 206, 232; --theme-link-color--hover: #81d4fa; --theme-link-color--hover-rgb: 129, 213, 250; }

/*** Voidheart. ***/ .page-Voidheart_Edition { --theme-border-color: #eee; --theme-border-color--rgb: 238, 238, 238; --theme-page-background-color: #212121; --theme-page-background-color--secondary: #424242; --theme-page-text-mix-color: #eee; --theme-accent-label-color: #e1f5fe; --theme-link-color: #bdbdbd; --theme-link-color--rgb: 189, 189, 189; --theme-link-color--hover: #eee; }

/*** Lore. ***/ .page-Category_Lore, .page-Abyss_Creature, .page-Ancient_Civilisation, .page-Bees, .page-Boon, .page-Dream_Realm, .page-Dreamers, .page-Ellina, .page-Five_Great_Knights, .page-Flukes, .page-Fools, .page-Godseekers, .page-Hallownest, .page-Higher_Beings, .page-Infection, .page-Lord_Fool, .page-Mantis_Tribe, .page-Mosskin_Tribe, .page-Moth_Tribe, .page-Pale_King, .page-Pharloom, .page-Snail_Shamans, .page-Soul_Sanctum_s_Scholars, .page-Grimm_Troupe_Lore, .page-Nightmare’s_Heart, .page-Vessels, .page-Void, .page-Void_Entity, .page-Weavers, .page-Wyrms, .page-Vespa, .page-Unn, .page-Mushroom_Clan, .page-Spider_Tribe, .page-Seals, .page-Grimm_Troupe_Lore { --theme-border-color: #b0bec5; --theme-border-color--rgb: 176, 191, 197; --theme-page-background-color: #263238; --theme-page-background-color--secondary: #37474f; --theme-page-text-mix-color: #b0bec5; --theme-accent-label-color: #e2f1f8; --theme-link-color: #b0bec5; --theme-link-color--rgb: 176, 191, 197; --theme-link-color--hover: #fff; --theme-link-color--hover-rgb: 255, 255, 255; }

/*** Silksong. ***/ body[class*='Silksong'], .page-Deep_Docks, .page-Greymoor, .page-Moss_Grotto, .page-Bonebottom, .page-Ballow, .page-Church_Keeper, .page-Flea, .page-Forge-Daughter, .page-Garmond_and_Zaza, .page-Huntress, .page-Shakra, .page-Sherma, .page-Trobbio, .page-Carmelita, .page-Lace, .page-Moss_Mother, .page-Sharpe, .page-Crawbug, .page-Dustroach, .page-Rosary, .page-Rosaries, .page-Shell_Shards, .page-Silk, .page-Bind, .page-Category_Tools, .page-Marrow, .page-Grindle, .page-Caravan, .page-Seth, .page-Bell_Beast, .page-Last_Judge, .page-Druid_of_the_Moss_Temple, .page-Citadel, .page-Needle, .page-Quests { --theme-border-color: #ffab91; --theme-border-color--rgb: 255, 172, 145; --theme-page-background-color: #2c2a27; --theme-page-background-color--secondary: #5b5347; --theme-page-text-mix-color: #ffab91; --theme-accent-label-color: #ffddc1; --theme-link-color: #feb556; --theme-link-color--rgb: 254, 182, 86; --theme-link-color--hover: #ffab91; --theme-link-color--hover-rgb: 255, 172, 145; }

body { --fandommobile-section-edit-icon-color: var(--theme-link-color); }

/* 4. General styles */
 * placeholder {

opacity: .6; }


 * selection {

background-color: rgba(var(--theme-link-color--hover-rgb), var(--theme-selection-color-alpha, .16)); }

input::selection, textarea::selection { background-color: var(--theme-text-on-background); color: var(--theme-text-on-background--inverse); }


 * target-text {

background-color: var(--theme-link-color); color: var(--theme-text-on-background--inverse); }

hr { margin: 1rem 0; }

q { font-style: italic; quotes: '“' '”' '‘' '’'; }

q::before { content: open-quote; }

q::after { content: close-quote; }

.mw-plusminus-pos { color: var(--theme-success-color); }

.mw-plusminus-neg, .unpatrolled { color: var(--theme-alert-color); }

color: var(--theme-color__red) !important; }
 * 1) wpTextbox0 {

.previewnote { color: var(--theme-color__red); }

/** Scrollbar. **/ /*** Firefox scrollbar. ***/ html, body { scrollbar-color: rgba(var(--theme-link-color--hover-rgb), .7) var(--scrollbar-background-color); }


 * -webkit-scrollbar {

background-color: var(--scrollbar-background-color); }


 * -webkit-scrollbar-thumb {

background-color: rgba(var(--theme-link-color--hover-rgb), .45); }


 * -webkit-scrollbar-thumb:hover {

background-color: rgba(var(--theme-link-color--hover-rgb), .57); }


 * -webkit-scrollbar-thumb:active {

background-color: rgba(var(--theme-link-color--hover-rgb), .7); }


 * -webkit-scrollbar-corner {

background-color: var(--scrollbar-corner-color); }


 * -webkit-scrollbar-button {

background-position: center; background-size: 18px; }


 * -webkit-scrollbar-button:hover {

background-color: rgba(var(--theme-link-color--hover-rgb), .2); }


 * -webkit-scrollbar-button:active {

background-color: rgba(var(--theme-link-color--hover-rgb), .87); }

/**** Up. ****/
 * -webkit-scrollbar-button:vertical:decrement,

background-image: url(https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_arrow_drop_up_white_24px.svg); }
 * -webkit-scrollbar-button:vertical:decrement {


 * -webkit-scrollbar-button:vertical:decrement:active,

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24' fill='%23000'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M7 14l5-5 5 5z'/%3E%3C/svg%3E"); }
 * -webkit-scrollbar-button:vertical:decrement:active {

/**** Down. ****/
 * -webkit-scrollbar-button:vertical:increment,

background-image: url(https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_arrow_drop_down_white_24px.svg); }
 * -webkit-scrollbar-button:vertical:increment {


 * -webkit-scrollbar-button:vertical:increment:active,

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24' fill='%23000'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); }
 * -webkit-scrollbar-button:vertical:increment:active {

/**** Left. ****/
 * -webkit-scrollbar-button:horizontal:decrement,

background-image: url(https://tobias-laboratory.fandom.com/Special:Filepath/Arrow_left_dark.svg); }
 * -webkit-scrollbar-button:horizontal:decrement {


 * -webkit-scrollbar-button:horizontal:decrement:active,

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24' fill='%23000'%3E%3Cpath d='M14 7l-5 5 5 5V7z'/%3E%3Cpath d='M24 0v24H0V0h24z' fill='none'/%3E%3C/svg%3E"); }
 * -webkit-scrollbar-button:horizontal:decrement:active {

/**** Right. ****/
 * -webkit-scrollbar-button:horizontal:increment,

background-image: url(https://tobias-laboratory.fandom.com/Special:Filepath/Arrow_right_dark.svg); }
 * -webkit-scrollbar-button:horizontal:increment {


 * -webkit-scrollbar-button:horizontal:increment:active,

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24' fill='%23000'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3Cpath d='M0 24V0h24v24H0z' fill='none'/%3E%3C/svg%3E"); }
 * -webkit-scrollbar-button:horizontal:increment:active {

body.rubik, body.rubik button, body.rubik input, body.rubik select, body.rubik textarea { font-family: var(--theme-font-2); }

body.rubik h1, body.rubik h2, body.rubik h3, body.rubik h4, body.rubik h5, body.rubik h6 { font-family: var(--theme-font-1); }

body, background-color: var(--theme-page-background-color); }
 * 1) fandom-mobile-wrapper {

body { background-image: none; }

.mobile-community-bar { --theme-sticky-nav-background-color: #000; --theme-sticky-nav-background-color--rgb: 0, 0, 0; --theme-sticky-nav-text-color: #fff; --theme-sticky-nav-text-color--hover: #ccc; --theme-sticky-nav-dynamic-color-1: #fff; --theme-sticky-nav-dynamic-color-1--rgb: 255, 255, 255; --theme-sticky-nav-dynamic-color-2: #e6e6e6; --theme-sticky-nav-dynamic-color-2--rgb: 230, 230, 230; background-color: var(--theme-sticky-nav-background-color); color: var(--theme-sticky-nav-text-color); }

.mobile-community-bar__content { border: 0; margin: 0; padding: 0 12px; }

.mobile-community-bar__sitename { font-family: var(--theme-font-1); font-weight: 700; }

.mobile-community-bar .wds-dropdown { --wds-dropdown-background-color: var(--theme-page-background-color--secondary); --wds-dropdown-border-color: var(--theme-border-color); --wds-dropdown-text-color: var(--theme-page-text-color); --wds-dropdown-linked-item-color: var(--theme-link-color); --wds-dropdown-linked-item-background-color: rgba(var(--theme-link-color--rgb), .1); --wds-dropdown-scrollable-shadow-color: rgba(var(--theme-page-text-color--rgb), .1); }

.mobile-community-bar__navigation-header, .mobile-community-bar__navigation-back { color: var(--theme-body-text-color); }

.bodySearch .mw-ui-button, .commentbox .mw-ui-button, .createbox .mw-ui-button, .mw-movebox .mw-ui-button, .searchbox .mw-ui-button { background-color: var(--theme-accent-color); border-color: var(--theme-accent-color); color: var(--theme-accent-label-color); }

.mobile-gallery-default .mobile-gallery__image-caption, .article-media-thumbnail figcaption { color: var(--theme-text-secondary-on-background); }

.article-content .pi ol, .article-content .pi ul { list-style: none; }

.pi-section-tab.wds-tabs__tab { border: 0; font-family: var(--theme-font-1); }

.pi-section-tab.wds-tabs__tab.pi-section-active { border-bottom: 1px solid transparent; border-image: linear-gradient(to right, #fff0, currentcolor, #fff0) 47% 0%; box-shadow: none; }

.pi-section-tab.wds-tabs__tab.pi-section-active .pi-section-label { color: var(--theme-text-on-background) !important; }

.pi-image-collection__images-wrapper { margin: 12px 0; }

h2.pi-title { background-color: var(--theme-accent-color); color: var(--theme-text-on-background); }

.mw-references-wrap { margin-bottom: 2rem; }
 * 1) Trivia-collapsible-section > ul,

.mobile-gallery__column .mobile-gallery__image { margin: 1.5rem 0; }

.godmaster-badge { height: 20px; width: 20px; }

/** 4.1. Utility classes. **/ .mobile-left { text-align: left; }

.mobile-center { text-align: center; }

.mobile-right { text-align: right; }

.mobile-caption-left figcaption { text-align: left; }

.mobile-caption-right figcaption { text-align: right; }

.mobile-caption-center figcaption { text-align: center; }

.scroll-table { overflow-x: scroll; }

.scroll-table th, .scroll-table td { min-width: 128px; }

/** * For a less confusing class name, rather than using the actual px/rem values * in the class name, we'll just count from 1 to 6. Less memorization required. .article-table-wrapper .article-table th.mobile-width-px-1, .article-table-wrapper .article-table td.mobile-width-px-1 { min-width: 72px; }

.article-table-wrapper .article-table th.mobile-width-px-2, .article-table-wrapper .article-table td.mobile-width-px-2 { min-width: 96px; }

.article-table-wrapper .article-table th.mobile-width-px-3, .article-table-wrapper .article-table td.mobile-width-px-3 { min-width: 120px; }

.article-table-wrapper .article-table th.mobile-width-px-4, .article-table-wrapper .article-table td.mobile-width-px-4 { min-width: 144px; }

.article-table-wrapper .article-table th.mobile-width-px-5, .article-table-wrapper .article-table td.mobile-width-px-5 { min-width: 168px; }

.article-table-wrapper .article-table th.mobile-width-px-6, .article-table-wrapper .article-table td.mobile-width-px-6 { min-width: 192px; }

.article-table-wrapper .article-table th.mobile-width-rem-1, .article-table-wrapper .article-table td.mobile-width-rem-1 { min-width: 4.5rem; }

.article-table-wrapper .article-table th.mobile-width-rem-2, .article-table-wrapper .article-table td.mobile-width-rem-2 { min-width: 6rem; }

.article-table-wrapper .article-table th.mobile-width-rem-3, .article-table-wrapper .article-table td.mobile-width-rem-3 { min-width: 7.5rem; }

.article-table-wrapper .article-table th.mobile-width-rem-4, .article-table-wrapper .article-table td.mobile-width-rem-4 { min-width: 9rem; }

.article-table-wrapper .article-table th.mobile-width-rem-5, .article-table-wrapper .article-table td.mobile-width-rem-5 { min-width: 10.5rem; }

.article-table-wrapper .article-table th.mobile-width-rem-6, .article-table-wrapper .article-table td.mobile-width-rem-6 { min-width: 12rem; }

.article-table-wrapper .center-table tr > td { text-align: center; }

.article-table-wrapper .middle-table tr > td { vertical-align: middle; }

.typography p { margin: 0; }

.typography--headline1 { display: block; font: 300 2rem/2.5rem var(--theme-font-1); letter-spacing: -.015625em }

.typography--headline2 { display: block; font: 300 1.5rem/1.875rem var(--theme-font-1); letter-spacing: -.0083333333em; }

.typography--headline3 { display: block; font: 400 1.125rem/1.406rem var(--theme-font-1); letter-spacing: normal; }

.typography--headline4 { display: block; font: 400 1rem/1.25rem var(--theme-font-1); letter-spacing: .0073529412em; }

.typography--headline5 { display: block; font: 400 .875rem/1.094rem var(--theme-font-1); letter-spacing: normal; }

.typography--headline6 { display: block; font: 500 .875/1.094rem var(--theme-font-1); letter-spacing: .0125em; }

.typography--subtitle1 { font: 400 1rem/1.75rem var(--theme-font-2); letter-spacing: .009375em; }

.typography--subtitle2 { font: 500 .875rem/1.375rem var(--theme-font-2); letter-spacing: .0071428571em; }

.typography--body1 { font: 400 1rem/1.5rem var(--theme-font-2); letter-spacing: .03125em; }

.typography--body2 { font: 400 .875rem/1.25rem var(--theme-font-2); letter-spacing: .0178571429em; }

.typography--caption { font: 400 .75rem/1.25rem var(--theme-font-2); letter-spacing: .0333333333em; }

.typography--button { font: 500 .875rem/2.25rem var(--theme-font-2); letter-spacing: .0892857143em; text-transform: uppercase; }

.typography--overline { display: block; font: 500 .75rem/2rem var(--theme-font-2); letter-spacing: .1666666667em; text-transform: uppercase; }

.typography--footnote { display: block; font: 400 .75rem/1.25rem var(--theme-font-2); letter-spacing: normal; }

.typography--on-background { color: var(--theme-text-on-background); }

.typography--primary { color: var(--theme-text-primary-on-background); }

.typography--secondary { color: var(--theme-text-secondary-on-background); }

.typography--disabled { color: var(--theme-text-disabled-on-background); }

.typography--on-background--inverse { color: var(--theme-text-on-background--inverse); }

.typography--primary--inverse { color: var(--theme-text-primary-on-background--inverse); }

.typography--secondary--inverse { color: var(--theme-text-secondary-on-background--inverse); }

.typography--disabled--inverse { color: var(--theme-text-disabled-on-background--inverse); }

.typography--smooth-text { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }

.typography--ellipsis-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.typography--ellipsis-text--flex { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.h-c__red { color: var(--theme-color__red); }

.h-c__pink { color: var(--theme-color__pink); }

.h-c__purple { color: var(--theme-color__purple); }

.h-c__deep-purple { color: var(--theme-color__deep-purple); }

.h-c__indigo { color: var(--theme-color__indigo); }

.h-c__blue { color: var(--theme-color__blue); }

.h-c__light-blue { color: var(--theme-color__light-blue); }

.h-c__cyan { color: var(--theme-color__cyan); }

.h-c__teal { color: var(--theme-color__teal); }

.h-c__green { color: var(--theme-color__green); }

.h-c__light-green { color: var(--theme-color__light-green); }

.h-c__lime { color: var(--theme-color__lime); }

.h-c__yellow { color: var(--theme-color__yellow); }

.h-c__amber { color: var(--theme-color__amber); }

.h-c__orange { color: var(--theme-color__orange); }

.h-c__deep-orange { color: var(--theme-color__deep-orange); }

.h-c__brown { color: var(--theme-color__brown); }

.h-c__grey { color: var(--theme-color__grey); }

.h-c__blue-grey { color: var(--theme-color__blue-grey); }

.ic-yellow { filter: var(--theme-color__yellow--filter); }

.ic-red { filter: var(--theme-color__red--filter); }

.ic-blue { filter: var(--theme-color__blue--filter); }

/* 5. Templates and components. */ /** 5.1. Templates. **/ .article-table-wrapper tr > .achievement-table__image { text-align: center; vertical-align: middle; width: 96px; }

.achievement-table__image { width: 90px; }

.achievement-table__image figure { margin: 0; }

.achievement-table__title { text-align: left; }

.hatnote { font-style: italic; margin-bottom: .5em; margin-left: 1em; padding-left: 1.5em; }

.message-card { align-items: center; border-bottom: 1px solid; display: flex; margin: .75rem 0; padding: 1rem 2rem; width: auto; }

.message-card p { margin: 0; }

.message-card .image-container { display: flex; justify-content: center; margin-right: 2rem; }

.message-card .text-container { display: flex; flex-direction: column; }

.message-card .image { margin-right: 2rem; }

.message-card .title { font-weight: 600; }

.message-card.info-card { background-color: rgba(var(--theme-color__blue--rgb), .08); border-bottom-color: var(--theme-color__blue); }

background-color: rgba(255, 235, 59, .08); border-bottom-color: #fff59d; }
 * 1) disclaimer-advice {

background-color: rgba(239, 154, 154, .08); border-bottom-color: #ef9a9a; }
 * 1) disclaimer-delete,
 * 2) disclaimer-block {

.hk-cp-header { display: block; font-family: var(--theme-font-1); margin-block-start: 1em; text-align: center; width: 100%; }

.gradient-divider, .hk-divider, .ss-divider { margin: 1rem 0; }

.gradient-divider { border-width: .063rem 0 0 0; border-image: linear-gradient(to right, #fff0, var(--theme-accent-label-color), #fff0) 47% 0% 1; width: 100%; }

.hk-divider { background: transparent center/contain scroll no-repeat url(https://hollowknight.fandom.com/Special:Filepath/Hr.png); border: 0; height: 54px; width: 100%; }

.ss-divider { background: transparent center/contain scroll no-repeat url(https://hollowknight.fandom.com/Special:Filepath/SS_Hr.png); border: 0; height: 41px; width: 100%; }

.portable-infobox-wrapper + .article-table-wrapper { border: 0; margin: 0; overflow: auto; }

.article-table-wrapper .article-nav { background-color: transparent; }

.article-table-wrapper .article-nav tr > td:not(:last-child), .article-table-wrapper .article-nav tr > th:not(:last-child) { border: 0; }

.article-nav { font-family: var(--theme-font-1); text-align: center; }

.article-table-wrapper .article-nav tr > td { padding: 0; }

.article-table-wrapper .article-nav a, .article-table-wrapper .article-nav strong { display: block; padding: .5rem; width: 100%; }

.article-table-wrapper .article-nav a { transition: background-color 75ms; }

.article-table-wrapper .article-nav a:hover { background-color: rgba(var(--theme-link-color--rgb), .08); }

.article-table-wrapper .article-nav a:focus, .article-table-wrapper .article-nav a:active { background-color: rgba(var(--theme-link-color--rgb), .16); }

.portable-infobox-wrapper + .article-table-wrapper + hr { border-color: var(--theme-text-on-background); margin: 0 0 2rem; }

.hk-cp-header + hr { border-color: var(--theme-border-color); margin: 0 0 2rem; }

.mw-parser-output .pi-item[data-source='description1'] .pi-data-value { margin: auto; }

.mw-parser-output .pi-item[data-source='description1'] .pi-data-value blockquote { margin: 0; }

.mw-parser-output blockquote { margin: 1.5rem auto; padding: 0; text-align: center; width: 20rem; }

.mw-parser-output blockquote:before, .mw-parser-output blockquote:after { content: ''; display: block; }

.mw-parser-output blockquote:before { background: transparent center/contain scroll no-repeat url(https://static.wikia.nocookie.net/hollowknight/images/9/96/Dialogue_Top.png/revision/latest/scale-to-width-down/250); height: 2.125rem; /* 34px. */ margin: 0 auto 1rem; }

.mw-parser-output blockquote:after { background: transparent center/contain scroll no-repeat url(https://static.wikia.nocookie.net/hollowknight/images/c/c7/Dialogue_Bottom.png/revision/latest/scale-to-width-down/250); height: 1.313rem; /* 21px. */ margin: 1rem auto 0; }

.mw-parser-output blockquote p { margin: 0; }

.mw-parser-output blockquote hr { border-width: .063rem 0 0 0; border-image: linear-gradient(to right, #fff0, var(--theme-accent-label-color), #fff0) 47% 0% 1; margin: 1rem 0; width: 100%; }

.mw-parser-output blockquote cite { margin: 0; text-align: right; text-transform: initial; }

.mw-parser-output blockquote cite:before { color: var(--theme-text-on-background); content: '\2014 '; }

--color: #c078d2; --color--rgb: 192, 120, 210; --color--hover: #ce93d8; background-color: rgba(var(--color--rgb), .08); border-radius: .5rem; box-shadow: 0 0 .5rem 0 rgba(var(--color--rgb), .20); margin: 1rem 1rem 2rem; padding: 1rem; width: calc(100% - 2rem); }
 * 1) dn-dialogues {

margin-bottom: 1rem; }
 * 1) dn-dialogues ul:not(:last-of-type) {

margin-bottom: 0; }
 * 1) dn-dialogues p,
 * 2) dn-dialogues ul:last-of-type {

@supports (columns: 2) { @media (orientation: landscape) { #dn-dialogues .dn-dialogue-section--layout[data-columns='2'] { columns: 2; }

#dn-dialogues .dn-dialogue-section--layout[data-columns='3'] { columns: 3; } } }

background: rgba(0, 0, 0, .2); border: 2px solid rgb(255, 245, 157); box-shadow: inset 0 0 6px 6px rgba(255, 245, 157, .2), inset 0 0 8px 8px rgba(255, 245, 157, .14), inset 0 0 10px 10px rgba(255, 245, 157, .12); padding: 1.5rem; width: 100%; }
 * 1) gm-boss-table {

vertical-align: middle; }
 * 1) gm-boss-table > tbody > tr:first-child > td:first-child,
 * 2) gm-boss-table > tbody > tr:nth-child(4) > td[rowspan='2'] {

border: 0; }
 * 1) gm-boss-table img,
 * 2) gm-boss-table td,
 * 3) gm-boss-table tr:not(:first-child) {

border-color: rgb(255, 245, 157); }
 * 1) gm-boss-table tr:first-child {

margin: 0; }
 * 1) gm-boss-table p {

margin-bottom: 8px; }
 * 1) gm-boss-table .gm-boss--title {

text-align: center; }
 * 1) gm-boss-table .gm-boss-epithet {

color: #cdc686; }
 * 1) gm-boss-table .gm-boss--title {

display: none !important; }
 * 1) mw-collapsed-no-text_charms-nav hr,
 * 2) mw-collapsed-no-text_enemies-nav tr:nth-child(3),
 * 3) mw-collapsed-no-text_enemies-nav tr:nth-child(5),
 * 4) mw-collapsed-no-text_enemies-nav tr:nth-child(7),
 * 5) mw-collapsed-no-text_enemies-nav tr:nth-child(9),
 * 6) mw-collapsed-no-text_enemies-nav tr:nth-child(n+3) hr {

border: 0; }
 * 1) mw-collapsed-no-text_charms-nav img {

vertical-align: middle; }
 * 1) mw-collapsed-no-text_charms-nav tr td {

margin: 0; }
 * 1) mw-collapsed-no-text_charms-nav .hk-cp-header {

margin: 0; }
 * 1) mw-collapsed-no-text_enemies-nav p {

margin: .5rem 0; }
 * 1) mw-collapsed-no-text_enemies-nav hr {

@media (orientation: landscape) { #mw-collapsed-no-text_enemies-nav th { text-align: center; vertical-align: middle; width: 10rem; } }

@media (orientation: portrait) { .article-table-wrapper:has(#mw-collapsed-no-text_enemies-nav) { margin: 2rem 0; }

#mw-collapsed-no-text_enemies-nav > tbody > tr { display: flex; flex-flow: column wrap; }

#mw-collapsed-no-text_enemies-nav th, #mw-collapsed-no-text_enemies-nav td { max-width: initial; }

#mw-collapsed-no-text_enemies-nav tr:first-child { border-bottom: none; }

#mw-collapsed-no-text_enemies-nav th { border-right: none; } }

/** 5.2. Components. **/ .mw-parser-output ul { list-style-image: url(https://hollowknight.fandom.com/Special:Filepath/BulletPoint.png); }

/* 6. Fixes and tweaks. */ @supports (columns: 2) { @media (orientation: landscape) { .achievements-list { columns: 2; margin-bottom: 2rem; }

.article-table-wrapper, .achievement-table { -webkit-column-break-inside: avoid; /* Chrome, Safari, and Opera. */               page-break-inside: avoid; /* Firefox. */                    break-inside: avoid; /* IE 10+. */   }  } }

/* 7. User preferences. */ /** Disabling all motions if the user's browser/OS is configured to do so. **/ @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-delay: -1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; background-attachment: initial !important; scroll-behavior: auto !important; transition-duration: 0s !important; transition-delay: 0s !important; } }