@font-face {
    font-family: "Fira Code";
    src: url("../fonts/fira-code/FiraCode-Regular.ttf");
}

@font-face {
    font-family: "Fira Code";
    src: url("../fonts/fira-code/FiraCode-SemiBold.ttf");
    font-weight: 600;
}

:root,
body {
    font-family: 'Fira Code', monospace;
    color: rgb(206, 206, 206);
    background: black;
}

tt, code, pre, code, .alignCenter.art-text {
    background: none;
}

a,
a[href].selfRef,
a[href] {
    color: inherit;
    text-decoration: underline;
}

a[href]:hover {
    background: none;
    text-decoration: underline;
}

a.pilcrow {
    text-decoration: none;
}

tr:nth-child(2n+1) > td {
    background-color: color-mix(in srgb, currentColor, transparent 85%);
}

th {
    background: none;
}

div#external-metadata {
    background: none;
}

h1, h2, h3, h4, h5, h6,
:is(h1, h2, h3, h4, h5, h6) a[href].selfRef {
    color: white;
    text-decoration: none;
}

@keyframes activated {
    0% { opacity: 0; }

    24% { opacity: 0; }
    25% { opacity: 1; }

    49% { opacity: 1; }
    50% { opacity: 0; }
    
    99% { opacity: 0; }
    100% { opacity: 1; }
}

body:not(.homepage){
    max-width: 90%;
    margin: 1.5em auto;
    font-size: 14px;
    line-height: 1.6;
    scroll-behavior: smooth;
}

@media screen and (min-width: 1024px) {
  body:not(.homepage) {
    max-width: 724px;
    margin: 42px auto;
    padding-left: 0;
    padding-right: 0;
  }
}

.homepage {
    height: 100vh;
    margin: 0;
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-template-rows: min-content 1fr;
    font-size: 0.8rem;
    column-gap: 1em;

    header {
        grid-column: 1;
        grid-row: 1;
        margin: 1em;
        margin-bottom: 0;

        h1 {
            margin: 0;
        }
    }

    nav {
        grid-column: 1;
        grid-row: 2;
        min-width: 300px;
        margin: 1em;
        overflow: auto;
        color: white;

        #display:empty ~ & {
            grid-column: 1 / 3;
        }

        a, a:hover {
            text-decoration: none;
            display: block;
        }

        ul {
            padding: 0;
            padding-left: 0;
            list-style-type: none;

            li {
                margin-top: 1em;
                margin-bottom: 1em;
                position: relative;

                small {
                    display: block;
                    font-size: 1em;
                    opacity: 0.6;
                }
            }

            li.active,
            li:hover {
                padding-left: 2ex;
            }

            li.active::before,
            li:hover::before {
                content: ">";
                position: absolute;
                top: 0;
                left: 0;
            }

            li.active::before {
                animation: 0.5s linear activated;
                font-weight: bold;
            }
        }
    }

    #display {
        grid-column: 2;
        grid-row: 1 / 3;
    }
}


@media screen and (max-width: 849px) {
    .homepage #display {
        display: none;
    }
    
    .homepage nav {
        grid-column: 1 / 3;
    }
}

#display {
    overflow: hidden;

    & > * {
        width: 100%;
        height: 100%;
        border: none;
    }
}