:root {
    --drop-0: #89a882;
    --drop-1: #b1cfa1;
    --drop-2: #d3e8ce;
    --drop-3: #fafff9;
    --text-0: #141f11;
    --text-1: #23341e;
    --text-2: #3d5436;
    --text-3: #58744f;

    --highlight-0: #fc5f04;
    --highlight-1: #18b88b;
    --highlight-2: #74ce1f;
    --highlight-3: #ff9100;
    --highlight-4: #ff86dd;
    --highlight-5: #a885ff;
    --highlight-6: #71b4ff;
    --highlight-7: #ff4f48;

    @media (prefers-color-scheme: dark) {
        --drop-0: #040a03;
        --drop-1: #0b1309;
        --drop-2: #11180d;
        --drop-3: #141f11;
        --text-0: #89a882;
        --text-1: #64865c;
        --text-2: #476540;
        --text-3: #365030;

        --highlight-0: #f3e164;
        --highlight-1: #79c5ae;
        --highlight-2: #a1df67;
        --highlight-3: #daa046;
        --highlight-4: #c579b0;
        --highlight-5: #8f79c5;
        --highlight-6: #799dc5;
        --highlight-7: #c95550;
    }

    --font-title: 'Onest', system-ui, Helvetica, sans-serif;
    --font-general: 'Kode Mono', 'Robot Mono', 'Courier New', monospace;
}

@property --bottomright-color {
    syntax: '<color>';
    initial-value: black;
    inherits: false;
}
@property --topleft-color {
    syntax: '<color>';
    initial-value: black;
    inherits: false;
}

/* #11180d */

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;

    background: var(--drop-0);
    color: var(--text-0);

    font-family: var(--font-general);
    overflow: hidden;
}

h1, h2 {
    margin-top: 0;
    font-family: var(--font-title);
}

h1 { font-size: 4em; }
h2 { font-size: 2em; margin-bottom: 0;}

#app {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

#app:not(.entered) {
    cursor: pointer;
}

#content {
    /* align-items: start !important; */
    justify-content: start !important;
}

#content > header {
    /* position: absolute;
    top: 0; */
    width: 100%;
    height: 5em;
    box-sizing: border-box;
    padding: 1em 2em;


    background-image: linear-gradient(-45deg, var(--drop-0), var(--drop-1));
    color: var(--text-0);

    text-align: left;
}

#content-body {
    margin-top: -70px;
    transform: scale(1);
}

#content-body > * {
    /* transition: background 1s ease-in-out; */
    --bottomright-color: var(--drop-0);
    --topleft-color: var(--drop-1);
    color: rgba(0,0,0,0);
    transition: --topleft-color 1s, --bottomright-color 1s, color 1s;
    background: linear-gradient(-45deg, var(--bottomright-color), var(--topleft-color));
}

#content.uploaded > #content-body > :not(header) {
    --bottomright-color: var(--drop-1);
    --topleft-color: var(--drop-2);
    color: inherit;
}
#content:not(.uploaded) > #content-body > #annotations > h3 {
    opacity: 0 !important;
}



#content-body > canvas {
    font-weight: 600;
    width: 800px;
    height: 300px;
    margin-top: 1.5em;
}

#content-body > #title {
    width: 800px;
    margin-top: 1.5em;

    padding: 1em 2em;
    box-sizing: border-box;
}

#content-body > #annotations {
    width: 800px;
    margin-top: 1.5em;

    height: 10.5em;
    padding: 0.75em 0.75em;
    box-sizing: border-box;
    display: flex;

    gap: 1em;
    flex-direction: row;
    flex-wrap:nowrap;
    overflow-y: hidden;
    overflow-x: scroll;
}

#annotations > div {
    box-sizing: border-box;
    padding: 0.2em 0.5em;
    width: 30%;
    flex: 1 1 auto;
    min-width: 30%;
    background: none;
    border: 0.2em solid var(--text-2);


    font-family: var(--font-general);
    color: var(--text-3);

    text-align: left;
}

#annotations > div input, #annotations > div textarea {
    font-family: var(--font-general);
    color: var(--text-3);
    box-sizing: border-box;
    padding-left: 0.5em;
    display: inline;
    background: none;
    outline: none;
    border: none;
    border-bottom: 2px solid var(--text-3);
    border-left: 2px solid var(--text-3);
    width: 100%;
    transition: border 0.4s ease-in-out, color 0.4s ease-in-out;
}

#annotations > div input:focus,
#annotations > div textarea:focus {
    border-bottom: 2px solid var(--my-color);
    border-left: 2px solid var(--my-color);
    color: var(--my-color);
}

#annotations > div input {
    font-size: 0.8em;   
    width: calc(100% - 30%);
}
#annotations > div textarea {
    resize: none;
}

#annotations > div > .title {
    margin-top: 0.2em;
    margin-bottom: 0.5em;
}

#annotations > div > .title > div {
    display: block;
    width: 1.4em;
    height: 1.4em;
    background-color: var(--my-color);
    float: right;
    cursor: pointer;
}

#annotations > div {
    --my-color: var(--text-3);
    /* --my-color: red; */
}
#annotations > div.hidden {
    display: none;
}

#annotations > div[data-color="0"] { --my-color: var(--highlight-0); }
#annotations > div[data-color="1"] { --my-color: var(--highlight-1); }
#annotations > div[data-color="2"] { --my-color: var(--highlight-2); }
#annotations > div[data-color="3"] { --my-color: var(--highlight-3); }
#annotations > div[data-color="4"] { --my-color: var(--highlight-4); }
#annotations > div[data-color="5"] { --my-color: var(--highlight-5); }
#annotations > div[data-color="6"] { --my-color: var(--highlight-6); }
#annotations > div[data-color="7"] { --my-color: var(--highlight-7); }

#annotations > h3 {
    display: none;
    transition: opacity 1s ease-in-out;
    opacity: 1;
}

#annotations > h3:first-child:nth-last-child(1) {
    font-family: var(--font-general);
    color: var(--text-3);
    display: block;
    font-size: 1.5em;
    text-align: center;
    width: 100%;
    height: 100%;
    margin-top: 1.25em;
    user-select: none;
}

#app > div {
    position: absolute;
    top: 0px;
    left: 0px;

    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
}

@keyframes disappear {
    0% {
        opacity: 1;
        transform: none;
        display: flex;
    }
    100% {
        opacity: 0;
        transform: scale(95%);
        display: none;
    }
}

@keyframes appear {
    0% {
        opacity: 0;
        transform: scale(200%);
    }
    100% {
        opacity: 1;
        transform: scale(100%);
    }
}

#app.entered > #entrance, #app:not(.entered) > #content {
    display: none;
    animation: disappear 0.8s ease-in-out;
}
#app:not(.entered) > #entrance, #app.entered > #content {
    display: flex;
    animation: appear 1.2s ease-in-out;
}