MediaWiki:Common.css

/* CSS placed here will be applied to all skins */ @import url('https://fonts.googleapis.com/css2?family=Lato&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); @import url('https://fonts.googleapis.com/css?family=Rubik&display=swap');

/* --START of custom code made from Pignu: This comment is here only to remind me where I'm editing stuff-- */
 * root {

--header-height: 3rem; /* Define colors as variables to have them all in one place and easily find them */ --scrollbar-bg-color: transparent; --scrollbar-thumb-color: #921131; --scrollbar-thumb-color-hover: #720d27; --body-bg-color: #0c0d0f; --header-bg-color: #212129; --footer-bg-color: #050506; } /* Define scrollbar for Webkit and Blink browsers */
 * -webkit-scrollbar {

width: 1.1rem; background-color: var(--scrollbar-bg-color); }
 * -webkit-scrollbar-corner {

background-color: var(--scrollbar-bg-color); }
 * -webkit-scrollbar-track {

background-color: transparent; }
 * -webkit-scrollbar-thumb {

border: 0.3rem solid transparent; border-radius: 0.6rem; background-color: var(--scrollbar-thumb-color); background-clip: padding-box; }
 * -webkit-scrollbar-thumb:hover {

border: 0.3rem solid transparent; border-radius: 0.6rem; background-color: var(--scrollbar-thumb-color-hover); background-clip: padding-box; }

html { /* Define scrollbar for Firefox */ scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-bg-color); background-color: var(--body-bg-color); }

body { font-family: 'Lato', sans-serif; background-color: var(--body-bg-color); }

height: 100vh; display: flex; flex-direction: column; /* Define scrollbar for Firefox */ scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-bg-color); }
 * 1) mw-wrapper {

background-image: none; /*background-position: initial;*/ /*background-size: initial;*/ /*background-repeat: initial;*/ /*background-attachment: initial;*/ background-color: transparent; border: none; flex: 1 0 auto; }
 * 1) mw-content-container {

font-family: 'Roboto Condensed', sans-serif; background-color: var(--header-bg-color); }
 * 1) mw-header-container {

flex-shrink: 0; }
 * 1) mw-footer-container {

@media screen and (min-width: 851px) { #mw-wrapper { position: fixed; top: 0; overflow: auto; width: 100vw; height: calc(100vh - var(--header-height)); margin-top: var(--header-height); background-color: var(--body-bg-color); }	#mw-content-container { margin: 0 !important; /* Remember to remove this important when no more needed*/ }	#mw-header-container { min-height: var(--header-height); } }

@media screen and (min-width: 1100px) { #mw-content-container { padding-bottom: 1.5rem; } } /* --END of custom code made from Pignu: This comment is here only to remind me where I'm editing stuff-- */

.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6, .mw-body udt { font-family: 'Lato', sans-serif !important; }

font-size: 1.4em !important; padding: 0 0.5em !important; font-family: "roboto condensed"; }
 * 1) p-logo-text a.long {

font-size: 1.05em !important; width: inherit !important; background: white; background: rgba(255, 255, 255, 0.9) !important; } /*Fixing glitch when width is set to tablet size.*/ @media (min-width: 851px) and (max-width: 1099px) { #mw-content { margin-top: 0; }   #mw-header-hack .color-bar { display: none; }   #mw-header-nav-hack { display: none; } }   background: #152942; }
 * 1) mw-content {
 * 1) mw-footer-container {

.color-middle, .color-right, .color-left { background: #3366cc; }

.sidebar-chunk { background: white; background: rgba(248, 250, 255, 0.9) !important; }

.grid-container { display: grid; grid-auto-columns: 1fr; }

.filter-button-selected, .filter-button-selected:hover { background: #ccc; }

/** Spoiler CSS **/ .spoiler-text { filter: blur(5px); transition-property: -webkit-filter; transition-duration: .4s; }

.spoiler-text:hover, .spoiler-text:focus { filter: blur(0px); }

.spoiler-img { filter: blur(15px); transition-property: -webkit-filter; transition-duration: .4s; }

.spoiler-img:hover, .spoiler-img:focus { filter: blur(0px); }

/** Card CSS **/ .card { box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2); margin: 0.5em; padding: 1em; border-radius: 8px; }

.card-header { font-size: 1.2em; font-weight: bold; margin-bottom: 0.5em; background: linear-gradient(45deg, #b9ecff, transparent); padding: 0.25em .5em; }

.card table { width: 100%; border: none; }

.card table th { text-align: left; border: none; border-bottom: 1px solid #ccc; }

.card table td { text-align: right; border: none; border-bottom: 1px solid #ccc; }

table.half th, table.half td { width: 50%; }

.card table tr:last-of-type td, .card table tr:last-of-type th { border: none; }

/** Responsive Image **/ .res-img img { width: 100%; height: auto; }

/* CSS For No History Tabber (Template:Tab) */ .no-history-tabber-panel .oo-ui-optionWidget { color: black; font-family: Verdana, sans-serif; font-size: 12px; font-weight: 700; padding: 3px .5em; }

.no-history-tabber-panel .oo-ui-optionWidget:hover { background-color: #e4e4e4 !important; }

.no-history-tabber-panel .oo-ui-optionWidget.oo-ui-widget-enabled { border: 1px solid #e0e0e0; }

.no-history-tabber-panel .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected { border: 1px solid black; cursor: pointer; }

.no-history-tabber-panel .oo-ui-tabOptionWidget .oo-ui-labelElement-label { border: 0 !important; margin: 0; padding: 0; line-height: normal; }

.no-history-tabber-panel .oo-ui-tabSelectWidget-framed { background-color: inherit; }

.no-history-tabber-panel .oo-ui-optionWidget { color: black; font-family: 'Lato', sans-serif !important; font-size: 14px; font-weight: 700; padding: 3px .5em; background: linear-gradient(to right, #d7e9fb 50%, white 50%); background-size: 200% 100%; background-position: right bottom; transition: all .25s ease-out; }

.no-history-tabber-panel .oo-ui-optionWidget:hover { background-position: left bottom; }

.no-history-tabber-panel .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected { border: 1px solid #000; }

/* End of No History Tabber CSS*/

/** Unit icon CSS **/ .icon-template { display: inline-block; text-align: center; padding: 3px; }

/** Cargo Tables **/ .cargoTable thead tr { background: #e2f2ff !important; border: 1px solid #d4d4d4; }

/** Notice Templates **/ .page-notice { padding: 0.25em 1em; background: #eee; margin: auto; max-width: 600px; border: 1px solid lightgray; border-left: 8px solid gray; }

/** Template:Page header **/ background-color: #b9ecff; border: 1px solid skyblue; display: grid; grid-template-columns: repeat(3, 1fr); padding: 1em; }
 * 1) page-header {

grid-row: 1; text-align: left; align-self: center; }
 * 1) page-header-left {

grid-row: 1; text-align: right; align-self: center; }
 * 1) page-header-right {

grid-row: 1; text-align: center; font-weight: bold; font-size: 1.4em; }
 * 1) page-header-center {

font-size: 0.7em; }
 * 1) page-subheader-center {

/** Template:Info grid **/ .info-grid { display: grid; grid-auto-columns: 1fr; grid-gap: 0.5em; }

.info-grid-image { grid-row: 1; grid-column-start: 1; grid-column-end: 8; text-align: center; padding: 1em; margin: auto; }

.info-grid-image img { width: 100%; height: auto; }

.info-grid-general { grid-row: 1; text-align: center; grid-column-start: 8; grid-column-end: 13; padding: 1em; }

.info-grid-general .wikitable { width: 100%; }

@media screen and (max-width: 768px) { .info-grid-image { grid-row: 1; grid-column-start: 1; grid-column-end: 13; }

.info-grid-general { grid-row: 2; grid-column-start: 1; grid-column-end: 13; } }

/* One-sided navigation menu */ /* One-sided navigation menu */ @media (min-width: 1340px) { #mw-content-block { display: grid; grid-template-rows: max-content; width: 70%; }

#mw-content { width:100%; },   #content-bottom-stuff { margin-left: 14em; }

#mw-content-wrapper { grid-row-start: 1; grid-row-end: 99; grid-column: 1; order: unset; }

#mw-site-navigation { grid-row: 1; grid-column: 1; order: unset; }	/*Changing sidebar width and general reformat so	it won't break when readjusted.*/ #mw-site-navigation { display : flex; flex-direction : column; width : 100%; }	#site-navigation { width : 100%; height : 100%; margin : 0 1rem; margin-top : 0.4rem !important; padding : 0 !important; }	#p-logo { margin : 0; width : 100%; }	/*End of reformat*/ #mw-related-navigation { grid-row: 2; grid-column: 1; width: 14em; padding: 0 1em 0 0; order: unset; }

div.color-middle { margin-right: 0; } } /*Change sidebar link color*/ #site-navigation a { color: #f72058; }   #site-navigation a:visited { color: #f72058; } /*Change Link Hover behavior*/ @keyframes linkHover { /*This is what sets the animation for hover link*/ to { color : white; } } a:hover { text-decoration : none; /*	color: #757575 !important; */ -moz-animation : linkHover 0.3s forwards; -webkit-animation : linkHover 0.3s forwards; animation : linkHover 0.3s forwards; }

/*Changing small screen bg from white to black*/ @media (max-width: 850px) { #mw-content-block { background: inherit; } }

/* Re-aligning bottom logos */ padding-right: 1em; }
 * 1) footer {

/***************************************************************************/ /****************************- Custom Elements -****************************/ /***************************************************************************/

.mw-editsection { display: none; }

/**- Top Bar Colour -**/ color: white; }
 * 1) mw-header-container div {

color: white; width : max-content; }	font-family : "roboto condensed"; }
 * 1) mw-header-container #p-banner {
 * 1) mw-header-container #personal h2 {

filter: invert(100%); }
 * 1) pt-notifications-alert .oo-ui-icon-bell {

filter: invert(100%); }
 * 1) pt-notifications-notice .oo-ui-icon-tray {

color: black; }
 * 1) pt-notifications-alert .mw-echo-notifications-badge::after,
 * 2) pt-notifications-notice .mw-echo-notifications-badge::after {

div.color-left { background-color: #C2185E; }

div.color-middle, div.color-right { background-color: white; }

color: black; }
 * 1) p-personal-label {

display: flex; }
 * 1) mw-content-block {

order: 1; margin-right: 0em; /*   flex: 0 0 225px; */ width: inherit; margin-top: -0.3em; }
 * 1) mw-site-navigation {

order: 2; margin-top: 1.4rem; /*  margin-right: 1em; margin-left: 2em; */ } }	width : 100%; }   width: 100%; -webkit-box-sizing : border-box; -moz-box-sizing : border-box; box-sizing : border-box; }
 * 1) mw-content-wrapper {
 * 1) mw-wrapper {
 * 1) mw-content-wrapper ,#mw-content {

order: 3; width: 100%; flex: 0 0 225px; }
 * 1) mw-related-navigation {

@media only screen and (min-width: 1340px) {

#mw-content, #content-bottom-stuff { margin-left: 0; } }

.mw-wiki-logo { background-position: center center; background-size: auto 165px; }

/*- BG IMG OR Color --*/

color: #fcfcfc; background-color: transparent !important; }
 * 1) mw-content-container .sidebar-chunk {

/*this part has the main content container bg colour--*/ /*--add 0.7 after rgb colours to add transparency--*/ color: #fcfcfc; /*   background: linear-gradient(#921131 0,#141416 7rem) !important;*/ background: #141416 !important; }
 * 1) mw-content-container #mw-content {

border: none; font-family: "roboto condensed"; }
 * 1) mw-content {

color: #c0c3d0 !important; background-color: transparent /*!important*/; }
 * 1) mw-content div {

font-family:"roboto condensed" !important; }
 * 1) mw-content h1,
 * 2) mw-content h2,
 * 3) mw-content h3,
 * 4) mw-content h4,
 * 5) mw-content h5,
 * 6) mw-content h6 {

color: #fcfcfc; }
 * 1) mw-content-container div {

display: none; }
 * 1) site-tools {

display: none; }
 * 1) p-navigation {

border: none; }
 * 1) mw-site-navigation .sidebar-chunk {

/*************************************************************************/ /* Custom article and header /*************************************************************************/

.custom-article_1 { margin-left: 5px; margin-right: 5px; display: flex; text-align: justify; }

.custom-article_1 .floatnone { padding-bottom: 10px; }

.custom-article_1 .ca_L { margin-right: 20px; width: auto; }

.custom-article_1 .ca_R { margin-right: 20px; width: auto; }

.custom-article_1 .ca_L-w50 { margin-right: 20px; width: 50%; }

.custom-article_1 .ca_R-w30 { margin-left: 20px; width: 30%; }

.custom-article_1 .ca_R-w35 { margin-left: 20px; width: 35%; }

.custom-article_1 .ca_R-w40 { margin-left: 20px; width: 40%; }

.custom-article_1 .ca_R-w45 { margin-left: 20px; width: 45%; }

.custom-article_1 .ca_R-w50 { margin-left: 20px; width: 50%; }

.custom-article_1 .ca_R-w55 { margin-left: 20px; width: 55%; }

.custom-article_1 .ca_R-w60 { margin-left: 20px; width: 60%; }

.custom-article_1 .ca_R-w65 { margin-left: 20px; width: 65%; }

.custom-article_1 .ca_R-w70 { margin-left: 20px; width: 70%; }

.custom_header_article { font-family: helvetica; }

.custom_header_article h2 { font-family: "roboto condensed"; margin-top: -5px; font-weight: 900; font-size: 24px; border-bottom: 0px solid var(--theme-border-color); }

.custom_header_article .page-content h2 { border-bottom: 0px solid var(--theme-border-color); }

/***************************************************************************/

.mw-underline-always a { color: red; }

.mw-underline-always a:visited { color: #ad410e; }

width: 40%; margin: auto; }
 * 1) searchform {

display: none; }
 * 1) mw-header-hack {

/*Search Bar Styling*/ border: none; box-shadow: none; }	background: #0C0D0F; color: white; border-radius: 0; }
 * 1) mw-header-container #simpleSearch {
 * 1) mw-header-container #searchInput {

display: none; }
 * 1) ca-ve-edit {

display: none; } /* Change mobile icons to white. ...reverted. wait for grey icon */ /*#ca-history a { background-image: url(https://static.miraheze.org/pgrwiki/b/b8/Icon-Clock-White.svg); }	background-image: url(https://static.miraheze.org/pgrwiki/5/54/Icon-SettingsCog-White.svg); }	background-image: url("https://static.miraheze.org/pgrwiki/0/02/White-SearchIcon.svg"); margin : auto; } */
 * 1) ca-cargo-purge {
 * 1) ca-more span {
 * 1) searchform #searchButton {

/*End of Search Bar Styling*/

color: #f72058; text-shadow: 1px 1px 1px #0f0104; display: inline-block; }
 * 1) mw-content a,
 * 2) mw-content a:visited {

/* -- Striped Table STRIPES - */ .striped_row tr:nth-child(even) { background-color: rgba(9, 9, 10, 0.3); }

/***************************************************************************/

mw-footer-container { background: transparent !important; }

/* - */ /* --: Custom grid for enemy pages:- */

.infobox_custom2 { display: grid; grid-template-columns: 0.2fr 2.2fr 2.4fr 0.2fr; grid-template-rows: 0.7fr 1.1fr 0.7fr 1.7fr 0.3fr; grid-auto-columns: 1fr; gap: 0px 0px; grid-auto-flow: row; grid-template-areas: "Left-space Enemy-image Enemy-image Right-space" "Left-space Enemy-image Enemy-image Right-space" "Left-space Enemy-specs Enemy-specs Right-space" "Left-space Enemy-description Enemy-description Right-space" "Left-space Enemy-traits Enemy-traits Right-space"; }

.Enemy-image { display: grid; /* grid-template-columns: 1fr 1fr 1fr; */ grid-template-columns: 0 1fr 0; /*Fix for enemy name >1 words*/ grid-template-rows: 0.2fr 0.8fr 0.8fr; gap: 0px 0px; grid-auto-flow: row; grid-template-areas: "Image-space-tLeft Enemy-name Image-space-tRight" "Image-space-center Image-space-center Image-space-center" "Image-space-center Image-space-center Image-space-center"; grid-area: Enemy-image; }

.Enemy-name { grid-area: Enemy-name; }

.Image-space-tLeft { grid-area: Image-space-tLeft; }

.Image-space-tRight { grid-area: Image-space-tRight; }

.Image-space-center { grid-area: Image-space-center; }

.Enemy-specs { grid-area: Enemy-specs; }

.Enemy-description { grid-area: Enemy-description; }

.Enemy-traits { grid-area: Enemy-traits; }

.Left-space { grid-area: Left-space; }

.Right-space { grid-area: Right-space; }

/* -: End of custom grid :-- */ /**Custom wikitable used on the Enemies page**/

table.wikitable-custom1 { text-align: center; border-collapse: collapse; table-layout:fixed; } table.wikitable-custom1 th { height: 40px; background-color: #2D2A2A; font-weight: normal; font-size: 17px; border: #0A0001 5px solid; } table.wikitable-custom1 td { height: 200px; border: #0A0001 3px solid; border-top: 1px solid #fff; } table.wikitable-custom1 tfoot td { font-size: 11px; border: #0A0001 3px solid; } table.wikitable-custom1 tbody td { background: url('https://static.miraheze.org/pgrwiki/9/91/Wiki-Background-EnemyCellDark.png'); background-position: center; height: 200px; width: 200px; z-index: 1; border: #0A0001 3px solid; } table.wikitable-custom1 tbody:hover td:hover { filter: invert(15%); } .enemyIcon { size: 120px; position: center; z-index: 2; } .enemyIconBackground { background: url('https://static.miraheze.org/pgrwiki/0/00/Wiki-Background-EnemyCellNew.png'); background-position: center; height: 200px; width: 200px; z-index: 1; } .enemyIconBackground:hover { filter: invert(80%); } span.fontWhite a { color: white; }

/* -: End of custom table :- */ /* --: Horizontal sidescrolling gallery :--- */

.shop-scroller { width: auto; height: 250px; white-space: nowrap; overflow-x: scroll; overflow-y: hidden; background-color: #FAFCE9 !important; }

.shop-scroller > div { display: inline-block; width: 150px; height: 190px; margin: 20px; text-align: center; color: #0A0001 !important; }

/* -: End of shop scroller :- */

/***************************************************************************/ /*- custom Left Menu -*/

/*	margin-top: -0.6em; margin-left: -0.5em; */ width: 100%; } width: 210px; margin-top: 0.1em; background-position:center; background-size:contain; }
 * 1) p-logo {
 * 1) p-logo a {

width: 100%; }
 * 1) site-navigation {

/*Change Hamburger Icon for Mobile*/ background-image: url(https://static.miraheze.org/pgrwiki/7/79/Icon-BurgerMenu-White.svg); }
 * 1) site-navigation h2 {

font-family:"roboto condensed"; display:inline-block; height:32px; font-size:18px; font-weight:900 !important; }
 * 1) p-N_A_V_I_G_A_T_I_O_N {

border-bottom: none !important; }
 * 1) p-N_A_V_I_G_A_T_I_O_N h3 {

width:100% !important; text-align:center; font-weight:900; background-image:url(https://cdn.discordapp.com/attachments/887726034412249160/887752045371748352/asset1.png); background-position:center center !important; background-repeat:no-repeat !important; background-size:cover !important; }
 * 1) p-N_A_V_I_G_A_T_I_O_N {

color:white; font-size:20px; font-family:"roboto condensed"; }
 * 1) p-N_A_V_I_G_A_T_I_O_N span {

text-decoration:none; }
 * 1) p-N_A_V_I_G_A_T_I_O_N a:hover {

/* -- top menu - */

margin-top: 0.4em !important; background-color: #28282a; }
 * 1) searchInput-container {

height: 1.4rem; }
 * 1) searchInput {

height: 1.6rem; }
 * 1) searchButton {

font-family: "roboto condensed" !important; }
 * 1) p-banner {

margin-top: 0.1rem; } /* -- end of top menu - */
 * 1) p-logo-text {

/* main content layout  */

display: none; }
 * 1) p-namespaces {

color: white !important; text-align: center; border-bottom: solid 2px #fff; }
 * 1) firstHeading {

.mw-parser-output { margin-top: 2em; }

/*---*/

/*Editor Markup Color Change*/

/*Keywords and Storage, Formerly Blue : */ color: #2196F3; } /*Constants, Formerly green :*/ color: #558B2F; } /*Numbers, Numeric Constants. Formerly blue :*/ color: #2196F3; } /*Functions, Formerly dark-blue : */ color: #7E57C2; } /*Bare Tags, Formerly reddish-brown : */ color: #F4511E; } /*Strings, Formerly green : */ color: #43A047; } /*Class Names, Formerly unstyled */ color: #F57C00; } /*Blocked Texts*/ .ace_marker-layer .ace_selection { background: rgba(255, 255, 255, 0.2) !important; } /* -- Left side menu -- */
 * 1) editform .ace-tm .ace_storage, .ace-tm .ace_keyword {
 * 1) editform .ace-tm .ace_support.ace_constant {
 * 1) editform .ace-tm .ace_constant.ace_numeric {
 * 1) editform .ace-tm .ace_support.ace_function {
 * 1) editform .ace-tm .ace_constant {
 * 1) editform .ace-tm .ace_string {
 * 1) editform .ace-tm .ace_variable {

margin-left: 1.6em; margin-top: -0.8em !important; }
 * 1) p-Characters {

margin-top:-0.8em !important; margin-left: 0; } font-size:1.4rem !important; font-family:"roboto condensed"; font-weight:normal !important; border-bottom:none !important; } font-size:1.05rem !important; font-family:"roboto condensed"; margin-top:-1em !important; line-height:0.8; } padding-bottom: 10px !important; } display: none; } .sidebar-inner { background-color: #141416; }
 * 1) mw-site-navigation .sidebar-inner>div {
 * 1) mw-site-navigation .sidebar-inner>div h3{
 * 1) mw-site-navigation .sidebar-inner>div ul {
 * 1) p-managewiki-sidebar-header ul {
 * 1) p-addthis {

/* */

.wikitable tbody tr th, .sortable.wikitable tr th{ color:white; background-color:#921131; } .wikitable tbody tr td, .sortable.wikitable tr td{ color:white; background-color:#212129; } .wikitable tbody th, .wikitable tbody td, .sortable.wikitable th { border:1px solid black; }

.wikitable { border-width: 1px 1px 0em; border-color: initial; }

/* - override default tabs skins - */

ul.tabbernav { font-family:"roboto condensed" !important; }

ul.tabbernav li a { background-color: #212129; }

ul.tabbernav li a:hover { background-color: #921131; }

color: white; text-shadow: 2px 2px 1px #36363C; background-color: #7B7B88; border: 0.5px solid #CCC7C1; }
 * 1) mw-content ul.tabbernav .tabberactive a {

border: 0.5px solid black; }
 * 1) mw-content ul.tabbernav a {

color: #aaa8c0; }
 * 1) mw-content ul.tabbernav li a:visited {

/* Removing subpages backbutton */
 * 1) contentSub {display:none}

/*overriding some inline css in sidebar*/ width : 100%; margin-top : 0.4rem !important; }	margin-bottom : -1rem; }	padding-bottom : 1rem; }	margin-top : 0.5rem !important; } /*Change sidebar width*/ width : 225px; } @media (max-width : 850px) { #mw-site-navigation { width : 0; }	#mw-content-wrapper { width : 100%; } } /*Change tabber styling*/ .tabber .tabbernav { border-bottom : none; font-size : 1rem !important; font-weight : bold; } .tabber .tabbernav li a { padding : 3px 0.8rem !important; } .tabber .tabbertab { border : none; } .tabber .tabberactive a { text-shadow : none !important; color : #121212 !important; border-color : black !important; background : #BDBDC5 !important; } .tabber .tabberactive a:hover { color : #921131 !important; }
 * 1) site-navigation {
 * 1) p-logo {
 * 1) site-navigation .sidebar-inner {
 * 1) site-navigation .sidebar-inner #p-Gray_Ravens{
 * 1) mw-site-navigation {

/*Change Gallery and thumb styling*/ ul.gallery { margin: 2px !important; padding: 2px !important; display: flex !important; flex-flow: row wrap !important; gap: 0.5em 1em !important; justify-content: center !important; }

.mw-body li.gallerybox div.thumb { border: solid #2c2c30; border-width: 1px; }

/*Fix position of Page Header and its action buttons*/ display: flex; margin: 0 auto; align-content: center; width: max-content; font-size : 0.8rem; flex-direction : row-reverse; }	border-bottom : none; margin-bottom : 0; }	margin-top : 0 !important; }	text-transform: capitalize; }	padding-left : 0; } /*shrinking the footer*/ margin: 0; }	margin: 0; }	margin: 0; }	margin: 0; }	color : grey; background : black; font-size : 0.7rem; }	color : darkgrey; } /*Fixing the image icon to fit*/ .mw-wiki-logo { width: 100%; margin-bottom: -1rem; } /*Change default Tabs styling*/ .tabs-label { font-size : 1rem !important; font-weight : bold; padding : 3px 0.8rem !important; border-radius : 0 !important; color : #f72058; background-color: #212129; border-color : black; } .tabs-label:hover { color : white; background-color : #921131; } .tabs .tabs-container { border : none; } .tabs-tabbox > .tabs-input:checked + .tabs-label, .tabs-input-0:checked + .tabs-input-1 + .tabs-label { text-shadow : none !important; color : #121212 !important; border-color : black !important; background : #BDBDC5 !important; } .tabs-tabbox > .tabs-input:checked:hover + .tabs-label{ color : #921131 !important; } .tabs-tabbox > .tabs-input + .tabs-input + .tabs-label { margin-left : 0.4rem; }
 * 1) mw-page-header-links {
 * 1) firstHeading {
 * 1) bodyContentOuter {
 * 1) ca-edit {
 * 1) ca-edit a {
 * 1) mw-footer li {
 * 1) footer-info {
 * 1) footer-places {
 * 1) footer-icons {
 * 1) mw-footer-container {
 * 1) mw-footer-container a {

/* -- KILL ME PLZ FUXKING MASSIVE ONE -- */


 * 1) infobox-character {display: grid;grid-template-columns: 1.4fr 2fr;grid-template-rows: 1fr;gap: 0px 0px;grid-auto-flow: row;grid-template-areas: "left""right";}#infobox-character .left img:hover {height: auto;width: auto;}#infobox-character div {color: white !important;}#v_line {background-color: black;width: 1px;height: 100%;}#h_line {background-color: black;width: 100%;height: 1px;}.left {display: grid;grid-template-columns: 1fr;grid-template-rows: 0.4fr 0.15fr 0.25fr 0.25fr 0.fr;gap: 0px 0px;grid-template-areas: "profile" "icon" "information" "speciality" "element";width: 100%;float: left;background-color: #212129 !important;}.left #header {grid-area: header;color: white;background-color: #921131;text-align: center;font-weight: bold;}.left #content {grid-area: content;text-align: start;}.left .profile {grid-area: profile;}.left .profile .center {padding-bottom: 0.8em;background-color: #0F0F12 !important;}.left .profile .center img {margin-bottom: -0.68em;}.left .icon {grid-area: icon;display: flex;max-height: 82px !important;margin: auto;}.left .icon img {margin: 10px 7px 10px 7px;border: 1px solid black;background-color: #0F0F12;}.left .icon .a {order: 1;}.left .icon .b {order: 2;}.left .icon .c {order: 3;}.left .information {grid-area: information;grid-template-columns: 1fr;grid-template-rows: 0fr 1fr;gap: 0px 0px;grid-template-areas: "header" "content";}.left .speciality {grid-area: speciality;grid-template-columns: 1fr;grid-template-rows: 1fr 1fr;gap: 0px 0px;grid-template-areas: "header" "content";}.left .element {grid-area: element;grid-template-columns: 1fr;grid-template-rows: 1fr 1fr;gap: 0px 0px;grid-template-areas: "header" "content";}.left .information #content, .left .speciality #content, .left .element #content {margin-left: 1em;margin-right: 1em;margin-top: 0.4em;margin-bottom: 0.4em;}#infobox-character .right {border-left: 2px solid #0F0F12;background-color: #212129;}.right #header {grid-area: header;text-align: start;font-weight: bold;}.right #content {grid-area: content;text-align: start;}#infobox-character .tabs-content.tabs-content-1 {width: 100%;}.right .data {display: grid;grid-template-columns: 1fr;grid-template-rows: 0.2fr 0.4fr 1px 4em;gap: 0px 0px;grid-auto-flow: row;grid-template-areas: "top" "middle" "h_line" "bottom";padding: 1em;}.data .top {grid-area: 1 / 1 / 2 / 2;display: grid;grid-template-columns: 1fr max-content 1fr;grid-template-rows: 1fr 1fr;gap: 0px 0px;grid-auto-flow: row;padding-bottom: 1em;padding-top: 1em;}.data .name {grid-area: 1 / 2 / 2 / 3;text-align: center;align-self: end;text-transform: uppercase;font-weight: bolder;}.data .frame {grid-area: 2 / 2 / 3 / 3;background-color: #212129 !important;align-self: center;vertical-align: middle;padding-left: 10px;padding-right: 10px;z-index: 2;}.data .horizontal-line {grid-area: 2 / 1 / 3 / 4;align-self: center;background-color: #babfc0 !important;width: 100% !important;height: 1px;z-index: 1;}.data .middle {grid-area: 2 / 1 / 3 / 2;display: grid;grid-template-columns: 50% 1px auto;grid-template-rows: 2fr;gap: 0px 0px;grid-auto-flow: row;grid-template-areas: "biography v_line stat";padding-top: 5px;padding-bottom: 1em;height: 350px;}.data .biography {grid-area: biography;}.data #v_line {grid-area: v_line;background-color: var(--character_infobox-h_line, #babfc0);}.data .stat {grid-area: stat;}.data #h_line {grid-area: h_line;background-color: var(--character_infobox-v_line, #babfc0);margin-top: 0.6em;}.data .bottom {grid-area: 3 / 1 / 4 / 2;margin-top: 5px;}.data .information {grid-area: 3 / 1 / 4 / 2;padding-top: 2.4em !important;}.right .biography {grid-area: biography;display: grid;grid-template-columns: 1fr;grid-template-rows: repeat(6, 1fr);gap: 7px 0px;grid-auto-flow: row;grid-template-areas: "service" "psychological" "activation" "height" "weight" "vital-fluid";width: 300;}.biography .service {grid-area: service;grid-template-columns: 1fr;grid-template-rows: 1fr 1fr;gap: 1px 0px;grid-template-areas: "header" "content";}.biography .psychological {grid-area: psychological;grid-template-columns: 1fr;grid-template-rows: 1fr 1fr;gap: 1px 0px;grid-template-areas: "header" "content";}.biography .activation {grid-area: activation;grid-template-columns: 1fr;grid-template-rows: 1fr 1fr;gap: 1px 0px;grid-template-areas: "header" "content";}.biography .height {grid-area: height;grid-template-columns: 1fr;grid-template-rows: 1fr 1fr;gap: 1px 0px;grid-template-areas: "header" "content";}.biography .weight {grid-area: weight;grid-template-columns: 1fr;grid-template-rows: 1fr 1fr;gap: 1px 0px;grid-template-areas: "header" "content";}.biography .vital-fluid {grid-area: vital-fluid;grid-template-columns: 1fr;grid-template-rows: 1fr 1fr;gap: 1px 0px;grid-template-areas: "header" "content";}.right .information {grid-area: information;display: grid;grid-template-columns: repeat(6, 1fr);grid-template-rows: 1fr;grid-auto-columns: 1fr;gap: 0px 10px;grid-template-areas: "rank class archetype signature-weapon army gift";justify-content: space-evenly;padding-top: 4px;}.right .information #content, .right .information #header {text-align: center;}.right .information #content img {margin-top: 5px;width: 60px !important;height: 60px !important;margin-bottom: 5px;}.right .information .rank #content img {margin-top: 5px;width: 80px !important;height: 60px !important;margin-bottom: 5px;}.right .information #text {text-align: center;}.information .rank {grid-area: rank;display: grid;grid-template-columns: 1fr;grid-template-rows: calc(fit-content+4px) 1fr;gap: 0px 0px;grid-template-areas: "header" "content";}.information .class {grid-area: class;display: grid;grid-template-columns: 1fr;grid-template-rows: calc(fit-content+4px) 1fr;gap: 0px 0px;grid-template-areas: "header" "content";}.information .archetype {grid-area: archetype;display: grid;grid-template-columns: 1fr;grid-template-rows: calc(fit-content+4px) 1fr;gap: 0px 0px;grid-template-areas: "header" "content";}.information .signature-weapon {grid-area: signature-weapon;display: grid;grid-template-columns: 1fr;grid-template-rows: calc(fit-content+4px) 1fr;gap: 0px 0px;grid-template-areas: "header" "content";}.information .army {grid-area: army;display: grid;grid-template-columns: 1fr;grid-template-rows: calc(fit-content+4px) 1fr;gap: 0px 0px;grid-template-areas: "header" "content";}.information .gift {grid-area: gift;display: grid;grid-template-columns: 1fr;grid-template-rows: calc(fit-content+4px) 1fr;gap: 0px 0px;grid-template-areas: "header" "content";}.right .stat {;grid-area: stat;display: grid;grid-template-columns: 1fr;grid-template-rows: min-content 1fr min-content;gap: 10px 0px;grid-auto-flow: row;grid-template-areas: "top" "graph" "table";padding-left: 1em;margin-top: -2em;}.right .table #content, .right .table #header {text-align: center;}.right .table #content, .right .table #header {text-align: center;}.stat .top {grid-area: top;display: grid;grid-template-columns: min-content;grid-template-rows: min-content min-content;gap: 0px 0px;grid-auto-flow: row;grid-template-areas: "header" "content";padding-top: 1.8em;}.stat .graph img {max-width: none !important;}.stat .graph {grid-area: graph;grid-area: top;display: grid;grid-template-columns: min-content;grid-template-rows: min-content min-content;gap: 0px 0px;grid-auto-flow: row;grid-template-areas: "header""content";object-position: 50% 50%;}.graph img {width: 225px !important;height: 225px !important;padding-left: 1em;padding-top: 4.6em;}.stat .table {display: grid;grid-template-columns: repeat(4, 1fr);grid-template-rows: 1fr;gap: 0px 5px;grid-auto-flow: row;grid-template-areas: "HP DEF ATK CRIT";grid-area: table;}.stat .HP {display: grid;grid-template-columns: 1fr;grid-template-rows: repeat(2, 1fr);gap: 0px 0px;grid-auto-flow: row;grid-template-areas: "header" "content";grid-area: HP;}.stat .DEF {display: grid;grid-template-columns: 1fr;grid-template-rows: repeat(2, 1fr);gap: 0px 0px;grid-auto-flow: row;grid-template-areas: "header" "content";grid-area: DEF;}.stat .ATK {display: grid;grid-template-columns: 1fr;grid-template-rows: repeat(2, 1fr);gap: 0px 0px;grid-auto-flow: row;grid-template-areas: "header" "content";grid-area: ATK;}.stat .CRIT {display: grid;grid-template-columns: 1fr;grid-template-rows: repeat(2, 1fr);gap: 0px 0px;grid-auto-flow: row;grid-template-areas: "header" "content";grid-area: CRIT;}.stat .DEF {display: grid;grid-template-columns: 1fr;grid-template-rows: repeat(2, 1fr);gap: 0px 0px;grid-auto-flow: row;grid-template-areas: "header""content";grid-area: DEF;}.stat .ATK {display: grid;grid-template-columns: 1fr;grid-template-rows: repeat(2, 1fr);gap: 0px 0px;grid-auto-flow: row;grid-template-areas: "header""content";grid-area: ATK;}.stat .CRIT {display: grid;grid-template-columns: 1fr;grid-template-rows: repeat(2, 1fr);gap: 0px 0px;grid-auto-flow: row;grid-template-areas: "header""content";grid-area: CRIT;}@media screen and (min-width:851px) and (max-width: 1366px) {#mw-content {width: 95% !important;}#mw-content-block {width: 80% !important;margin-left: 8em;}.left .icon {grid-area: icon;display: flex;padding-left: 0.75em;padding-right: 1em;}.right .information #content img {height: 50px !important;}.right .information .rank #content img {height: 50px !important;}.right .graph img {margin-left: -2.4em !important;}} @media only screen and (min-width: 1920px) {#infobox-character .right .stat {width: initial;}}

/* --*/

/* -- CUSTOM classes for skill table --- */

.custom-tab_1{font-family:"Roboto Condensed"}.custom-tab_1 .tabber .tabbertab{padding:initial;border:none;padding-left:1px}.custom-tab_1 .tabber{display:flex;flex-wrap:wrap}.custom-tab_1 .tabbernav{height:40px;padding:0;cursor:pointer;display:flex;align-items:flex-end}.custom-tab_1 .tabbernav li{color:#fff;width:fit-content}.custom-tab_1 .tabbernav .tabberactive a{color:#fff!important;cursor:pointer;background:#09090b!important;white-space:nowrap;border-bottom:initial!important}.custom-tab_1 .tabbernav li a{border-right:6px solid #141416!important;color:#fff!important;cursor:pointer;line-height:24px;background:#921131;font-size:18px;font-weight:700;letter-spacing:.3px;margin:auto;border-bottom:initial!important;border-left:none!important;border-top:none!important}.custom-tab_1 .tabbertab{width:100%!important}.custom-tab_1 .tabbertab .content-table{background-color:#09090b!important}.custom_full_width img{width:100%;height:100%}.custom-table_1{font-family:tahoma}.custom-table_1 p{line-height:1.4;margin-bottom:5px}.custom-table_1 tr,td{padding-left:20px;padding-right:20px}.custom-table_1 .custom-table_th{font-family:"Roboto Condensed";font-size:26px;padding-left:20px}.custom-table_1 tr{font-size:16px;line-height:1.4}.custom-table_1 .fix_align_middle{margin-top:1.8em!important;margin:auto;}.custom-table_1 .fix_align_middle img{margin-top:-1.8em}.custom-table_th p{height:20px;font-weight:900;line-height:0;color:#fff}.custom-table_1 td{color:#c0c3d0}.custom-tab_1 .tabbernav li a:hover{background-color:#db1948;transition:.3s}.custom-table_1 td {padding-bottom: 0.6em;font-family: "roboto condensed";}

/* --*/

/*Fixing Mobile Header*/ @media screen and (max-width :851px) { #personal-extra { position: absolute; top: 0.6rem; right: 3rem; }   #searchform { padding: 0 2rem; font-size: 1rem; width : unset; max-width : 20rem; }

} /*Inverting colors on important buttons so the icons become white*/ text-shadow : none !important; color : #08dfa7 !important; filter : invert(1); }	color : black !important; }	filter : invert(1); }	filter : invert(1); color : black; }	filter : invert(1); } /*Shrink page edit tools icons to match text size*/ @media screen and (min-width : 852px){ #mw-page-header-links a { background-size : 1rem; background-position : left center; } }
 * 1) p-views .mw-portlet-body a {
 * 1) p-views .mw-portlet-body a:hover {
 * 1) searchButton {
 * 1) personal h2 {
 * 1) ca-more {

/* Images should be responsive */ .res-img img { max-width:100%; height:auto; }

/* -- character icon hover color -- */ .character_icon_div a:hover { background-color: #921131 !important; transition: 0.3s; } /*---*/ /*Video Embed Styling : Iframe*/ iframe { width : 100% !important; height : 480px !important; } /*Sidebar Remodel to fixed position.*/ background : #141416; }	width : 14rem !important; margin-bottom : -0.2rem; } @media screen and (min-width : 1100px) { position : fixed; left : 0; top : 1rem; width : 18rem; overflow : hidden; }	height : 100%; }	height : 100%; background : #141416 !important; }	height : 100%; }	display : none; }	margin-top : 0; }	text-align : center; }	margin-bottom : 1rem !important; }	text-align : center; }	width : max-content; height : max-content; margin : 0.2rem; display : inline-block; padding : 0 !important; border-radius : 0.1rem; }	display : inline-block; padding : 0.3rem 0.4rem; background : #0C0D0F; width : 5.5rem; text-align : center; color : white !important; height : 100%; font-size : 0.9rem; } 	 width : 100% !important; margin : 0; }	margin-left: 0; width: 70%; margin: 0 auto !important; padding-left: 5rem; } } @keyframes sidebarLinkHover { /*This is what sets the animation for hover link*/ to { background : #921131; } }	text-decoration : none; /*	color: #757575 !important; */ -moz-animation : sidebarLinkHover 0.3s forwards; -webkit-animation : sidebarLinkHover 0.3s forwards; animation : sidebarLinkHover 0.3s forwards; }
 * 1) p-logo {
 * 1) p-logo a {
 * 1) mw-site-navigation {
 * 1) mw-site-navigation {
 * 1) site-navigation {
 * 1) mw-site-navigation .sidebar-inner {
 * 1) p-N_A_V_I_G_A_T_I_O_N {
 * 1) mw-site-navigation .sidebar-inner>div {
 * 1) mw-site-navigation .sidebar-inner>div h3{
 * 1) mw-site-navigation .mw-portlet-body {
 * 1) mw-site-navigation .mw-portlet-body ul {
 * 1) mw-site-navigation .mw-portlet-body ul li {
 * 1) mw-site-navigation .mw-portlet-body ul li a {
 * 1) mw-content-block {
 * 1) mw-footer {
 * 1) mw-site-navigation .sidebar-inner a:hover {

/*Adaptive sidebar sizing*/ @media screen and (min-width : 1100px) and (max-width : 1365px){ #mw-site-navigation { position : fixed; left : 0; top : 1.6rem; width : 14rem; overflow : hidden; }   #site-navigation { padding : 0.5rem !important; }	#mw-site-navigation .sidebar-inner>div .mw-portlet-body { margin-bottom : 0.5rem !important; }	#mw-site-navigation .sidebar-inner>div h3 { font-size : 0.82rem !important; }	#p-logo a { width: 15rem !important; margin-top: 1rem; margin-bottom: 0; height : 7rem !important; }   #mw-site-navigation .mw-portlet-body ul li a { padding : 0.4rem 0; background : #0C0D0F; width : 5rem; font-size : 0.7rem !important; }   #mw-content-container { margin-left : 15rem; margin-right : 5rem; }   #mw-content-block { width : 100%; max-width : 850px; margin : 0 auto; } } @media screen and (min-width : 1366px) and (max-width : 1919px) { #mw-site-navigation { top : 1.5rem !important; width : 17rem; }	#mw-site-navigation .sidebar-inner>div .mw-portlet-body { margin-bottom : 0.5rem !important; }	#mw-site-navigation .sidebar-inner>div h3 { font-size : 0.95rem !important; margin: 0.5rem 0 0.8rem 0; }	#p-logo a { width: 14rem !important; margin-top: 1rem; margin-bottom: 0; height : 7rem !important; }   #mw-site-navigation .mw-portlet-body ul li a { padding : 0.4rem 0; background : #0C0D0F; width : 5.7rem; font-size : 0.8rem !important; }   #mw-content-container { margin-left : 17rem; margin-right : 6rem; }   #mw-content-block { max-width : 900px; width : 100% !important; margin : 0 auto; } } @media screen and (min-width : 1920px) and (max-width : 2559px) { #mw-site-navigation { width : 22rem; }	#mw-site-navigation .sidebar-inner>div h3 { font-size : 1.2rem !important; }	#mw-site-navigation .mw-portlet-body ul li a { width : 6.52rem; font-size : 1rem !important; padding : 0.8rem 0.6rem; }	#p-logo a { width: 20rem !important; margin-bottom: 1rem; margin-top: 2.1rem; height : 9rem !important; }   #mw-content-container { margin-left : 22rem; margin-right : 8rem; }   #mw-content-block { max-width : 1200px; width : 100% !important; margin : 0 auto; } } @media screen and (min-width : 2560px) and (max-width : 3839px) { #mw-site-navigation { width : 28rem; }	#mw-site-navigation .sidebar-inner>div h3 { font-size : 1.5rem !important; }	#mw-site-navigation .mw-portlet-body ul li a { width : 8rem; font-size : 1.4rem !important; padding : 1.1rem 0.8rem; }	#p-logo a { width: 25rem !important; margin-bottom: 0.5rem; margin-top: 1.5rem; height: 14rem !important; }   #mw-content-container { margin-left : 28rem; margin-right : 9rem; }   #mw-content-block { max-width : 1500px; width : 100%; margin : 0 auto; } } @media screen and (min-width : 3840px) { #mw-site-navigation { width : 40rem; }	#mw-site-navigation .sidebar-inner>div h3 { font-size : 2rem !important; }	#mw-site-navigation .mw-portlet-body ul li a { width : 11.5rem; font-size : 1.7rem !important; padding : 1.4rem 0.9rem; }   #p-logo a { width: 38rem !important; margin-bottom: 2.2rem; margin-top: 3.4rem; height: 16rem !important; }   #mw-content-container { margin-left : 40rem; margin-right : 14rem; }   #mw-content-block { max-width : 2100px; width : 100%; margin : 0 auto; } }

/*to make specific links white*/ /*.whitelink a { color: white !important}*/ .whitelink a:visited { color: white !important }

/*Code Editor Toolbar color invert*/ filter : invert(1); }
 * 1) wikiEditor-ui-toolbar {

.circle { height: 9vw; width: 9vw; background-color: #bbb; border-radius: 50%; display: inline-block; }

.banner_icon img { height: 5vw; width: 5vw; }

/* -- fix right side bar -- */

/* #mw-content { margin-left: -5rem; } this break the layout especially for mobile */

font-family: "roboto condensed"; background:#141416; position:fixed; right:0; width:15%; margin-top:1.5em; margin-right:1em; font-size: 1.2em; } border:none; } border-bottom:none; }
 * 1) mw-related-navigation {
 * 1) mw-related-navigation #page-tools,
 * 2) mw-related-navigation #catlinks-sidebar {
 * 1) mw-related-navigation .sidebar-chunk h3 {

margin-bottom: 1em; }
 * 1) mw-related-navigation .sidebar-chunk .mw-portlet-body {

margin-top: 0.2em !important; }
 * 1) page-tools {

margin-top: -1.2em !important; }
 * 1) catlinks-sidebar {

/* -- custom level header -- */

color: #FF6549; }
 * 1) mw-content h1,
 * 2) mw-content h2,
 * 3) mw-content h3,
 * 4) mw-content h4,
 * 5) mw-content h5 {

border-bottom: none; }
 * 1) mw-content h1::after {

border-bottom: none; }
 * 1) mw-content h2::after {