@charset "UTF-8";

@font-face {
    font-family: 'Alegreya';
    src: url("/static/Haikus/fonts/Alegreya-Regular.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
}

@font-face {
    font-family: 'Alegreya';
    src: url("/static/Haikus/fonts/Alegreya-Italic.otf") format("opentype");
    font-weight: normal;
    font-style: italic;
    font-variant: normal;
}

@font-face {
    font-family: 'Alegreya';
    src: url("/static/Haikus/fonts/Alegreya-Bold.otf") format("opentype");
    font-weight: bold;
    font-style: normal;
    font-variant: normal;
}

@font-face {
    font-family: 'Alegreya';
    src: url("/static/Haikus/fonts/Alegreya-BoldItalic.otf") format("opentype");
    font-weight: bold;
    font-style: italic;
    font-variant: normal;
}

@font-face {
    font-family: 'Alegreya';
    src: url("/static/Haikus/fonts/Alegreya-Black.otf") format("opentype");
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
}

@font-face {
    font-family: 'Alegreya';
    src: url("/static/Haikus/fonts/Alegreya-BlackItalic.otf") format("opentype");
    font-weight: 900;
    font-style: italic;
    font-variant: normal;
}

@font-face {
    font-family: 'Alegreya Small Caps';
    src: url("/static/Haikus/fonts/AlegreyaSC-Regular.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
}

@font-face {
    font-family: 'Alegreya Small Caps';
    src: url("/static/Haikus/fonts/AlegreyaSC-Italic.otf") format("opentype");
    font-weight: normal;
    font-style: italic;
    font-variant: normal;
}

@font-face {
    font-family: 'Alegreya Small Caps';
    src: url("/static/Haikus/fonts/AlegreyaSC-Bold.otf") format("opentype");
    font-weight: bold;
    font-style: normal;
    font-variant: normal;
}

@font-face {
    font-family: 'Alegreya Small Caps';
    src: url("/static/Haikus/fonts/AlegreyaSC-BoldItalic.otf") format("opentype");
    font-weight: bold;
    font-style: italic;
    font-variant: normal;
}

@font-face {
    font-family: 'Alegreya Small Caps';
    src: url("/static/Haikus/fonts/AlegreyaSC-Black.otf") format("opentype");
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
}

@font-face {
    font-family: 'Alegreya Small Caps';
    src: url("/static/Haikus/fonts/AlegreyaSC-BlackItalic.otf") format("opentype");
    font-weight: 900;
    font-style: italic;
    font-variant: normal;
}

:root {
    --font-weight-thin: 100;
    --font-weight-light: 300;
    --font-weight-medium: 900;
    --font-weight-extra-bold: 800;
    --font-weight-black: 900;

    --dark-background-color: #c8cdd2;
    --background-color: #e4e7e9;

    --text-color: #0a141b;
    --highlight-color: #721a45;
    --lowlight-color: #5b646b;
    --hairline-color: var(--highlight-color);
    --link-color: #22688b;
    --visited-link-color: var(--link-color);

    --heading-size: medium;

    --root-font-family: Alegreya;
    --small-caps-font-family: Alegreya Small Caps;

    --root-font-size: 18px;

    --large-breakpoint: 700px;

    --header-title-size: 24px;
    --header-subtitle-size: large;

    --sidebar-margin: 1em;
}

html {
    background: var(--dark-background-color);
    font-family: var(--root-font-family);
    font-size: var(--root-font-size);
    height: 100%;
}

body {
    margin: 0;
    min-height: 100%;
    display: grid;
    grid-template-rows: min-content 1fr min-content;
}

header.title {
    grid-row: 1;
}

div.page {
    grid-row: 2;
    background-color: var(--background-color);
}

footer.footer {
    grid-row: 3;
}

div.content {
    background-color: var(--background-color);
    color: var(--text-color);
}

main {
    padding-bottom: 1em;
    padding-top: 1em;
}

main.fit {
    margin-left: auto;
    margin-right: auto;
    display: table;
}

main.wide {
    margin-left: 1em;
    margin-right: 1em;
}

@media (min-width: 700px) {
    div.page {
        display: grid;
        grid-template-columns: auto 250px;
        height: 100%;
    }

    div.content {
        grid-column: 1;
        grid-row: 1;
    }
}


a {
    text-decoration: none;
}

a:link {
    color: var(--link-color);
}

a:visited {
    color: var(--visited-link-color);
}

p.haiku.edit.submit {
    margin-right: 1em;
    text-align: right;
}

form.haiku {
    margin-left: 1em;
    margin-right: 1em;
}

header.title {

    a:visited,
    a:link {
        color: var(--highlight-color);
    }

    @media (min-width: 700px) {
        text-align: center;
    }

    @media (max-width: 699px) {
        text-align: left;

        div.title-line {
            display: flex;
            flex-direction: row;
        }

        div.title {
            flex: auto;
        }

        div.hamburger {
            font-size: var(--header-title-size);


            span {
                margin-left: .5em;
                cursor: pointer;
            }

            span.open,
            span.close {
                display: inline-block;
                transition: opacity .5s ease-out;
            }

            span.open {
                width: 0;
            }

            span.close {
                margin-left: 0;
                margin-top: .07em;
                opacity: 0;
            }

            span.open:before {
                content: "☰";
            }

            span.close:before {
                content: "✕";
            }

            span.write img {
                width: calc(var(--header-title-size) - 4px);
                height: calc(var(--header-title-size) - 4px);
            }
        }
    }

    border-bottom-style: double;
    border-bottom-width: 3px;
    border-color: var(--hairline-color);
    padding: 1em;
    background-color: var(--dark-background-color);
    color: var(--highlight-color);

    .title {
        font-size: var(--header-title-size);
    }

    .subtitle {
        margin-top: 2px;
        font-size: var(--header-subtitle-size);
    }
}

@media (max-width: 699px) {
    #hamburger-button:checked~header span.open {
        opacity: 0;
    }

    #hamburger-button:checked~header span.close {
        opacity: 1;
    }
}


footer.footer {
    font-size: small;
    text-align: center;
    padding: .75em;
    margin-bottom: env(safe-area-inset-bottom);
    background-color: var(--dark-background-color);
    color: var(--highlight-color);
    border-top-style: solid;
    border-top-width: 1px;
    border-color: var(--hairline-color);

    .links {
        .item {
            margin-left: .5em;
            margin-right: .5em;
        }
    }

    .copyright {
        margin-top: .5em;
    }
}

div.sidebar {
    background-color: var(--dark-background-color);
    color: var(--highlight-color);
    white-space: nowrap;

    :first-child {
        margin-top: var(--sidebar-margin);
    }

    :last-child {
        margin-bottom: var(--sidebar-margin);
    }

    div {
        margin-left: var(--sidebar-margin);
        margin-right: 1em;

        @supports (margin-right: max(0px, 1px)) {
            margin-right: max(var(--sidebar-margin), env(safe-area-inset-right));
        }
    }

    div.title {
        font-family: Alegreya Small Caps;
        font-size: var(--heading-size);
        white-space: normal;
    }

    .item {
        margin-top: .5em;
        margin-bottom: .5em;
    }

    .indent1 {
        margin-left: 2em;
    }

    .selected {
        font-style: italic;
    }

    .count {
        font-size: smaller;
        font-style: normal;
    }
}

@media (min-width: 700px) {
    div.sidebar {
        grid-column: 2;
        grid-row: 1;
    }

    div.hamburger {
        display: none;
    }
}

@media (max-width: 699px) {
    div.sidebar {
        overflow: hidden;
        max-height: 0;
        transition: max-height .5s ease-out;
    }

    #hamburger-button:checked~div.page div.sidebar {
        max-height: 2000px;
    }
}

input.expand {
    display: none;
}


main.haiku-list {
    .page_navigation {
        text-align: center;
    }

    p {
        margin: 0;
    }

    .date {
        font-size: var(--heading-size);
        font-family: Alegreya Small Caps;
        color: var(--lowlight-color);
        white-space: nowrap;

        margin-bottom: 1em;

    }

    .date:not(:first-child) {
        margin-top: 2em;
    }

    .haiku {
        .poem-image {
            display: flex;
            flex-direction: row;
        }

        .poem {
            flex: auto;
            white-space: nowrap;
        }

        .author {
            font-size: small;
            /* margin-left: 10em; */
            text-align: right;
            white-space: nowrap;
            color: var(--lowlight-color);
            margin-bottom: .75em;
            margin-top: .5em;
        }
    }

    .image.inline {
        margin-left: .5em;
        vertical-align: top;
        height: 72px;

        img {
            max-height: 100%;
            max-width: 300px;
        }
    }

    .image.big {
        text-align: center;
        margin-top: 1em;
        margin-bottom: .5em;

        img {
            width: 300px;
        }
    }
}

@media (min-width: 700px) {
    textarea.poem {
        width: 30em;
        height: 4em;
    }
}

@media (max-width: 699px) {
    textarea.poem {
        width: 20em;
        height: 4em;
    }
}

div.image.big {
    text-align: center;
    margin-top: 1em;
    margin-bottom: .5em;

    img {
        width: 300px;
    }
}