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

:root {
    --baseColor: black;
    --baseColor2: #3b3b3b;
    --mainColor: #e0e0e0;
    --mainColor2: #7c7c7c;
    --sColor: #215418;
    --sNotColor: #5f2525;
    --accentColor: #318426;
    --fontFamily: 'Public Sans', sans-serif;
    --fontSize: clamp(16px,3vw, 18px);
    --fontWeight: 180;
    --smallFontSize: clamp(10px, .6em, 14px);
    --smallFontWeight: 300;
    --margin: 15px;
    --flexGap: calc(var(--margin)/2);
    --buttonBorder: 1px;
    --buttonPadding: 5px 15px;
    --buttonBorderRadius: 20px;
    --graphHeight: clamp(80px,20vh,150px);
    --fullWidthSansMargin: calc(100vw - var(--margin)*2);
    --fullHeightSansMargin: calc(100vh - var(--margin)*2);
    --recordHeight: clamp(50px, 20vw, 200px);
    --barGap: clamp(2px, 3vw, 4px);
    --faintSmallElOpacity: .8;
    --faintBigElOpacity: .6;
    --ctaRadius: 250px;
    --ctaRadius2: 235px;
}

html {
    background: var(--baseColor);
}

* {
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}

body {
    color: var(--mainColor);
    font-family: var(--fontFamily);
    font-size: var(--fontSize);
    font-weight: var(--fontWeight);
    line-height: 1.35;
    margin: 0;
    padding: var(--margin);
    overflow-y: hidden;
}

#dBG,
#sBG,
#sNBG {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}

#dBG {
    background: linear-gradient(to bottom, var(--baseColor),var(--baseColor2));
    opacity: 1;
}

#sBG {
    background: linear-gradient(to bottom, var(--baseColor),var(--sColor));
}

#sNBG {
    background: linear-gradient(to bottom, var(--baseColor),var(--sNotColor));
}

p {
    margin: 0;
}

nav {
    position: fixed;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: var(--fullWidthSansMargin);
}

nav .button {
    cursor: pointer;
}

nav .list {
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fontSize);
    gap: var(--flexGap);
    position: absolute;
    bottom: 0;
    transform: translateY(calc(100% + var(--margin)));
}

nav .list > * {
    color: var(--mainColor);
    text-decoration: none;
    background: var(--baseColor);
    border: var(--buttonBorder) solid var(--mainColor2);
    padding: var(--buttonPadding);
    position: relative;
    border-radius: var(--buttonBorderRadius);
    cursor: pointer;
}

sup {
    font-size: var(--smallFontSize);
    font-weight: var(--smallFontWeight);
    font-feature-settings: 'tnum'1;
    margin: 0 2px;
}

ul {
    margin: 0;
    padding: 0;
    padding-left: var(--margin);
    position: relative;
}
li {
    margin-bottom: var(--margin);
    list-style-type: none;
}
li::before {
    content: '−';
    position: absolute;
    left: 0;
}

#bursts {
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    bottom: 0;
    transform: translateY(60%);
    /* mix-blend-mode:soft-light; */
    mix-blend-mode: overlay;
}

#cta {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 998;
    opacity: var(--faintBigElOpacity);
    mix-blend-mode: luminosity;
    transition: opacity 500ms ease;
}

#cta p {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#cta.big {
    top: 50vh !important;
    transform: translateY(-50%);
    width: var(--fullWidthSansMargin);
    height: 50vh;
}

#cta.big #speed {
    display: none;
}

@keyframes pulsate {
    0% { width: var(--ctaRadius); height: var(--ctaRadius);}
    50% { width: var(--ctaRadius2); height: var(--ctaRadius2);}
    100% { width: var(--ctaRadius); height: var(--ctaRadius);}
}
#cta.big p {
    border-radius: 100%;
    border: var(--buttonBorder) solid var(--mainColor2);
    animation: pulsate 2s infinite ease-in-out;
}

#cta.small {
    width: calc(var(--fullWidthSansMargin) + 3px);
    justify-content: space-between;
    right: var(--margin);
    font-size: var(--fontSize);
}

#cta.small #speed {
    display: block;
    display: flex;
}

#cta.small :is(p,.option) {
    border-radius: var(--buttonBorderRadius);
    border: var(--buttonBorder) solid var(--mainColor2);
    padding: var(--buttonPadding);
}
#cta.small .option {
    opacity: .4;
    transition: all 100ms ease;
    cursor: pointer;
    border: var(--buttonBorder) solid transparent;
}
#cta.small .option.selected {
    border: var(--buttonBorder) solid var(--mainColor2);
    opacity: 1;
    transition: all 100ms ease;
}

#menu,
#lelect-century {
    display: flex;
    align-items: center;
}

#menu .button {
    font-size: 1.8em;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: -5px;
}

#menu .button span {
    display: block;
}

#menu .list {
    width: 20vw;
    right: 0;
    justify-content: end;
}

@keyframes flash {
    0% {opacity: 1;}
    50% {opacity: .2;}
    100% {opacity: 1;}
}

.flash {
    animation: flash 1.5s ease infinite;
}

#select-century .button {
    padding-bottom: 3px;
    border-bottom: var(--buttonBorder) solid var(--mainColor2);
    font-size: var(--fontSize);
    text-transform: uppercase;
    letter-spacing: .05em;
}

#select-century .list {
    left: 0;
    max-width: 1000px;
}

#intro {
    position: fixed;
    top: calc(var(--margin)*5.5);
    font-size: var(--fontSize);
    overflow-wrap: break-word;
}

#intro > * {
    margin-top: 0;
    margin-bottom: calc(var(--margin)*2);
}

#notes {
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--baseColor);
}

#notes .content {
    padding: calc(var(--margin)*2) var(--margin);
    height: 100dvh;
    width: 100vw;
    max-width: 650px;
    overflow-y: scroll;
    scrollbar-width: none;
}
#notes .content::-webkit-scrollbar {
    width: 0;
    height: 0;
}

#notes .content h1 {
    margin: 0;
    font-size: var(--fontSize);
    font-weight: var(--fontWeight);
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: var(--buttonBorder) solid var(--mainColor2);
    padding-bottom: 3px;
    margin-bottom: var(--margin);
    margin-top: calc(var(--margin)*3);
}
#notes .content h1:first-child {
    margin-top: var(--margin);
}

#notes a {
    color: var(--mainColor);
    text-decoration: none;
}

#notes .content > * {
    margin-bottom: var(--margin);
}

#notes .button {
    position: absolute;
    right: var(--margin);
    top: var(--margin);
    font-size: 1.8em;
    transform: rotate(45deg);
    cursor: pointer;
}

#random-outcome {
    z-index: 997;
    color: var(--mainColor2);
    width: 60vw;
    font-size: var(--fontSize);
    mix-blend-mode: luminosity;
    position: fixed;
    margin-top: calc(var(--margin)*2);
}

#random-outcome :is(.war,.feature,.scale,.side,.outcome,.massacre,.survived) {
    color: var(--mainColor);
}

#random-outcome > * {
    margin-top: var(--margin);
}

#summary {
    font-size: var(--smallFontSize);
    position: fixed;
    bottom: calc(var(--margin)*2);
    mix-blend-mode: luminosity;
    letter-spacing: .1em;
}
#summary #data-summary {
    display: flex;
    align-items: flex-end;
    gap: var(--barGap);
    height: var(--graphHeight);
    width: var(--fullWidthSansMargin);
}
#summary #data-summary .bar {
    background: var(--mainColor);
    position: relative;
    width: 10vw;
    display: flex;
    justify-content: center;
    opacity: var(--faintSmallElOpacity);
    cursor: pointer;
}
#summary #data-summary .annotation {
    font-size: 1.2em;
    position: absolute;
    white-space:nowrap;
    top: 1px;
    right: 1px;
    transform: translateY(calc(-100%));
    border-bottom: 1px dotted var(--mainColor2);
    line-height: 1.3;
    padding-bottom: 3px;
    mix-blend-mode: lighten;
    pointer-events: none;
}
#summary #data-summary .bar .tick {
    position: absolute;
    bottom: 0;
    transform: translateY(calc(100% + 4px));
}

#summary #record {
    display: flex;
    flex-direction: column;
    justify-content: end;
    position: absolute;
    bottom: calc(var(--margin));
    height: var(--recordHeight);
    width: 1.5px;
    background: var(--mainColor2);
}
#summary #record .bar {
    position: relative;
    display: flex;
    justify-content: center;
    background: var(--mainColor);
    color: var(--mainColor);
    opacity: var(--faintSmallElOpacity);
}
#summary #record .bar .annotation {
    position: absolute;
    top: 0;
    right: 0;
    /* transform: translate(calc(100% + 6px),0%); */
}
#summary #record .legend {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-100%) rotate(-90deg);
    transform-origin: left;
    white-space: nowrap;
    opacity: var(--faintSmallElOpacity);
}
#summary #scales {
    gap: var(--flexGap);
    display: flex;
    flex-direction: column;
    position: fixed;
    left: var(--margin);
    bottom: calc(var(--margin)*5);
    opacity: var(--faintBigElOpacity);
    opacity: 0;
}
#summary #scales .scale {
    background: var(--mainColor2);
    border-radius: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: end;
    opacity: .2;
    left: 1px;
}
#summary #scales .legend {
    position: absolute;
    top: 0;
    transform: translateY(calc(-100% - var(--flexGap)));
    white-space: nowrap;
}
#summary #scales .scale .scale-pct {
    position: absolute;
    right: 0;
    transform: translateX(calc(100% + 6px));
    white-space: nowrap;
}

.fn {
    color: var(--mainColor2);
}

.fn-pct {
    color: var(--mainColor2);
    position: fixed;
    right: var(--margin);
}

.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}

.legend-line {
    stroke: var(--mainColor);
    stroke-dasharray: 1px 2px;
    opacity: var(--faintBigElOpacity);
}

.open {
    opacity: 1 !important;
    pointer-events: all !important;
}

@media (min-width: 700px) {
    #cta.small {
        justify-content: start;
    }
    #notes .content {
        padding: calc(var(--margin)*3);
        padding-bottom: calc(var(--margin)*2);
    }
    #notes .content h1 {
        margin-top: calc(var(--margin)*4);
    }
    #notes .content h1:first-child {
        margin-top: var(--margin);
    }
    #notes .content > * {
        margin-bottom: calc(var(--margin)*2);
    }
    #notes .content > *:last-child {
        margin-bottom: var(--margin);
    }
    #notes .button {
        right: calc(var(--margin)*2.5);
    }
    #summary {
        width: var(--fullWidthSansMargin);
    }
    #summary #data-summary {
        position: absolute;
        bottom: 0;
        right: 0;
        width: calc(var(--fullWidthSansMargin)*.4);
    }
    #summary #record {
        bottom: 0;
        transform: rotate(90deg);
        transform-origin: bottom;
    }
    #summary #record .bar .annotation {
        right: 6px;
        /* transform: rotate(-90deg) translate(0%,-100%); */
        transform-origin: right top;
    }
    #summary #scales {
        opacity: 1;
        transition: opacity 100ms ease;
    }
}