.container#script-display{
    grid-gap: 0px;
    display: grid;
    /* grid-template-columns: repeat(4, [town] 1fr) repeat(2,[out] 1fr) repeat(2,[minion] 1fr) [demon] 1fr [fabled] 1fr; */
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 4fr;
    grid-auto-flow:dense;
    max-height: 100vh;
    max-width: 100vw;
    justify-content: space-evenly;
    overflow: hidden;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

#tokenArea{
    grid-column: 1 / span 4;
    grid-row: 2;
    display: grid;
    grid-template-rows: repeat(4, minmax(0,1fr));
    grid-auto-rows: minmax(0, 1fr);
}

h1#scriptTitle{
    grid-column: 1;
    grid-row: 1;
    text-align: center;
    left:auto;
    right: auto;
    width: 100%;
    min-width: auto;
    /* font-size: 1.8rem; */
}

h1#scriptTitle.small{
    font-size: 1.5rem;
}

h1#scriptTitle#xtraSmall{
    font-size: 1.3em;
}

.scriptInfoBox{
    grid-column: 2;
    grid-row: 1;
    text-decoration: small-caps;
    width: 100%;
    height: 100%;
    text-align: center;
    margin: 5px;
}

.si-countdownBox{
    grid-column: 3;
    grid-row: 1;
    width: 100%;
    height: 100%;
    text-align: center;
}


div.token {
    background-image: url("/images/experimental.webp");
    background-blend-mode: multiply;
    background-position: center center;
    background-Size: contain;
    background-repeat: no-repeat;
    height: 100%;
    width: 10 vmin;
    font-size: 0.8rem;
    margin: 2%;
    display: inline-flex;
    align-items: center;
    justify-items: center;
}

div.character {
    flex: 1 1 auto;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    text-align: center;
    display: inline-flex;
    justify-content: center;
    align-items: flex-end;
}

div.role-smallText{
    font-size: 0.8rem;
}