@page
{
    size: 62mm 88mm;
}
:root
{
    --padding: 0;
    --width: 62mm;
    --height: 88mm;
    --innerWidth: calc(var(--width) - var(--padding));
    --innerHeight: calc(var(--height) - var(--padding));

    --green: #292;
    --red: #C30;
    --orange: rgb(232, 126, 41);;
    --yellow: #EC3;
    --gray: #999;
    --brown: #963;
    --white: #FFF;
    --black: #000;
    --purple: #A0C;

    --titleFontSize: 3.25mm;

}
:root[data-colorenabled='false']
{
    --green: #999;
    --red: #999;
    --orange: #999;
    --yellow: #999;
    --gray: #999;
    --brown: #999;
    --white: #FFF;
    --black: #000;
    --purple: #999;
}
:root
{
    --ScumColor: var(--yellow);
}


*
{
    margin: 0;
    padding: 0;
    border: 0;
    font-family: sans-serif;
}
body 
{
    width: var(--width);
    height: var(--height);
    background-color: #CCC;
    white-space: nowrap;
    overflow: hidden;
}
#overlay 
{
    display: none;
}
#cardFullSize
{
    position: absolute;
    top: 0;
    left: 0;
    width: var(--width);
    height: var(--height);
    text-align: center;
    background-color: #FFF;
    z-index: 0;
}


:root[data-colorenabled='true'] .purple
{
    color: var(--purple);
}
:root[data-colorenabled='true'] .red
{
    color: var(--red);
}

.italic
{
  font-style: italic;
}

@media print 
{
    #overlay 
    {
        display: none !important;
    }
}

#front
{
    position: absolute;
    top: 0;
    left: 0;
    width: var(--width);
    height: var(--height);
    text-align: center;
    z-index: 50;
}
#front p 
{
    width: var(--innerWidth);
    height: var(--innerHeight);
    margin-left: calc(var(--padding) / 2);
    margin-top: calc(var(--padding) / 2);
}
#front .photo img
{
    height: var(--imgHeight);
    margin-top: calc((var(--innerHeight) / 2) - (var(--imgHeight) / 2));
    filter: drop-shadow(3px 5px 4px rgba(255,255,255,0.6));
}