:root {
    --brand-color: #9309DA;
    --secondary-color: #50DA09;
    --interest-color: #09B8DA;
    --critical-color: #DA2A09;
    --brand-color-lt: #e3bff5;
    --secondary-color-lt: #7de348;
    --interest-color-lt: #7cd9eb;
    --critical-color-lt: #f4bfb6;
    --colorless-lt: #cbcbcb;
    --brand-color-dk: #40045f;
    --secondary-color-dk: #112d02;
    --interest-color-dk: #022b33;
    --critical-color-dk: #4f0f03;
    --colorless-dk: #272727;
    --text-entry: #f0f0f0;
    --body-margin: 8px;
}

body {
    margin: var(--body-margin);
}

body-content {
    display: grid;
    width: 100%;
    max-width: 800px;
    max-height: calc(100vh - 2 * var(--body-margin));
    margin: 0 auto;
    border: 1px solid var(--colorless-dk);

    &#main {
        grid-template-columns: 1fr 3fr;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "header header"
            "nav article";
    }
    &#login {
        grid-template-areas:
            "header"
            "login";
        display: none;
    }
}

header, nav, article, login-area {
    border: 1px solid var(--colorless-dk);
    padding: 4px;
}

header {
    grid-area: header;
    background-color: var(--brand-color);
    display: grid; /* Make this a single-cell grid so we can use justify-self on the button */
    align-items: center;
    & header-text {
        grid-column: 1;
        grid-row: 1;
    }
    & button {
        grid-column: 1;
        grid-row: 1;
        justify-self: end;
    }
}

header-text {
    color: #ffffff;
    text-align: center;
    font-family: Trebuchet MS, Verdana, Helvetica, sans-serif;
    font-size: 28pt;
    font-weight: bold;
    text-shadow: 2px 2px 5px #000000;
}

nav {
    grid-area: nav;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: var(--secondary-color-lt);
    min-height: 0;
    padding: 0;
}

button {
    background-color: var(--brand-color-lt);
    border-radius: 4px;
    font-size: 8pt;
}

nav-header, note-header {
    flex: none;
    display: flex;
    justify-content: space-between;
    gap: 5px;
    align-items: center;
    padding: 2px;
}

input.search {
    background-color: inherit;
    border: 1px solid var(--secondary-color-dk);
    flex: 1;
    &:focus {
        background-color: var(--text-entry);
    }
}

input.title {
    background-color: inherit;
    flex: 1;
    border: 0;
    font-weight: bold;
}

note-list {
    flex: 1;
    overflow-y: auto;
    border-top: 1px solid var(--secondary-color-dk)
}

note-slug {
    display: block;
    margin: 1px 2px;
    border: 1px solid var(--secondary-color-dk);
    padding: 2px;
}

note-slug.active {
    background-color: var(--brand-color-lt);
}

note-list-sentinel {
    display: block;
    text-align: center;
    font-size: 9pt;
    color: var(--colorless-dk);
    padding: 4px;
}

article {
    grid-area: article;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    background-color: var(--interest-color-lt);
    padding: 0 4px 4px 4px;
}

textarea.note-body {
    flex: 1;
    border: 1px solid var(--secondary-color-dk);
    background-color: var(--text-entry);
}
body-content {
    display: grid;
    grid-template-areas:
        "header "
}
login-area {
    grid-area: login;
    display: flex;
    justify-content: center;
    background-color: var(--interest-color-lt);
}
login-form {
    justify-self: center;
    display: grid;
    grid-template-areas:
        "label_1 entry_1"
        "label_2 entry_2"
        "button_1 button_2";
    gap: 5px;
    padding: 5px;

    & button {
        justify-self: center;
    }
}