@charset "UTF-8";

.light,
.light * {
    --button-selected-bgcolor: #cc99ff99;
    --filter-button-bgcolor: #33006666;
}

.dark,
.dark * {
    --button-selected-bgcolor: #66339999;
    --filter-button-bgcolor: #ffffff66;
}

#warp_contents {
    --bg-path: var(--icon-content);
}

#warp_brief {
    --bg-path: var(--icon-brief);
}

#warp_main {
    --bg-path: var(--icon-article);
}

button {
    background-color: #eeeeee;
    border: none;
    border-radius: 5pt;
    box-shadow: 0 1pt 3pt #66666666;
    box-sizing: border-box;
    font-size: 1em;
    height: 3em;
}

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

#root_div #root_page {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

#root_div #root_page #filter_box {
    background-color: transparent;
    border: var(--filter-button-bgcolor) 1pt solid;
    border-radius: 5pt;
    min-height: 2em;
    height: 2em;
    line-height: 1.5em;
    width: 100%;
    box-sizing: border-box;
    padding: 6pt;
    margin: 0;
    font-size: 1em;
}

#root_div #root_page #root_arts {
    background-color: transparent;
    margin: 6pt 0;
    box-sizing: border-box;
    width: 100%;
    padding: 0;
}

#root_div #root_page #root_arts button {
    width: 100%;
    box-sizing: border-box;
    background-color: transparent;
    border: var(--filter-button-bgcolor) 1pt solid;
    margin: 3pt 0;
}

#root_div #root_page #root_arts button.selected {
    background-color: var(--button-selected-bgcolor);
}

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

}

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

    #root_div #art_brief {
        width: 40%;
    }

    #root_div #root_page {
        width: 60%;
    }
}

#root_div article {
    height: 50vh;
}

#root_div article#art_main {
    height: 90vh;
}

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

#root_div article h1 {
    text-align: start;
    text-indent: 0;
    padding-bottom: 0.36em;
    border-bottom: var(--art-h1-bdcolor) 2pt double;
}

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

#root_div article#art_main h2 {
    font-size: calc(var(--font-size, 12pt) * 1.5);
}

#root_div article h2 {
    text-indent: 0;
}

#root_div article#art_main h3 {
    font-size: calc(var(--font-size, 12pt) * 1.2);
}

#root_div article h3 {
    text-indent: 0;
}