Template:SetPage/styles.css

/* Overwrite the spacing of the link options for #tabContent */ justify-content: space-around; }
 * 1) tabMenu > #tabContent {

/* The next CSS attempts to make images behave more nicely */

/* Image CSS specifications to control the behavior of the card image in the template */ img { max-width: 100%; height: auto; vertical-align: baseline; }

/* On WikiTide, another element is also a source of trouble for images */ .mw-default-size { display: contents; }

a.mw-file-description { width: 100%; height: 100%; }

/* The next CSS is for general shared classes */

/* Class: Flex-Center */ /* (Flexbox display with alignment towards the center-middle) */ .flex-center { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }

/* Class: Flex-Default */ /* Flex display with the default settings */ .flex-default { display: flex; }

/* General CSS for template components */

/* Main information box on the page */ .infoBox { width: 100%; padding-bottom: calc(0.37619553666312433vw + 0.18809776833156217vh); margin-bottom: calc(0.4201312910284463vw + 0.16805251641137864vh);; border-style: solid; border-width: 0.3em; border-radius: 0.7em; border-color: black; background-color: #BEEBFE; font-family: Arial, Helvetica, sans-serif; color: black; font-size: 1rem; }

/* Set name box */ .nameBox { height: 100%; padding-bottom: 0.6rem; padding-top: 0.3rem; /* 0.3rem is added by the border above the div */ background-color: black; }

/* The title of the set located in nameBox */ .setTitle { color: white; font-size: 1.6rem; font-family: Arial, Helvetica, sans-serif; font-weight: bold; line-height: 1; text-align: center; border: 0; margin: 0; overflow: visible; }

/* Set a color for citations that appear within .nameBox */ .setTitle > sup > a { color: #6161FF; }

/* Div containing Japanese-related name information */ .jpnBox { margin-bottom: calc(0.037619553666312436vw + 0.018809776833156214vh); display: flex; justify-content: space-around; flex-wrap: wrap; text-align: center; }

/* Div containing a product image and release information */ .dataBox { margin: auto 2%; font-size: 1.15rem; /* Overwriting the specification in flex-center */ justify-content: space-around; }

/* The divs containing the product image and set release information */ .imgBox, .propBox { margin: auto 0.5%; }

/* The individual divs containing a data field and its value */ .propItem { margin-top: calc(1.49921915669vw + 0.59968766267vh); display: flex; justify-content: space-between; align-items: center; text-align: center; vertical-align: middle; }

/* The data header/field names in .propItem */ .propHeader { font-weight: bold; padding-right: calc(2.30602930579vw + 1.38361758347vh); }

/* Values for the set release information in .propBox */ .propVal { text-align: end; }

/* The div containing the previous and next set names as well as the Database ID*/ .boxFooter { display: flex; justify-content: space-between; align-items: center; text-align: center; background-color: white; border-radius: 0.25rem; }

/* The individual items within .boxFooter */ .footerItem { margin: auto 0.5%; }

/* This affects the link text within the .footerItem divs */ .footerItem > a { overflow-wrap: anywhere; }

/* CSS for the Konami Database link (middle item of .footerBox) */ .middleItem { border-left: solid; border-right: solid; border-color: black; border-width: 0.15rem; padding: 0 1%; }

/* The table containing a list of cards in the product */ .cardList { width: 100%; }

/* The of the card list table */ .cardList > tbody { overflow-wrap: anywhere; }

/* The table cell containing a square card image */ .sqImg { width: 15%; min-width: 15%; height: auto; }

/* elements that should be displayed like elements */ .headerlike-text { font-size: 1.5em; font-family: 'Linux Libertine','Georgia','Times',serif; line-height: 1.3; margin: 0.25em; padding: 0; border-bottom: 1px solid #a2a9b1; }

/* The next CSS applies only to mobile devices and smaller screens */ @media only screen and (max-width: 630px) { .mobile-hide { display: none; } }

/* CSS for very small screens */ @media only screen and (max-width: 330px) { .cardList { font-size: 0.75rem; } }