:root {

    --theme-nav-background: #3d3568;
    --theme-nav-link: white;
    --theme-nav-link-hover: #b295d4cb;
    --theme-nav-text: white;
    --theme-nav-accent-text: #c882e4;

    --table-header-background: #4d4480;
    --table-header-text: white;
    --table-link: #000;
    --table-link-hover: #312c5e;
    --table-row-hover: #e5e4f1;

    --highlight: #ffe599;

    --good-text: #063969;
    --good-background: #a4c2f4;

    --evil-text: #a7180c;
    --evil-background: #f4c7c3;

    --won-text: #1e8113;
    --won-background: #bff09a;

    --tf-text: #044b7e;
    --tf-background: #83bfea;

    --outsider-text: #035753;
    --outsider-background: #83dfdb;

    --minion-text: #6e3a03;
    --minion-background: #f2b36f;

    --demon-text: #8d1708;
    --demon-background: #f48677;

    --traveller-text: #756509;
    --traveller-background: #fff788;

    --fabled-text: #755c09;
    --fabled-background: #fde67c;

    --loric-text: #2b7509;
    --loric-background: #b3f2a0;

    --snv-text: #580868;
    --snv-background: #b4a7d6;

    --gradient-normal-bg: #46bdc6;
    --gradient-evil-bg: #e67c73;

    --tb-background: #ea9999;
    --bmr-background: #f6b26b;
    --custom-background: #9fc5e8;
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

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

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0px;
}

td, th {
    border-left: 0;
    border-top: 0;
    vertical-align: middle;
    border: solid 0.5px #797979;
    padding: 2px;
    padding-right: 4px;
    mix-blend-mode: multiply;
}
th {
    position:sticky; 
    top: 0; 
    z-index: 1;
    mix-blend-mode: normal;

    outline: none;
    position: sticky;
    font-weight:normal;
    text-align: left;
    color: var(--table-header-text);
    background-color: var(--table-header-background);
    mix-blend-mode: normal;
}

.special-win-con {
    background-color: var(--highlight);
    mix-blend-mode: multiply;
}

#players, #travellers {
    width: 80px;
}

.players, .travellers {
    text-align: right;
    padding-right: 2px;
}



.won, .duration {
    text-align: center;
    width: 60px;
    padding-right: 2px;
}


#number {
    text-align: center;
    padding-right: 2px;
}

tr:hover {
    background-color: var(--table-row-hover);
}

table a {
    text-decoration: none;
    color: var(--table-link);
        &:hover {
        color: var(--table-link-hover);
		text-decoration: underline;
    }
}

.alignment {
    width: 60px;
    text-align: center;
}

.Townsfolk {
    color: var(--tf-text);
    background-color: var(--tf-background);
}

.Outsider {
    color: var(--outsider-text);
    background-color: var(--outsider-background);
}

.Minion {
    color: var(--minion-text);
    background-color: var(--minion-background);
}

.Demon {
    color: var(--demon-text);
    background-color: var(--demon-background);
}

.Traveller {
    color: var(--traveller-text);
    background-color: var(--traveller-background);
}

.Fabled {
    color: var(--fabled-text);
    background-color: var(--fabled-background);
}

.Loric {
    color: var(--loric-text);
    background-color: var(--loric-background);
}

.SNV {
    background-color: var(--snv-background);
}

.TB {
    background-color: var(--tb-background);
}

.BMR {
    background-color: var(--bmr-background);
}

.custom {
    background-color: var(--custom-background);
}

.good-won, .Good{
    background-color: var(--good-background);
}

.good-won, .Good, .Good-text {
    color: var(--good-text);
}

.evil-won, .Evil, .Lost {
    background-color: var(--evil-background);
}

.evil-won, .Evil, .Evil-text, .Lost {
    color: var(--evil-text);
}

.Won {
    background-color: var(--won-background);
    color: var(--won-text);
}

#nav {
    position:sticky;
    display: block;
    height: 100vh;
    width: 172px;
    top: 0;
    float: left;
    background-color: var(--theme-nav-background);
    color: var(--theme-nav-text);
    h1, p { text-align: center; }
    p {
        font-size: 1.2em;
        color: var(--theme-nav-accent-text);
        padding-bottom: 8px;
        border-bottom: 2px solid var(--theme-nav-text);
        width: 80%;
        margin-left: 10%;
        margin-bottom: 4px;
    }
    h1 { padding-bottom: 0}
    a {
        text-decoration: none;
        color: var(--theme-nav-link);
        &:hover {color: var(--theme-nav-link-hover) }
    }
    
    li > a {
        font-size: 1.3em;
        line-height: 1.6;
        margin-left: 8px;
        &::before { content: "» "}
    }
}


#main {
    display:block;
    margin-left: 204px;
    padding-bottom: 24px;
}



h1 {
    padding: 12px 0;
}

.color-percent {
    background-color: color-mix(in oklab, var(--c) calc(100% * (var(--v))/100), transparent);
}

.normal-percent {
    background-color: color-mix(in oklab, #e67c73 calc(100% * (-1 * var(--m) + 50)/50), #a4c2f4 calc(100% * (var(--m) - 50)/50), transparent);
    color:black;
}

.normal-gradient {
    background-color: color-mix(in oklab, var(--c) calc(100% * (var(--v))/(var(--mv))), transparent);
}

.duration-gradient {
    background-color: color-mix(in oklab, #e67c73 calc(100% * (var(--m) - 75)/60), #57bb8a calc(100% * (-1 * var(--m) + 75)/60), transparent);
}

.standard-number {
    text-align: right;
    width: 60px;
    padding-right: 4px;
}