:root {
    --dark:#585858;
    --light:#6b6b6b;
}

svg.icon {
    width: 1em;
    height: 1em;
    vertical-align: middle; /* works, but -0.125em often aligns perfectly with the text baseline */
    /* vertical-align: -0.125em; */
    stroke: var(--dark); /* Keeps dynamic coloring intact */
    color: var(--dark);
    fill: none;
}

/***** F O N T *****/

body, h1, h2, h3, h4, h5, h6 {
    /* fix firefox's text-blackener 
    https://stackoverflow.com/questions/55221501/firefox-print-page-white-font-colors-overidden-to-darker-colors */
    color: transparent;
    text-shadow: 0 0 0px red;
    text-align: center; }

hr {
    border: 1px solid var(--dark); border-radius: 10px;
    width: 80%;
    margin-top: 0.7em;
    margin-bottom: 0;
}
h6 {
    text-shadow: 0 0 0px var(--dark);
    margin-top: 3mm;
    margin-bottom: 0mm;
    line-height: 1.5rem; }
h6:not(:first-of-type) { margin: 0mm; }
h6:last-of-type { margin-bottom: 2mm; }

p {
    margin-top: 3mm;
   color: transparent;
    text-shadow: 0 0 0px var(--light);
    text-align: center; 
}

/***** S T R U C T *****/

.card {
    border:0.2mm solid #6b6b6b; /*border-radius: 5px;*/
    display: flex;
    flex-direction: column;
    float: left; }
.card.item { /*silver Docsmagic sleeves*/
    /*width : 63.5mm;
    height: 88.0mm;*/
    width : 52.1mm; /*4x4*/
    height: 73.8mm; }
.card.character { /*magenta Docsmagic sleeves*/
    width : 80mm;
    height: 120mm; }
.card.modifier { /*HALF magenta Docsmagic sleeves*/
    width : 80mm;
    height: 60mm; }


.card > .head { margin-top: 3mm; }

.title {
    float: left;
    width: /*74%*/ 100%;
    text-align: center; }
h1 {
    text-shadow: 0 0 0px var(--dark);
    font-size: 5mm; }

.card > .body {
    /* This vert. centers the body content
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
    justify-content: center;
    */
    /* This is only for when the body is not vert. centered */
    width: 80%;
    margin-left: 10%;
    margin-top: 0mm;
    float: left;
    position: relative;
}


.weightbox {
    text-shadow: 0 0 0px var(--light);
    margin: 1mm auto;
    width: 45%;
    border: 2px solid var(--dark); border-radius: 10px; }

.effectbox {
    position: relative;
    text-shadow: 0 0 0px var(--light);
    margin: 0mm auto;
    margin-top: 5mm;
    width: calc(100% - 4px);
    border: 2px solid var(--dark); border-radius: 10px; }
.effectbox:first-of-type {
    margin-top: 3mm;
}
.icon.dummy { stroke: white; color: white; }

h3               { 
    text-shadow: 0 0 0px var(--light);
    font-size: 4.5mm; /*3.5mm;*/
    line-height: 5.3mm /*4.3mm*/; }
h3.character-normalization { line-height: 4.55mm; }
h3:first-of-type { margin-top:    3mm; }
h3:last-of-type  { margin-bottom: 1mm; }

h3 > .icon { height: 4.5mm;}


.attributebox {
    float: left;
    text-shadow: 0 0 0px var(--light);
    height: calc(10.5mm - 4px);
    width: calc(30% - 4px);
    margin-right: calc(5% + 2px); /* 2px also come from the right-border of effect box! So 80%+4px*/
    border: 2px solid var(--dark); border-radius: 10px; }
.attributebox:last-of-type{ margin-right: 0; }
.passion > .icon {
    border: 2px solid var(--dark); 
    border-radius: 100px;
}


.conditionbox {
    position: relative;
    text-shadow: 0 0 0px var(--light);
    margin: 0mm auto;
    margin-top: 5mm;
    width: 100%;
    border: 2px solid var(--dark); border-radius: 10px; }
.conditionbox.left { border-left: none; border-radius: 0 10px 10px 0; }
.conditionbox.right { border-right: none; border-radius: 10px 0 0 10px; }


div > .weight {
    position: absolute;
    left: 50%;  /*Moves the left edge to the exact middle of the parent */
    transform: translate(-50%, -55%); 
    width: max-content;  
    padding: 0px 3px;
    background-color: white;
}
/*div > .weight svg * {
    fill: var(--light); 
}*/
.weight > .icon:not(:first-of-type) {
    margin-left: 1mm;
}


.card > .foot { margin-top: auto; }

.card.character { position:relative }
.card.character > h5:first-of-type { 
    width: max-content ;
    text-align:left ; 
    left: 2%;
    top: 100%;
    transform: translate( -0% , -125% );
    position: absolute; }
.card.character > h5:last-of-type { 
    width: max-content ;
    text-align:right;
    left: 98%;
    top: 100%;
    transform: translate( -100% , -125% );
    position: absolute; }


h5 { 
    font-size: 3mm; 
    text-shadow: 0 0 0px #9e9e9e; }


/***** I C O N S *****/

.icon {
    width: 5mm;
    vertical-align: middle;
    color: var(--light); }

/*.icon.title {
    color: var(--dark);
    float: left;
    width:9%;
    margin-left: 4%; }*/
/*.icon.title:last-child {
    margin-left: 0%;
    margin-right: 4%;
    transform: scale(-1, 1); }*/





.attributebox > .icon:first-child ,
.conditionbox > .icon:first-child {
    color: var(--dark);
    position: absolute;
    transform: translate(-50%, -50%);
    background-color: white; 
    padding: 0px 5px;
    z-index: 10; }

.effectbox > .headline {
    position: absolute;
    left: 50%; /* Moves the left edge to the exact middle of the parent */
    transform: translate(-50%, -50%); /* Shifts the element back by exactly 50% of its OWN dynamic width */
    width: max-content;  
    padding: 0 3px;
    background-color: white; 
}

.effectbox > .icon.special {
    position: absolute;
    left: 100%; /* Moves the left edge to the exact middle of the parent */
    transform: translate(-150%, -128%); 
    width: max-content;  
    padding: 0px 3px;
    background-color: white; 
}
.effectbox.centerheader > .icon {
    position: absolute;
    left: 50%;
    top: 0%;
    transform: translate(-50%, -117%); 
    width: 5mm;
    height: 5mm; 
    padding: 0px 3px;
    background-color: white; 
}
.effectbox > .icon {
    margin-top: 3mm;
    margin-bottom: 2mm;
}
/* Targets any .icon that comes AFTER another .icon, 
   but excludes it if it has the .special class */
.effectbox > .icon:not(.special) ~ .icon:not(.special) {
    margin-left: 1.2mm;
}
.effectbox > .icon:nth-child(9 of .icon:not(.special)) ~ .icon {
    margin-top: 0mm;
}

.conditionbox.left:first-of-type > .icon:first-child,
.conditionbox.left:last-of-type  > .icon:first-child { 
    left: 100%; 
    top:50%; 
    transform: translate( calc(-50% + 1px), -50%); 
    padding: 3px; 
    width: 5mm;
    height: 5mm;  }
.conditionbox.right:first-of-type > .icon:first-child,
.conditionbox.right:last-of-type  > .icon:first-child {
    left: 0%; 
    top:50%; 
    transform: translate(calc(-50% - 1px), -50%); 
    padding: 3px;
    width: 5mm;
    height: 5mm;  }
.icon:not(:first-of-type) {
    background-color: transparent;
}

.characteralignhelper { display: flex;flex-direction: row;flex-grow: 1;width: 100%;margin-bottom: 5mm; }
.characterattributealignhelper { display: flex; margin-top: 4mm; }
.characterbottomcondition { border-bottom: none;border-radius: 10px 10px 0 0; margin-top: 3.5mm; }
.body.characterside { width: 15%; }
.body.charactercenter { width: 60%; margin-left: 5%; margin-right: 5%; margin-top: 7px; }

.modifieroffset { margin-top: 5.5mm; }




/*attribute*/
h2 {
    text-shadow: 0 0 0px var(--light);
    font-size: 5mm;
    margin-top: 3.5mm;
    color: var(--dark);
}

.hidden {
    border-color: transparent;
}

/*conditions*/
h4 {
    text-shadow: 0 0 0px var(--light);
    font-size: 5mm;
    margin: 2.5mm 0mm;
    color: var(--dark); }
h4:first-of-type {
    margin-top: 4mm;
}