/*
====================================
Cascading Stylesheet File
Written by _<Your Name>_ on _<Date>_
====================================
*/

/* DM Sans font from google Fonts. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Alfa+Slab+One&family=Anton&family=Cabin:ital,wght@0,400..700;1,400..700&family=Concert+One&family=DM+Serif+Display:ital@0;1&family=Lobster&family=Lora:ital,wght@0,400..700;1,400..700&family=Permanent+Marker&family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playwrite+GB+S:ital,wght@0,100..400;1,100..400&family=Protest+Strike&family=Rozha+One&family=Rubik:ital,wght@0,300..900;1,300..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&family=Spicy+Rice&family=Squada+One&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

/*
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
*/

/*
.philosopher-regular {
  font-family: "Philosopher", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.philosopher-bold {
  font-family: "Philosopher", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.philosopher-regular-italic {
  font-family: "Philosopher", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.philosopher-bold-italic {
  font-family: "Philosopher", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.squada-one-regular {
  font-family: "Squada One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.rozha-one-regular {
  font-family: "Rozha One", serif;
  font-weight: 400;
  font-style: normal;
}

.alfa-slab-one-regular {
  font-family: "Alfa Slab One", serif;
  font-weight: 400;
  font-style: normal;
}

.concert-one-regular {
  font-family: "Concert One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.urbanist {
  font-family: "Urbanist", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}


.source-serif-4 {
  font-family: "Source Serif 4", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.spicy-rice-regular {
  font-family: "Spicy Rice", serif;
  font-weight: 400;
  font-style: normal;
}

.permanent-marker-regular {
  font-family: "Permanent Marker", cursive;
  font-weight: 400;
  font-style: normal;
}

.dm-serif-display-regular {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
}

.dm-serif-display-regular-italic {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: italic;
}

.abril-fatface-regular {
  font-family: "Abril Fatface", serif;
  font-weight: 400;
  font-style: normal;
}

.playwrite-gb-s {
  font-family: "Playwrite GB S", cursive;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.cabin {
  font-family: "Cabin", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:"wdth" 100;
}

.anton-regular {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.protest-strike-regular {
  font-family: "Protest Strike", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lora {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.playfair-display {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.rubik {
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.lobster-regular {
  font-family: "Lobster", serif;
  font-weight: 400;
  font-style: normal;
}
*/

p, .annotated-picture, ul, ol, td
{
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

h1, h2, h3, h4, th
{
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 32pt;
}

h2
{
    font-size:20pt;
    font-weight: 300;
}

.card-quantity, .text-highlight
{
  font-family: "Alfa Slab One", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 50pt;
}

.text-highlight
{
  font-size: 20pt;
}

h3
{
    font-weight: 200;
    font-style: normal;
    font-size: 16pt;
}

h4, th
{
    font-weight: 1000;
    font-style: normal;
    font-size: 14pt;
}

/* Selectors and Formatting Directives go here */

html
{
    background-color: darkgray;
}

body
{
    background-color: white;
    margin:10px;
    padding:30px;
    /*
    border-right-style:  solid;
    border-bottom-style: solid;
    */
    border-style:solid;
    border-color:black;
    
    border-top-width:1px;
    border-left-width:1px;
    border-right-width:3px;
    border-bottom-width:3px;
}

.decklist-heading
{
    font-size: 32pt;
}

.decklist
{
    padding-left:25px;
    border-style:solid;
    border-width:1px;
    margin-bottom:25px;
    text-align: center;
}

.decklist, pre
{
    background-color: lightgray;
}


.card-item
{
    display:inline-flex;
    justify-content: center;
    align-items:center;
    margin-right:25px;
    position:relative;
    /*margin-bottom:50px;*/
    min-height:310px;/*310 + 50px. Gurantees space for quantity.*/
    padding-top:25px;
    padding-bottom:25px;
}

.card-quantity
{
    position:absolute;
    color:white;
    background-color:rgba(.1, .1, .1, .5);
    top:275px;
    line-height:55px;
    padding:5px;
}

h1, h2, h3, h4
{
  margin-top:50px;
}

h1, p, h2, .highlights, h3, pre, h4, table
{
    max-width:900px;
    padding-left:50px;
    padding-right:50px;
    margin-left:auto;
    margin-right:auto;
}

ul, ol
{
    max-width:850px;
    padding-left:75px;
    padding-right:75px;
    margin-left:auto;
    margin-right:auto;
}

.highlights, .highlights img, p img
{
  max-width:100%;
}


.cardname
{
    color:rgba(0, 50, 255, 1.0);
}

.highlights
{
    text-align: center;
    margin-bottom: 75px;
}

.text-highlight
{
  display:inline-block;
  padding:25px;
}


.annotated-picture
{
  width: 223px;
  margin-bottom: 20px;
  margin-left:2px;
  margin-right:2px;

  background-color: rgba(0,0,0, .1);
}

.card-item .annotated-picture
{
  margin-bottom: 0;
  margin-left:0;
  margin-right:0;

  background-color: rgba(255,255,255, .5);
}

.cardpicture img, .card-item img
{
    width: 223px;
    height:310px;
}

.annotated-picture, .cardpicture img
{
    display:inline-block;
    vertical-align: top;
    text-align:left;
}

.card-annotation
{
  text-align: left;
}

.annotated-picture .cardname
{
  font-size: 0;
}

pre
{
  padding-top:50px;
  padding-bottom:50px;
}

.cardpicture p
{
    max-width:100%;
    padding-left:5px;
    padding-right:5px;
}

td .cardpicture img
{
    width: 111.5px;
    height:155.0px;
}

th:nth-child(n+2)
{
  padding-left:10px;
  padding-right:10px;
  border-bottom-style: solid;
  border-bottom-color:black;
  border-bottom-width:1px;
}

td
{
  text-align:center;
  font-size: 32pt;
}

.font12 td
{
  text-align:left;
  font-size: 12pt;
}

td:nth-child(1)
{
  font-size: 14pt;
}

table
{
  margin-top:50px;
  margin-bottom:50px;
}

li 
{
  margin-bottom:20px;
}

.display
{
    text-align:center;
    font-size:16pt;

    margin-left:auto;
    margin-right:auto;
}

img.mtg_symbol
{
  width:13px;
  height:13px;
  display:inline;
  vertical-align: middle;
}

sup a
{
  text-decoration: none;
}

sup a:hover
{
  text-decoration: underline;
}