@use 'palettes/typewriters' as typo
@use 'palettes/stylebook' as book
@use 'palettes/brushes' as hues

@font-face
    @include book.init-font(typo.$sys-message-font)

@font-face
    @include book.init-font(typo.$journalistic-font)

@font-face
    @include book.init-font(typo.$alt-journalistic-font)

@font-face
    @include book.init-font(typo.$titular-font)

@font-face
    @include book.init-font(typo.$cryptic-font)

// @TODO find an appropriate background image for html
// html
//    background-image: url('https://visualizingcultures.mit.edu/tokyo_1960/image/anp7117_Hamaya_RG17_Jun2816.gif')
//    background-size: 100%

body
    color: hues.$fg-helper-base-color

article 
    & span
        &::selection, &::-moz-selection
            background-color: hues.$bg-base-slider
            color: #fff

        & h1, & h2, & h3, & h4, & h5, & h6
            text-align: center

@media (orientation: landscape)
    body#default_body
        max-width: 66vw
        margin: 4vh auto 4vh auto

@media (orientation: portrait)
    body#default_body
        max-width: 90%
        padding: book.$topbottom-framing-pad 0
        margin: 2vh auto 2vh auto

#logo_shape
    fill: #ffffff
    stroke-width: 7px

#logo_shape.icon_shape
    stroke: hues.$fg-helper-lowlight-color

.title
    font-family: typo.$titular-font

.cryptic
    font-family: typo.$cryptic-font


// @NOTE: below is temporary
footer
    display: none

@media print
    #site_nav
        display: none

@media screen
    html
        background-color: hues.$bg-helper-highlight-color

    body#default_body
        display: block
        background-color: hues.$bg-helper-base-color
        box-shadow: book.$shared-shadow-depth hues.$bg-helper-lowlight-color
        border-radius: 1%

    html:has(#err_body)
        background: hues.$bg-helper-highlight-color url("images/dotted.png") repeat center center
        background-size: 133px
        // border-radius: 0
        // box-shadow: book.$shared-shadow-depth hues.$bg-helper-lowlight-color inset

    @media (orientation: landscape)
        body#default_body
            transform: rotate(0.5deg)

    @media (orientation: portrait)
        body#default_body
            transform: rotate(0deg)

    a
        text-decoration: overline hues.$border-helper-base-color solid 2pt

        &#home
            text-decoration: none
            color: hues.$fg-helper-base-color

    .icon_shape
        stroke: hues.$fg-helper-lowlight-color

    #logo_shape
        fill: hues.$bg-helper-base-color

    #content
        font-family: typo.$journalistic-font

    #portrait_shape
        fill: hues.$fg-helper-base-color
    
    // .portrait
    //     border-radius: 100%

    #extra
        position: absolute
        right: 0
        bottom: 0