/* Poirot styles. */

:root {
    color-scheme: dark light;
    --body-bg-color: #292929;
    --body-fg-color: #9e9e9e;
    --h1-fg-color: #fff;
    --but-bg-color: #343434;
    --but-fg-color: #eeeeec;
    --but-border-color: #1b1b1b;
    --but-hover-bg-color: #1e1e1e;
    --text-bg-color: #1e1e1e;
    --text-fg-color: #c0bfbc;
}

@media (prefers-color-scheme: light) {
    :root {
    }
}

/*
@font-face {
    font-family: 'Topaz Regular';
    src: url('topaz_unicode_ks13_regular.ttf') format('truetype');
}

@font-face {
    font-family: 'AtariST';
    src: url('AtariST8x16SystemFont.ttf') format('truetype');
}
*/

html, body {
    margin: 0;
    padding: 0;
    padding-top: 10px;
    /*font-family: sans-serif;*/
    font-family: sans-serif 'Topaz Regular';
}

body {
    background-color: var(--body-bg-color);
    color: var(--body-fg-color);
    text-align: center;
}

h1 {
    margin: 0 auto;
    font-family: sans-serif 'AtariST';
    color: var(--h1-fg-color);
}

main {
    margin: 0 auto;
}

.container {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}

div.file-outer {
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    padding: .5em;
    border: 1px solid var(--but-border-color);
    border-radius: 10px;
    width: 20rem;
    height: 1rem;
    background: var(--but-bg-color);
    color: var(--but-fg-color);
}

div.file-outer:hover {
    background-color: var(--but-hover-bg-color);
}

div.file-outer input {
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;
    opacity: 0;
}

/*
input::file-selector-button {
    border: 1px solid black;
    background: #333;
    color: #eee;
    cursor: pointer;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;
    opacity: 0;
}

input::file-selector-button:hover {
    color: #fff;
}
*/

div.textarea {
    margin: 0 auto;
    padding: 0.5em;
    min-width: 90vw;
    max-height: 24rem;
    min-height: 24rem;
    /*font-family: monospace;
    font-family: "Topaz Regular";*/
    /*font-family: inherit !important;
    text-size-adjust: none;*/
    /*font-family: 'AtariST';*/
    border: 1px solid black;
    background-color: var(--text-bg-color);
    color: var(--text-fg-color);
    resize: none;
    text-align: left;
    overflow: scroll;
    overflow-x: hidden;
    /* white-space: wrap; */
    scrollbar-color: black gray;
    /*scrollbar-width: thin;*/  /* auto thin none */
    display: flex;
    align-self: stretch;
}

div {
    font-family: inherit !important;
}

textarea#stdout {
    margin: 0 auto;
    border: 1px solid var(--but-border-color);
    background-color: var(--text-bg-color);
    color: var(--text-fg-color);
    resize: none;
}

nav#help {
    position: fixed;
    top: 1rem;
    left: 1rem;
}

nav#help a {
    padding: 4px 6px;
    text-decoration: none;
    background-color: #000;
    color: #ddd;
}

nav#help a:hover {
    background-color: #999;
    color: #000;
}

article#format-list {
    display: none;
    z-index: 666;
    position: fixed;
    top: 0rem;
    left: 0rem;
    right: 0rem;
    bottom: 0rem;
    padding: 1rem;
    border: 5px solid #000;
    background-color: var(--but-bg-color);
    font-size: smaller;
    text-align: left;
    overflow: scroll;
    text-overflow: ellipsis;
    text-wrap: nowrap;
}

/* vim: set sts=4 et sw=4: */