@charset "UTF-8";

body {
    --hue: 270;
    --l-lim: 1.00;
    --s-lim: 1.00;
}

#oper_import {
    --bg-path: var(--icon-upload);
}

#oper_save {
    --bg-path: var(--icon-download);
}

#oper_export {
    --bg-path: var(--icon-export);
}

div.line_container {
    background-color: transparent;
    display: flex;
    padding: 0;
    box-shadow: none;
}

#root_div #root_page {
    display: block;
    flex-direction: column;
    align-items: center;
    padding: 0;
    margin: 12pt;
    position: relative;
    box-shadow: none;
}

#root_div #root_page #md_content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 24pt 12pt;
    border: #33006666 1pt solid;
}

#root_div #root_page #word_count {
    position: absolute;
    display: flex;
    left: 0;
    bottom: 0;
    padding: 4pt;
    margin: 2pt;
    border-radius: 5pt;
    background-color: var(--art-bgcolor, #000000cc);
}

@media screen and (max-width: 800px) {
    div.line_container {
        flex-direction: column;
    }

    #root_div #art_main,
    #root_div #root_page {
        height: 45vh;
    }
}

@media screen and (min-width: 800px) {
    div.line_container {
        flex-direction: row;
    }

    #root_div #art_main,
    #root_div #root_page {
        width: 50%;
        height: 80vh;
    }
}

#root_div article.small {
    --font-size: 10pt;
}

#root_div article.medium {
    --font-size: 12pt;
}

#root_div article.large {
    --font-size: 14pt;
}

#root_div article * {
    font-size: var(--font-size);
    text-align: left;
    word-wrap: break-word;
}

#root_div article ruby,
#root_div article rt {
    text-align: start;
}

#root_div article p,
h1,
h2,
h3 {
    padding: 0 0 0 var(--font-size);
}

#root_div article ruby rt {
    font-size: calc(var(--font-size) * 0.5);
}

#root_div article img {
    max-width: 80%;
    max-height: 50vh;
}

#root_div article p {
    text-align: left;
    line-height: 1.8em;
}

#root_div article#art_main h1 {
    font-size: calc(var(--font-size) * 2);
}

#root_div article h1 {
    font-size: calc(var(--font-size) * 1.5);
    text-align: left;
    text-indent: 0;
    padding-bottom: 0.36em;
    border-bottom: #666666 2pt double;
}

#root_div #root_page #title_content {
    width: 100%;
    box-sizing: border-box;
}

#root_div article#art_main h2 {
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: calc(var(--font-size) * 1.5);
}

#root_div article h2 {
    font-size: calc(var(--font-size) * 1.2);
    text-indent: 0;
}

#root_div article#art_main h3 {
    margin-top: 1.5em;
    margin-bottom: 1em;
    font-size: calc(var(--font-size) * 1.2);
}

#root_div article h3 {
    font-size: var(--font-size);
    text-indent: 0;
}