MediaWiki:Common.css

/* CSS placed here will be applied to all desktop skins */

@import url("/w/index.php?title=MediaWiki:Variables.css&action=raw&ctype=text/css"); @import url("/load.php?mode=articles&only=styles&articles=MediaWiki:Comment.css|MediaWiki:Templates.css|MediaWiki:Variables.css");

body { background-color: var(--zw-background-body); } body, .mw-body h1, .mw-body-content h1, .mw-body-content h2 { font-family: var(--zw-font-family-sans); }

/* Page content */ .mw-body { background-color: var(--zw-background-page); border: 1px solid var(--zw-border); color: var(--zw-text); } h1, h2, h3, h4, h5, h6 { color: var(--zw-text); } li { list-style-image: none; }

/* Links */ a { transition: 0.3s; } a, .mw-parser-output a.extiw, .mw-parser-output a.external { color: var(--zw-link); } a:hover, .mw-parser-output a.extiw:hover, .mw-parser-output a.external:hover { color: var(--zw-link-hover); } a:visited, .mw-parser-output a.extiw:visited, .mw-parser-output a.external:visited { color: var(--zw-link-visited); } a.new, a.new:visited { color: var(--zw-text-red-link); } a.new:hover { color: var(--zw-text-red-link-hover); text-decoration-style: dashed; } .mw-parser-output a.external { background-image: url(//cdn.wikimg.net/en/strategywiki/skins/Vector/resources/common/images/external-link-ltr-icon.svg?48e54); }

/* Footer */ .mw-footer li { color: var(--zw-text); }

/* Search */ .mw-search-profile-tabs { background-color: var(--zw-background-header); border-color: var(--zw-border); } .search-types .current a { color: var(--zw-text); font-weight: bold; }

/* Article content */ color: var(--zw-text); }
 * 1) mw-content-text .mw-editsection-bracket, .mw-editsection-divider {

/* Main Page */ .page-Main_Page .firstHeading { display: none; }

/* Editing */ font-size: 14px; } .warningbox { background-color: var(--zw-background-header); border-color: var(--zw-border); color: var(--zw-text-color); } .warningbox p:not(:first-child) { color: var(--zw-text-warning); }
 * 1) wpTextbox1 {

body.page-Zelda_Wiki_Discussion_Center .messagebox { height: 15em; overflow: auto; }

body.page-Community_Glossary h2 { border-bottom-width: 3px; color: #aff; font-weight:bold; }

/* Causes images to be resized using nearest-neighbor interpolation. * This prevents sprites, 2D game screenshots, and other pixel art from appearing blurry when resized (namely in galleries). * This comes at the cost of a slight reduction in quality for thumbnails of any other kind of image (e.g. screenshots and artwork) */ img, canvas { image-rendering:-moz-crisp-edges; image-rendering:-o-crisp-edges; image-rendering:-webkit-optimize-contrast; -ms-interpolation-mode:nearest-neighbor; image-rendering:crisp-edges; image-rendering:pixelated; }

img.default-scaling, canvas.default-scaling { image-rendering:initial; }

/* Default skin for navigation boxes */ table.navbox {           /* Navbox container style */ border: 1px solid #426787; width: 100%; margin: auto; clear: both; font-size: 88%; text-align: center; padding: 1px; } table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */ margin-top: -1px;         /* (doesn't work for IE6, but that's okay)       */ } .navbox-title, .navbox-abovebelow, table.navbox th { text-align: center;     /* Title and above/below styles */ padding-left: 1em; padding-right: 1em; } .navbox-group {             /* Group style */ white-space: nowrap; text-align: right; font-weight: bold; padding-left: 1em; padding-right: 1em; } .navbox, .navbox-subgroup {

background: #17456E;    /* Background color */ } .navbox-list {

border-color: #17456E;  /* Must match background color */ } .navbox-title, table.navbox th { background: transparent;    /* Level 1 color */ } .navbox-abovebelow, .navbox-group, .navbox-subgroup .navbox-title { background: #ddddff;    /* Level 2 color */ } .navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background: #e6e6ff;    /* Level 3 color */ } .navbox-even { background: #1a4d7a;    /* Even row striping */ } .navbox-odd { background: transparent; /* Odd row striping */ }

.collapseButton {         /* 'show'/'hide' buttons created dynamically */ float: right;         /* by the CollapsibleTables javascript in    */ font-weight: normal;  /* MediaWiki:Common.js are styled here   */ text-align: right;    /* so they can be customised. */	width: auto; } .navbox .collapseButton { /* In navboxes, the show/hide button balances */ width: 6em;           /* the vde links from Template:Navbar,    */ }                         /* so they need to be the same width. */

.navbar {                 /* Navbox template links */ font-size: 88%;       /* Default font-size */ font-weight: normal; } .navbox .navbar { font-size: 100%;      /* Font-size when nested within navbox */ }

/* Prevent line breaks in silly places: 1) Links when we don't want them to  2) Bold "links" to the page itself .nowraplinks a, .nowraplinks .selflink{ white-space: nowrap; }

/* * Hiding the original Licensing field on the upload form * Stupid workaround for the CustomUploadFields extension */ .mw-htmlform-field-Licenses { display:none; }

/* * For use with the WikiEd extension * http://www.mediawiki.org/wiki/Extension:WikEd */ .wikEdPreviewBox, .wikEdDiffDiv { background-color: transparent !important;}

/* Clear level 1 and 2 headers on the left side */ h1, h2 { clear:left; }

/* Template:Caption */ text-align:center; margin:auto; }
 * 1) caption-text{

/* Styling for enhanced Recent Changes and Watchlist */ td.mw-enhanced-rc { font-size: 1.25em; font-family: monospace; }

/* Style/reposition the site notice's [dismiss] for the local wiki notice and not global notices */ margin: 0 5px; /* Reasonable distance from the 10px border-radius */ height: 0; }
 * 1) localNotice > .globalNoticeDismiss { /* span is for extra specificity */

/* Hide MsUpload UI */ display: none; }
 * 1) msupload-div {

/* Negate the "display:block" on "caption a" elements * (affects the link in collapsible tables) */ caption a { display:inline !important; }

/* Restyle the buttons like "Show preview" and "Show changes" and ApiSandbox buttons */ .skin-hydradark span.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button { color: #bfbfbf; border: none; background-color: #001339; } .skin-hydradark span.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover { background-color: #0a2d6e; }

/* Restyling the fallback search icon */ div#simpleSearch #mw-searchButton { background-position: center center; background-repeat: no-repeat; }

/* Restyling "choose a table" list on "Special:Drilldown/Images" */ div#drilldown-tables-wrapper, ul#drilldown-tables li.tableName { background: none; }

/* Unrestrict max-width and resizability of textareas on Special:Expandtemplates */ body.mw-special-ExpandTemplates div.oo-ui-textInputWidget { max-width: inherit; } .oo-ui-textInputWidget input, .oo-ui-textInputWidget textarea { resize: auto; }

/* CSS relative to Cargo */ div.cargoReplacementTableInfo { background-color: #1d578b; border-color: #0b284f; }

/* For the Editor's Hub */ div.eh-lists { display: flex; justify-content: center; flex-wrap: wrap; }

div.eh-list { flex: 1 1 0; }

div.eh-list-title { display: -webkit-box; background-color: #1D578B; border: 1px solid #426787; padding: 1em; }

div.eh-list-title-image { padding-right: 5px; }

div.eh-list-pages { border: 1px solid #426787; min-height: 17em; max-height: 17em; overflow: auto; }

div.eh-list-pages p { text-align:center; }

.catlinks { background-color: var(--zw-background-header); border-color: var(--zw-border); border-radius: var(--zw-border-radius-2); }

/* RECENT CHANGES */ div.mw-recentchanges-toplinks { border-radius: var(--roundy-border-radius); }

div.mw-recentchanges-toplinks div.mw-parser-output { padding-left: 1em; padding-right: 1em; }

/* FIELDSETS */ fieldset { border-radius: var(--roundy-border-radius); }

.skin-hydradark #preferences fieldset.prefsection fieldset { border-radius: 0; }

/* DIVS */ div.header-nav-box { border: 1px solid; margin-bottom: 0.5em; }

.roundy { border-radius: var(--roundy-border-radius); padding: 4px; }

/* TABLES */ table.wikitable { border-radius: var(--roundy-border-radius); padding: 4px; border-collapse: separate; }

table.wikitable > * > tr > th { background-color: transparent; }

table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td { border-color: transparent; }

.fileinfo { width: 740px; margin: auto; font-size: 12px; }

.fileinfo th { width: 60px; text-align: left; }

table.infobox tr.infobox-field th { text-align: right; max-width: 50%; }

table.infobox tr.infobox-field td { min-width: 50%; }

table.infobox tr.infobox-field th, table.wikitable td { padding: 8px; }

.fileinfo th:first-child, table.infobox tr.infobox-field th:first-child, table.wikitable td:first-child { border-radius: var(--roundy-border-radius) 0px 0px var(--roundy-border-radius); }

.fileinfo th:last-child, table.infobox tr.infobox-field th:last-child, table.wikitable td:last-child { border-radius: 0px var(--roundy-border-radius) var(--roundy-border-radius) 0px; }

.fileinfo th:first-child:last-child, table.infobox tr.infobox-field th:first-child:last-child, table.wikitable td:first-child:last-child { border-radius: var(--roundy-border-radius) var(--roundy-border-radius) var(--roundy-border-radius) var(--roundy-border-radius); }

/* GALLERIES */ li.gallerybox div.thumb, div.thumbcaption, div.thumbinner { border-radius: var(--roundy-border-radius); }

.gallerybox .thumb { display: flex; align-items: center; /* Center align file name that appears when the file does not exist */ }

div.thumbcaption, div.thumbinner { padding: 5px; }

/* TABLES OF CONTENTS */ div#toc, div.toc { border-radius: var(--roundy-border-radius); }

/* NAVBOXES */ div.facelift-tabbed-navbox { text-align: center; }

/* Template:Tabs */ /* centering image in for infoboxes */ div.media-template div.tabcontents.vertical-centered-content > div.content > a > img { position: relative; top: 50%; transform: translateY(-50%); }

div.media-template div.tabcontents div.tabcontents { width: 320px; }

/* Text Indentation */ .em-indent { text-indent: 1em; }

/* LIST BOXES */ div.list-box-container { display: flex; flex-wrap: wrap; justify-content: center; }

div.list-box { position: relative; margin: 8px; flex-grow: 1; flex-basis: calc((100% / 3) - (8px *2) - (10px * 2)); }

@media only screen and (max-width: 1550px) { div.list-box { flex-basis: calc((100% / 2) - (8px *2) - (10px * 2)); } }

@media only screen and (max-width: 1100px) { div.list-box { flex-basis: calc(100% - (8px *2) - (10px * 2)); } }

div.list-box span.list-box-link a { text-align: right; position: absolute; height: 100%; width: 100%; top: 0; left: 0; text-decoration: none; }

div.list-box span.list-box-link a span.list-box-text { position: relative; top: 50%; transform: translateY(-50%); display: block; padding-right: 1em; font-size: large; }

/* Template:Noncanon */ .canonicity-section { border-left: 5px solid; padding: 5px; border-radius: var(--roundy-border-radius); }

/* Template:Ref */ div.references-small { max-height: 175px; overflow: auto; margin-bottom: 1em; padding: 0.5em; }

/* INFOBOXES */ /* curse ad to be deleted */ table.infobox, table.infobox-curse-ad { float: right; margin: 0 0 1em 1em; padding: 5px; width: 29em; font-size: 95%; text-align: left; border-radius: var(--roundy-border-radius); }

table.infobox th.infobox-name { font-size: 1.1em; }

table.infobox tr.infobox-field td div.infobox-field-content { max-height: 175px; overflow: auto; }

.pi-theme-wikia .pi-image-thumbnail { width: 100%; height: auto; }

/* MAIN PAGE */ @media screen and (min-width: 1650px) { /* width 1650px < 2355px */ .infoblock-container  { max-width:2130px; } }

.main-page { font-family:'Open Sans', Helvetica, Tahoma, Arial, sans-serif; }
 * 1) siteNotice,

.main-page { font-size:15px; margin:2em auto; width:98%; }

margin:0 auto; }
 * 1) mf-zw-logo {

/* ##################### SEARCH BAR ##################### */

.bodySearchWrap { /* Generated from the tags */ margin-top:30px; font-size:18px; }

.bodySearchWrap > input { /* Belongs to the input elements of */ height:40px; }

.mw-ui-input { max-width:600px; width:100%; height:100%; padding:2px 2px 2px 10px; border-radius:3px; border:1px solid #999; }

/* Custom search button styling */ .mw-ui-button { -webkit-appearance:none; -moz-appearance:none; height:100%; background-color:#ebebeb; border-radius:3px; border:1px solid #999; padding:2px; width:130px; cursor:pointer; -webkit-transition:background .1s ease-in-out,color .1s ease-in-out,box-shadow .1s ease-in-out; -moz-transition:background .1s ease-in-out,color .1s ease-in-out,box-shadow .1s ease-in-out; -o-transition:background .1s ease-in-out,color .1s ease-in-out,box-shadow .1s ease-in-out; transition:background .1s ease-in-out,color .1s ease-in-out,box-shadow .1s ease-in-out; }

.mw-ui-button:hover { box-shadow:0 2px rgba(0,0,0,0.1),inset 0 -4px rgba(0,0,0,0.2); }

.mw-ui-button:focus { border:2px solid rgba(0,0,0,0.3); border-radius:4px; outline:none; box-shadow:none; }

.mw-ui-button:active { box-shadow:0 0 3px rgba(0,0,0,0.2); background-color:#ccc; }

/* #################### WELCOME TEXT #################### */ margin:3em 0; }
 * 1) mf-welcome-text {

/* ############# INFOBLOCKS ############ */ .infoblock-container { margin-top: 3em; display: flex; justify-content: center; flex-wrap: wrap; }

.infoblock { margin: 0.5em; padding: 1em; border-radius: var(--roundy-border-radius); vertical-align:top; overflow: auto; flex-basis: calc(50% - 4em); flex-grow: 1; }

.infoblock-header { font-family:'Bowlby One'; letter-spacing:1px; display:block; font-size:2.5em; line-height:1em; padding:0 .5em .2em .5em; text-transform:uppercase; }

.infoblock-title { font-weight: 900; font-size: 1.2em; }

.infoblock-image { display: inline-block; }

.infoblock-text { display: inline-block; }

.infoblock-read-more { float: left; }

.infoblock#on-this-day, .infoblock#dyk { text-align: left; }

/* Template:Main Page Games */ @media screen and (max-width: 1380px) { div.game-container div.family-container div.spin-off-family div.spin-off-logo { display: block; }	div.game-container div.family-container div.spin-off-family div.spin-off-padding { display: none; } }

div.game-container { margin: 0 auto; display: flex; flex-flow: row wrap; justify-content: center; }

div.game-container div.game, div.game-container div.family-container div.spin-off-logo { display: inline-block; position: relative; margin: var(--margin-main-page-game); text-align: center; overflow: hidden; }

div.game-container div.game a { width: 100%; height: 100%; clip: rect(0px, 230px, 125px, 0px); position: absolute; line-height: 29px; font-size: 25px; text-decoration: none; background-color: rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; justify-content: center; transition: background-color 0.3s; z-index: 1; }

div.game-container div.game a:hover { background-color: rgba(0,0,0, 0.3); }

div.game-container div.game a ~ img { transition: transform 0.3s; image-rendering: auto; }

div.game-container div.game a:hover ~ img { transform: scale(1.05); }

div.game-container div.family-container div.spin-off-family { margin-top: 2.5em; } div.game-container div.family-container div.spin-off-padding { display: inline-block; width: 115px; margin: var(--margin-main-page-game) calc(var(--margin-main-page-game) / 2) var(--margin-main-page-game) calc(var(--margin-main-page-game) / 2); }

div.game-container div.game span.year { position: absolute; bottom: 0.5em; left: 1em; z-index: 10; }

div.game-container div.game span.year, div.game-container div.game a { color: white; text-shadow: 2px 2px 4px #000000; }

/* SIDEBAR */ div#mw-panel div.portal li a[href="https://discord.gg/eJnnvYb"] { background: url(https://discordapp.com/api/guilds/471372235957993474/embed.png) no-repeat; color: transparent !important; display: inline-block; height: 20px; width: 119px; }

/* SITE NOTICE */ div#siteNotice .sitenotice-container { font-size:1.25em; text-align:center; padding:1em; border-radius: var(--roundy-border-radius); } div#siteNotice .sitenotice-date { float:left; line-height:0; font-size:.8em; }

div#siteNotice .sitenotice-header { margin: 0; font-size: 1.5em; }

div#siteNotice .sitenotice-latest-announcements { float:right; line-height:0; font-size:.8em; }

/* * Stylesheet to load on Template:Hide with Extension:CSS */ .template-hide { border: 1px solid #426787; border-collapse: collapse; clear: both; margin: 0; padding: 4px; }

.template-hide-head { display: flex; justify-content: space-between; align-items: center;

background-color: #2D679B; cursor: pointer; font-weight: bold; padding: 2px; text-align: center; -webkit-touch-callout: none; /* prevent text highlighting on double click */ -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

div.nav-head:hover { background-color: #227777; }

.template-hide-toggle { color: yellow; flex-shrink: 0; float: right; font-size: smaller; font-weight: normal; vertical-align: middle; width: 5em; }

/* Allows hide and show to toggle */ .template-hide span.hide, .template-hide.mw-collapsed span.show { display: block; }

.template-hide span.show, .template-hide.mw-collapsed span.hide { display: none; }

/* Template:Compendium */ .compendium-heading { z-index:0; position: relative; text-align: center;/* The 'text' in the middle where the before and after behave relative to, which is also why we need a div outside the span/text */ } .compendium-heading:after, .compendium-heading:before { z-index: -1; position: absolute; top: 50%; overflow: hidden; width: 50%; /* 50% - [desired cropping of both ends] */ height: 1px; content: ' '; background-color: #E0E0E0; } .compendium-heading:before { margin-left: -50%;      /* -1*width */ } .compendium-heading > div > span { padding:0 1em; /* The desired spacing from the lines */ background-color:#1d578b; /* Messagebox Background color */ }

/* Template:NIWAnav */ border-radius: var(--roundy-border-radius); display:inline-block; margin:3px; padding:10px 0; text-align:center; width:12em; }
 * 1) NIWA-nav .cell { /* Each wiki's cell */

/* Knight Challenges page */ text-align: center; }
 * 1) knight-challenges-page-banner {

max-width: 100%; height: auto; }
 * 1) knight-challenges-page-banner img {

div.knight-challenges-cards-container { display: flex; }

div.knight-challenges-card { flex-grow: 1; flex-basis: 0; padding: 10px; }

.knight-challenges-card-header { text-align: center; }

.knight-challenges-card-content { border-radius: var(--roundy-border-radius); height: calc(100% - (2 * 10px)); padding: 10px; }

/* NAVBOXES */ div.navbox { clear: both; border: 1px solid; padding: 2px; margin-top: 4px; }

div.navbox span.mw-collapsible-toggle { padding-right: 5px; }

div.navbox table.navbox-table { width: 100%; }

div.navbox table.navbox-table th { width: 10%; }

div.wikiEditor-ui-text textarea.ui-autocomplete-input { background-color: white; color: black; }

td.nomenclature-flag { text-align: center; }

.mwe-popups.mwe-popups-type-reference .mwe-popups-extract:after { background-image: none; } .mwe-popups { z-index: 100000; /* Needed to resolve a viusal bug caused by Gamepedia ads */ }

/* Unbulleted lists */ ol.plainlist, ul.plainlist { line-height: inherit; list-style: none none; margin: 0; } ol.plainlist li, ul.plainlist li { margin-bottom: 0; } /* Portable infoboxes add a left margin to lists which doesn't work well for plainlists - overriding it here */ .portable-infobox ul.plainlist { margin-left: 0; }

dl.releases dt:not(:first-child) { margin-top: 1em; } dl.releases dd { margin-left: 0; }

/* MISC */ .caption { font-size: 12px; }

.centered { text-align: center !important; margin: auto !important; }

.mobile-only { display: none; }

div.flex-line-break { width: 100%; }

.mw-highlight.nowrapLines pre { white-space: pre; }

.hidden-link a, .hidden-link a:visited, .hidden-link a.new, .hidden-link a.new:visited { color: inherit !important; }

font-size: 1.25em; text-align: center; padding: 1em !important; border-radius: 10px; }
 * 1) spoiler-alert {

.fandom-community-header__image img, .fandom-sticky-header__logo img { image-rendering: auto; }

/* Tabs */ .tabcontainer .tab { border: 2px solid; border-radius: 2px; cursor: pointer; float: left; margin: 0 1px 2px; padding: 3px; text-align: center; white-space: nowrap; }

/* Template:Mbox */ .mbox { display: table; text-align: left; overflow: auto; margin: 0 auto 1em; padding: 5px 7px; border-radius: var(--roundy-border-radius); }

.mbox-image { vertical-align: middle; padding: 2px 5px 2px 0.5em; display: table-cell; }

.mbox-content { vertical-align: middle; padding: 1px; display: table-cell; }

.mb-header { font-size: 14px; font-weight: bold; }

.mbox-reason, .mbox-info { font-size: 13px; }

/* Template:Main Page Categories */ .main-page-categories { display: flex; flex-wrap: wrap; justify-content: center; }

.main-page-category-item { position: relative; width: 200px; height: 75px; margin-right: 20px; }

.main-page-category-item-image { position: absolute; height: 100%; filter: drop-shadow(2px 2px 2px black); }

.main-page-category-item-image img { height: auto; width: auto; max-width: 75px; max-height: 100%; vertical-align: middle; }

.main-page-category-item-caption { height: 100%; }

.main-page-category-item-caption a { width: 100%; height: 50%; font-size: 18px; display: inline-block; text-align: right; margin-top: 10%; padding: 2% 5% 0 0; box-shadow: 1px 1px 2px #000; color: white; text-decoration: none; transition: 0.3s; }

/* tables with centered cells */ table.centered-table { text-align: center; }

/* Template:Gallery */ div.gallery-box { width:150px; padding:0.2em; margin-top:0.7em; text-align:center; border:1px solid; font-size:130%; display: flex; }

/* Template:Notice & Template:Notice/Start */ div.notice-container { display: flex; justify-content: center; }

div.notice-title { border: 3px solid; text-align: center; border-radius: 25px; padding: 3px 10px; font-size: 140%; font-weight: bold; }

div.notice-content { border: 3px solid; border-style: none solid; padding: 5px; margin-bottom: 5px; border-radius: 15px; }

/* Character infobox theme */ .portable-infobox { background-color: var(--theme-page-background-color); width: 28em; font-size: 95%; padding: 0.25em; border-radius: var(--roundy-border-radius); }

.portable-infobox .pi-title { border: 1px solid var(--theme-border-color); border-radius: var(--roundy-border-radius); }

.pi-item-spacing, .portable-infobox .pi-title { margin: 2px; }

.pi-data { border: none; }

.pi-item-spacing { padding: 0; column-gap: 2px }

.portable-infobox .pi-data-label, .pi-data-value { border: 1px solid var(--theme-border-color); padding: 8px; font-size: 95%; }

.pi-data-label { border-radius: var(--roundy-border-radius) 0px 0px var(--roundy-border-radius); background-color: var(--theme-page-background-color--secondary); flex-basis: 160px; text-align: right; display: flex; justify-content: right; }

.pi-data-label div { align-self: center; }

/* Image field */ .pi-data-value:first-child { border: none; margin: auto; text-align: center; width: 100%; }

.pi-data-value:not(:first-child) { border-radius: 0px var(--roundy-border-radius) var(--roundy-border-radius) 0px; flex-basis: 257px; max-height: 175px; overflow: auto; }

/* MediaWiki:Comment.css extensions */ .comments__quote-bubble p+p { margin-top: var(--zw-space-2); }

.theme-fandomdesktop-dark .comments__quote-bubble { background-color: #1d578b; }

.theme-fandomdesktop-dark .comments__quote-context { color: #bbbbbb; }

/* Useful for debugging - the textarea is super small by default */ .mw-special-ExpandTemplates textarea { width: 100%; height: 50rem; }

/* CSS Design at the bottom of the wiki */ div.resizable-container > div.page::after { background: url(https://static.wikia.nocookie.net/zelda_gamepedia_en/images/c/c5/CSS_Hyrule_Rule.png/revision/latest) bottom center; height: 86px; content: ""; width: 100%; position: absolute; bottom: -44px; left: 0; margin-top: 100%; margin-top: 43px; z-index: 2; }