@font-face {
    font-family: 'Inter';
    src: url("../styles/Inter.woff2");
}

:root {
    --main-font: 'Inter', sans-serif;
    --main-font-size: clamp(15px, 3vw, 17px);
    --small-font-size: .8em;
    --tiny-font-size: .7em;
    --big-font-fize: 2.5em;
    --main-weight: 420;
    --skinny-weight: 200;
    --thick-weight: 480;
    --main-spacing: -0.005em;
    --small-font-spacing: .05em;
    --tiny-font-spacing: .09em;
    --big-font-spacing: -0.02em;
    --base-color: #e9ba96;
    --main-color: #b91c2f;
    /* --stroke-color: #ec6764; */
    --armed-stroke-color: #32021F;
    --literate-stroke-color:#C7FFED;
} 

html {
    scrollbar-width: thin;
    scrollbar-color: var(--main-color) var(--base-color);
}

a,
a:visited,
a:active,
a:hover {
    color: var(--main-color);
}

body {    
    background: var(--base-color);
    font-family: var(--main-font);
    font-size: var(--main-font-size);
    font-weight: var(--main-weight);
    letter-spacing: var(--main-spacing);
    margin: 30px 8px 60px 8px;
    position: relative;
    line-height: 1em;
    color: var(--main-color);
    display: flex;
    justify-content: center;
}

header {
    color: var(--main-color);
    font-size: var(--big-font-fize);
    font-weight: var(--skinny-weight);
    letter-spacing: var(--big-font-spacing);
    text-align: center;
    line-height: 1.1em;
}

main,
#about-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

nav {
    position: fixed;
    width: calc(100vw - 16px);
    bottom: 16px;
    display: flex;
    justify-content: space-evenly;
    font-size: var(--small-font-size);
    font-weight: var(--thick-weight);
    letter-spacing: var(--small-font-spacing);
    z-index: 999;
}

nav > * {
    background: var(--base-color);
    width: calc((100vw - 16px)/3);
    border-radius: 20px;
    text-align: center;
    padding: 6px 0;
    border: 1px solid var(--main-color);
    text-decoration: none;
    cursor: pointer;
    transition: all ease 200ms;
}

p {
    margin: 0;
    text-indent: 30px;
}

svg {
    overflow: visible;
}

circle.armed {
    stroke: var(--armed-stroke-color) !important;
}

circle.empty {
    fill: var(--base-color);
}

circle.empty.armed {
    stroke: var(--armed-stroke-color) !important;
}

circle.empty.literate {
    stroke: var(--literate-stroke-color) !important;
}

circle.literate {
    stroke: var(--literate-stroke-color) !important;
}

circle.stroked {
    stroke: var(--stroke-color);
}

#about {
    line-height: 1.3em;
    display: flex;
    flex-direction: column;
    align-items: center;
    word-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}

/* #about :is(a,a:visited,a:hover){
    background-color: var(--main-color);
    color: var(--base-color);
    padding: 0 6px;
    border-radius: 20px;
} */

#data-source {
    font-size: var(--tiny-font-size);
    font-weight: var(--thick-weight);
    letter-spacing: var(--small-font-spacing);
    line-height: 1.4em;
    opacity: .4;
    text-align: center;
}

#photo {
    background: url('../images/underground-railroad/william-stills.png') center;
    background-size: cover;
    width: 250px;
    height: 250px;
    border-radius: 100%;
    position: relative;
}

#photo .overlay {
    background: var(--main-color);
    position: absolute;
    top: 0;
    left: 0;
    mix-blend-mode:color;
    opacity: .9;
    border-radius: 100%;
}

#simulation {
    position: relative;
}

#simulation-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

#speeds,
#years {
    position: absolute;
    left: 0;
    display: flex;
    flex-direction: column;
}

#speeds {
    font-size: var(--tiny-font-size);
    letter-spacing: var(--tiny-font-spacing);
    font-weight: var(--thick-weight);
    gap: 3px;
}

#speeds > text {
    letter-spacing: -0.3em;
    text-align: center;
    position: relative;
    left: -1px;
}

#speeds > div {
    border: 1px var(--main-color) solid;
    padding:  2px 0;
    text-align: center;
    border-radius: 20px;
    cursor: pointer;
    transition: ease all 100ms;
    opacity: .3;
    width: 10vw;
}

#years {
    font-size: var(--small-font-size);
    letter-spacing: var(--small-font-spacing);
}

#years > div {
    padding: 3px;
    padding-left: 5px;
    opacity: .15;
    transition: all ease 100ms;
    position: relative;
    border-left: 1px var(--base-color) solid;
}

.active {
    background-color: var(--main-color);
    color: var(--base-color);
    transition: all ease 200ms;
    opacity: 1 !important;
}

.active-year {
    opacity: 1 !important;
    border-left: 1px var(--main-color) solid !important;
    transition: all ease 100ms;
}

.counts-bg {
    fill: var(--base-color);
}

.enslaver {
    fill: var(--main-color);
    text-anchor: middle;
    opacity: .3;
    font-size: .5em;
}

.enslaver-icon {
    fill: var(--main-color);
    font-size: .6em;
    dominant-baseline: middle;
    opacity: .8;
    text-anchor: middle;
}

.enslaver-name {
    text-anchor: middle;
}

.enslavers-bg {
    fill: var(--main-color);
    opacity: .2;
}

.enslaver-name,
.count,
.label,
.legend {
    font-size: var(--tiny-font-size);
    font-weight: var(--thick-weight);
    letter-spacing: var(--tiny-font-spacing);
    fill: var(--main-color);
    font-feature-settings: 'tnum'1;
}

.count,
.label {
    text-anchor: end;
    dominant-baseline: middle;
    opacity: 1 !important;
}

.gender-label {
    font-size: var(--small-font-size);
    letter-spacing: var(--small-font-spacing);
    fill: var(--main-color);
    font-weight: var(--thick-weight);
}

.gender-count {
    text-anchor: end;
}

.data-line {
    stroke: var(--main-color);
    opacity: .5;
}

.enslaver-name,
.legend {
    dominant-baseline: middle;
}

.name,
.desc {
    fill: var(--main-color);
    font-size: var(--small-font-size);
    letter-spacing: var(--small-font-spacing);
    font-weight: var(--thick-weight);
    dominant-baseline: middle;
    stroke: none;
}

.rope {
    stroke: var(--main-color);
}

.name {
    text-anchor: end;
}

.bar,
.seeker {
    fill: var(--main-color);
    stroke: var(--base-color);
}

.disabled {
    pointer-events: none;
    opacity: .4;
}

::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}

::-webkit-scrollbar-track {
    background: var(--base-color);
}

::-webkit-scrollbar-thumb {
    background: var(--main-color);
    border-radius: 10px;
}

::-webkit-scrollbar-corner {
    background: var(--base-color);
}

@media (min-width: 600px) {
    nav {
        width: 500px;
        left: 50vw;
        transform:translateX(-50%);
    }

    main {
        width: 500px;
    }

    #speeds > div {
        width: 5vw;
    }
}

@media (min-width: 1000px) and (orientation:landscape) {
    body {
        margin: 8px;
        justify-content: center;
    }
    main {
        height: calc(100vh - 16px);
        width: calc(100vw - 16px);
        flex-direction: row;
        justify-content: space-evenly;
    }
    
    main #about-container {
        width: 40vw;
        max-width: 550px;
        padding: 0;
        position: relative;
        gap: 45px;
        height: 98vh;
        justify-content: center;
    }

    main #simulation-container {
        width: 50vw;
    }

    nav {
        width: 40vw;
        max-width: 550px;
        transform:none;
        position: absolute;
        left: 0;
    }

    #data-source {
        width: 500px;
        letter-spacing: var(--small-font-spacing);
    }

    #speeds,
    #years {
        font-size: var(--small-font-size);
        font-weight: var(--thick-weight);
        letter-spacing: var(--small-font-spacing);
    }

    #speeds > div {
        width: 3vw;
    }
    
    .enslaver-name,
    .count,
    .label,
    .legend {
        font-size: var(--tiny-font-size);
        letter-spacing: var(--tiny-font-spacing);
    }
}