@media print{
    @page {
        size: landscape;
        margin: 6mm;
    }
}

body{
    font-family: Arial, Helvetica, sans-serif;
}

ul {
    padding-left: 15px;
}

li {
    margin-top: 2px;
    margin-bottom: 3px;
}

.invisible{
    visibility: hidden;
}

.page {
    width: 260mm;
    height: 200mm;
    overflow: hidden;
    box-sizing: border-box;
    vertical-align: middle;
    margin: 10px auto;
    border: 1px dashed #CCC;
    page-break-after: always;
    page-break-inside: avoid;
    background: url("./dot-grid.png") repeat;
}

div {
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6{
    font-variant: small-caps;
    margin: 0;
    padding: 0;
}

.keyword {
    font-variant: small-caps;
    text-decoration: dotted underline;
}

.box {
    height: 8mm;
    width: 8mm;
    border: 1px solid black;
}

.corruption-circle {
    height: 5mm;
    width: 5mm;
    border-radius: 5mm;
    border: 1px dashed #555;
}

.box-left{
    float: left;
    margin: 5px;
}

.box-bottom-left{
    position: absolute;
    bottom: 2px;
    left: 2px;
}

.box-top-left{
    position: absolute;
    top: 2px;
    left: 2px;
}

.box-right{
    float: right;
    margin: 5px;
}

.box-bottom-right{
    position: absolute;
    bottom: 2px;
    right: 2px;
}

.box-top-right{
    position: absolute;
    top: 2px;
    right: 2px;
}

/*
 /$$$$$$$                                            /$$            /$$$$$$                            /$$
| $$__  $$                                          | $$           /$$__  $$                          | $$
| $$  \ $$  /$$$$$$   /$$$$$$   /$$$$$$   /$$$$$$  /$$$$$$        | $$  \__/  /$$$$$$   /$$$$$$   /$$$$$$$
| $$$$$$$/ /$$__  $$ /$$__  $$ /$$__  $$ /$$__  $$|_  $$_/        | $$       |____  $$ /$$__  $$ /$$__  $$
| $$__  $$| $$$$$$$$| $$  \ $$| $$  \ $$| $$  \__/  | $$          | $$        /$$$$$$$| $$  \__/| $$  | $$
| $$  \ $$| $$_____/| $$  | $$| $$  | $$| $$        | $$ /$$      | $$    $$ /$$__  $$| $$      | $$  | $$
| $$  | $$|  $$$$$$$| $$$$$$$/|  $$$$$$/| $$        |  $$$$/      |  $$$$$$/|  $$$$$$$| $$      |  $$$$$$$
|__/  |__/ \_______/| $$____/  \______/ |__/         \___/         \______/  \_______/|__/       \_______/
                    | $$
                    | $$
                    |__/
*/

.report-card{
    height: 199mm;
    padding: 0 10px;
    display: grid;
    grid-template-rows: 8mm repeat(12, 1fr);
    grid-template-columns: 65mm 65mm 1fr;
    font-size: small;
    column-gap: 2mm;
    row-gap: 2mm;
}

.report-card h1, .report-card h2, .report-card h3, .report-card h4, .report-card h5, .report-card h6, .report-card .keyword{
    font-variant: small-caps;
}

.report-card h4{
    margin-top: 2px;
    margin-bottom: 2px;
}

.report-card header{
    grid-column: 1 / 3;
    grid-row: 1;
}

.report-card .skill-check-helper{
    grid-column: 2;
    grid-row: 7 / 14;
    border: 1px solid black;
    padding: 2px;
    background-color: white;
    font-size: x-small;
}

.report-card .skill-check-helper p{
    margin-top: 3px;
    margin-bottom: 3px;
}

.report-card .ability{
    height: 100%;
    width: 100%;
    border: 1px solid black;
    padding: 2px;
    overflow: hidden;
    position: relative;
    background-color: white;
}

.report-card .strong{
    display: block;
    grid-column: 1;
    grid-row: 2 / 4;
}

.report-card .fast{
    display: block;
    grid-column: 1;
    grid-row: 4 / 6;
}

.report-card .clever{
    display: block;
    grid-column: 1;
    grid-row: 6 / 8;
}

.report-card .wise{
    display: block;
    grid-column: 1;
    grid-row: 8 / 10;
}

.report-card .lucky{
    display: block;
    grid-column: 1;
    grid-row: 10 / 12;
}

.report-card .charming{
    display: block;
    grid-column: 1;
    grid-row: 12 / 14;
}

.report-card .skill{
    border: 1px solid black;
    padding: 2px;
    overflow: hidden;
    position: relative;
    background-color: white;
}

.report-card .skill .skill-attributes{
    font-size: x-small;
    position: absolute;
    right: 2px;
    top: 2px;
}

.report-card .creation{
    grid-column: 2;
    grid-row: 5 / 7;
    overflow: hidden;
}

.report-card .skill-creation{
    grid-column: 3;
    grid-row: 3;
}

.report-card .magic-corruption{
    grid-column: 3;
    grid-row: 2 / 3;
}

.report-card .skill-corruption{
    grid-column: 3;
    grid-row: 3 / 4;
}

.ability-title{
    font-weight: bold;
}

.ability-description{
    font-weight: lighter;
    font-size: x-small;
    font-style: italic;
}

.class-title{
    font-weight: bold;
}

.skill-description{
    font-weight: lighter;
    font-size: x-small;
    font-style: italic;
}

/*

  /$$$$$$                          /$$                   /$$
 /$$__  $$                        | $$                  | $$
| $$  \__/  /$$$$$$  /$$$$$$/$$$$ | $$$$$$$   /$$$$$$  /$$$$$$
| $$       /$$__  $$| $$_  $$_  $$| $$__  $$ |____  $$|_  $$_/
| $$      | $$  \ $$| $$ \ $$ \ $$| $$  \ $$  /$$$$$$$  | $$
| $$    $$| $$  | $$| $$ | $$ | $$| $$  | $$ /$$__  $$  | $$ /$$
|  $$$$$$/|  $$$$$$/| $$ | $$ | $$| $$$$$$$/|  $$$$$$$  |  $$$$/
 \______/  \______/ |__/ |__/ |__/|_______/  \_______/   \___/

*/

/* a tarot card is about 70mm wide and about 120mm tall */

.card {
    width: 10mm;
    height: 15mm;
    border: 1px solid black;
    margin: 5px;
    border-radius: 2mm;
    float: left;
    font-weight: bold;
    font-size: x-large;
    text-align: center;
    line-height: 15mm;
    background-color: lightgrey;
}

.card-major{
    font-size: large;
}

.card-moon{
    /* XVIII is just so long */
    font-size: medium !important;
}

.ability-grid{
    height: 199mm;
    padding: 0 10px;
    display: grid;
    grid-template-rows: repeat(12, 1fr);
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 2mm;
    row-gap: 2mm;
    font-size: x-small;
}

.corruption-container{
    width: 50%;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}

.combat-ability {
    border: 1px solid black;
    overflow: hidden;
    padding: 5px;
    position: relative;
    background-color: white;
}

.combat-ability ul, .narrative-ability ul{
    margin-top: 0;
}

.narrative-ability {
    border: 1px solid black;
    overflow: hidden;
    padding: 2px;
    position: relative;
    background-color: white;
}

.combat-ability-top h2{
    margin-bottom: 0;
}

.combat-ability-top .strongweak {
    position: absolute;
    right: 2px;
    bottom: 2px;
}

.combat-ability-bottom .strongweak {
    position: absolute;
    right: 2px;
    top: 2px;
}

.tarot-bottom {
    width: 70mm;
    height: 20mm;
    border-left: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    border-bottom-left-radius: 5mm;
    border-bottom-right-radius: 5mm;
    margin: -5px auto 0 auto;
    display: flex;
    justify-content: center;
}

.tarot-top {
    width: 70mm;
    height: 50mm;
    border-left: 2px solid black;
    border-right: 2px solid black;
    border-top: 2px solid black;
    border-top-left-radius: 5mm;
    border-top-right-radius: 5mm;
    margin: auto;
    display: flex;
    justify-content: center;
}

.upgrade{
    border: 1px solid black;
    padding: 2px;
    width: 100% - 4px;
    margin: 2px;
    text-align: center;
}

.upgrade-top{
    position: absolute;
    bottom: 2px;
    right: 2px;
}

.upgrade-bottom{
    margin-bottom: 10px;
}

.flavor{
    font-style: italic;
    font-size: x-small;
}

.flavor p{
    margin-top: 2px;
    margin-bottom: 4px;
}