Template:CardBox/styles.css

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

/* The culprit for the image problems was the element! */ pre { /* Remove all of the special formatting for this element */ padding: 0; margin: 0; white-space: normal; overflow: auto; word-wrap: normal; background-color: transparent; color: transparent; border: 0; line-height: 0; /* Include new specifications that make the image behave as intended */ display: flex; justify-content: center; align-items: center; }

/* The next section is CSS that will apply regardless of viewport dimensions */

/* Default text font and color */ body { font-family: Arial, Helvetica, sans-serif; color: black; }

/* Specify CSS for the main div container */ width: 100%; background-color: #ededed; border-style: solid; border-width: 0.3em; border-radius: 0.7em }
 * 1) mainBox {

/* Primary name box */ height: 6.6vh; background-color: #404040; font-size: 3vh; color: white; text-align: center; }
 * 1) nameBox {

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

/* Div containing Japanese-related name information */ margin-bottom: 0.1vh; display: flex; justify-content: space-around; flex-wrap: wrap; font-size: 1rem; }
 * 1) jpnBox {

/* Div containing the card image */ margin-left: 0.5vw; }
 * 1) imgBox {

/* Div containing card data */ width: 65%; margin-top: 1.5vh; margin-left: 0.7vw; font-size: 1.3em; }
 * 1) dataBox {

/* Div containing non-lore data about card */ /*#metaBox { }*/

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

/* Class: Shorter Text */ /* Takes only 30% of the shared width space */ .short-text { width: 30%; }

/* Class: Longer Text */ /* Takes 70% of the shared width space */ .long-text { width: 70%; }

/* Div for Monster LV image */ height: 3vw; }
 * 1) lvDiv {

/* Div for card lore / effect text */ margin-right: 0.7vw; margin-bottom: 1vh; padding-bottom: 0.5vh; border-style: solid; border-width: 0.2em; border-radius: 0.2em; border-color: #363636; }
 * 1) loreBox {

/* [REQUIREMENT] */ padding-top: 0.5vh; }
 * 1) reqText {

/* [EFFECT] */ padding-top: 1vh; }
 * 1) effText {

/* Class: Text Labels */ /* padding-left for [REQUIREMENT] and [EFFECT] */ .text-label { padding-left: 1vh; }

/* Class: Card Text */ /* The actual text in the card's lore box */ .card-text { padding-left: 1vw; font-size: 1em; }

/* Next is CSS specific to tablet devices */ @media only screen and (max-width: 1024px) { }

/* Finally, the next CSS is specific to mobile devices */ @media only screen and (max-width: 630px) { }