:root{
    --main_bg_color:#e3f0ff;
    --main_tx_color:#5c5c5c;
    --page_top_bg_normal: #4aa0da;
    --page_top_bg_hover: #bce9ec;
    --float_bg_color:#77dfe9;
    --float_tx_color:#054d53;
    --border_color:#3464eb;
    --button_border_normal:#3464eb;
    --button_border_hover:#6889e3;
    --button_border_active:#0239c9;
    --before_link:#193acf;
    --after_link:#6276d1;
}

@media (prefers-color-scheme: dark) {
    :root{
        --main_bg_color:#222222;
        --main_tx_color:#cfcfcf;
        --page_top_bg_normal: #205c85;
        --page_top_bg_hover: #8dabad;
        --float_bg_color:#1c3f47;
        --float_tx_color:#40bac5;
        --border_color:#7488c0;
        --button_border_normal:#3464eb;
        --button_border_hover:#6889e3;
        --button_border_active:#0239c9;
        --before_link:#cf9f19;
        --after_link:#d1b362;
    }
}

*:visited{
    color:var(--after_link);
    text-decoration: none;
}

*:link{
    color:var(--before_link);
    text-decoration: none;
}

*:link:hover{
    text-decoration: underline;
}

*:visited:hover{
    text-decoration: underline;
}

body{
    color: var(--main_tx_color);
    background-color: var(--main_bg_color);
}

#banner_img{
    max-height: 30vh;
    max-width: 80vw;
}

#page_interact_blocker{
    width: 100vw;
    height: 100vh;
    position: fixed;
    display: none;
    z-index: 100;
    background-color: rgba(128,128,128,0.7);
    background-blend-mode: color-burn;
}

#page_banner{
    top: 0px;
    left: 0px;
    right: 0px;
    margin-bottom: 1vh;
    padding-top: 1vh;
    padding-bottom: 1vh;
    border-bottom-left-radius: 2vh;
    border-bottom-right-radius: 2vh;
    text-align: center;
    background-color: var(--float_bg_color);
    color: var(--float_tx_color);
}


#header{
    position: fixed;
}

#page_name {
    margin-top: 1vh;
    margin-left: 1vh;
    padding-right: 2vw;
    height: 8vh;
    width: fit-content;
    display: inline-block;
    
    background-color: var(--float_bg_color);
    color: var(--float_tx_color);
    border-top-left-radius: 2vh;
    border-bottom-right-radius: 2vh;
    border: var(--border_color), solid, 0.3vh;
    font-size: 2vh;
    
    img {
        vertical-align: middle;
        margin : 1vh;
        height: 6vh;
    }
}

#top_link {
    display: inline-block;
    position: absolute;


    font-size: 2vh;

    right: 0px;
    margin-right: 1vh;

    a {
        padding-left: 1vw;
        padding-right: 1vw;
        
    }

    :hover{
        text-decoration: none;
        animation: button_line 0.4s ease-out 0s 1 normal forwards;
    }
}

@keyframes button_line {
    from{
        border-bottom: 0px none var(--border_color);
    }
    to{
        border-bottom: 0.3vh solid var(--border_color);
    }
}

.under_title_link {
    margin-left: 2vh;
    font-size: 1.5vh;
}

#content_view {
    padding-bottom: 7vh;
    font-size: 2.2vh;
    overflow-wrap: break-word;

    img {
        max-height: 30vh;
        max-width: 80vw;
    }
}

@media (orientation: portrait) { /*縦*/
    #toggle_topic{
        border-top-left-radius: 2vh;
        border-bottom-right-radius: 2vh;
        font-size: 2vh;
        width: fit-content;
        padding-right: 2vw;
        background-color: var(--page_top_bg_normal);
        border: var(--border_color), solid, 0.3vw;
        margin-left: 2vh;
        padding-left: 1vh;
    }

    #toggle_topic:hover{
        background-color: var(--page_top_bg_hover);
    }

    #toggle_link{
        position: inherit;
        right: 0px;
        border-top-left-radius: 2vh;
        border-bottom-right-radius: 2vh;
        font-size: 2vh;
        width: fit-content;
        padding-left: 1vw;
        background-color: var(--page_top_bg_normal);
        border: var(--border_color), solid, 0.3vw;
        margin-right: 2vh;
        padding-right: 1vh;
    }

    #toggle_link:hover{
        background-color: var(--page_top_bg_hover);
    }


    #page_topic{
        display: none;
        text-align: center;
        margin-top: 19vh;
        margin-left: 10vw;
        margin-bottom: 1vh;
        padding-bottom: 1vh;
        padding-left: 1vw;
        padding-right: 1vw;
        max-height: 75vh;
        width: 75vw;
        position:fixed;

        z-index: 101;
        
        background-color: var(--float_bg_color);
        color: var(--float_tx_color);
        border-top-left-radius: 2vh;
        border-bottom-right-radius: 2vh;
        border: var(--border_color), solid, 0.3vh;
        font-size: 2vh;
    }

    #top_link{
        display: none;
        text-align: center;
        margin-top: 19vh;
        margin-left: 10vw;
        margin-bottom: 1vh;
        padding-bottom: 1vh;
        padding-left: 1vw;
        padding-right: 1vw;
        max-height: 75vh;
        width: 75vw;
        position:fixed;

        z-index: 101;
        
        background-color: var(--float_bg_color);
        color: var(--float_tx_color);
        border-top-left-radius: 2vh;
        border-bottom-right-radius: 2vh;
        border: var(--border_color), solid, 0.3vh;
        font-size: 2vh;
    }


    #content_view{
        padding-top: 20vh;
        margin-right: 10vw;
        margin-left: 10vw;
    }
}

@media (orientation: landscape) { /*横*/
    #toggle_topic{
        display: none;
    }

    #toggle_link{
        display: none;
    }

    #page_topic{
        text-align: center;
        margin-top: 18vh;
        margin-left: 1vh;
        padding-bottom: 1vh;
        padding-left: 1vw;
        padding-right: 1vw;
        width: 15vw;
        max-height: 75vh;
        position: fixed;
        
        background-color: var(--float_bg_color);
        color: var(--float_tx_color);
        border-top-left-radius: 2vh;
        border-bottom-right-radius: 2vh;
        border: var(--border_color), solid, 0.3vh;
        font-size: 2vh;
    }

    #top_link{
        margin-top: 3.5vh;
    }

    #content_view{
        padding-top: 10vh;
        margin-right: 20vw;
        margin-left: 20vw;
    }
}

#page_footer {
    bottom: 1vh;
    margin-bottom: 1vh;
    margin-left: 1vh;
    padding-top: 0.5vh;
    padding-bottom: 0.5vh;
    padding-left: 2vw;
    padding-right: 2vw;
    width: fit-content;
    position: fixed;
    background-color: var(--float_bg_color);
    color: var(--float_tx_color);
    border-top-left-radius: 2vh;
    border-bottom-right-radius: 2vh;
    border: var(--border_color), solid, 0.3vh;
    font-size: 2vh;
}

#page_top{
    display:inline-block;
    position: fixed;
    text-align: center;
    margin-bottom: 2vh;
    margin-right: 2vw;
    bottom:0px;
    right: 0px;
    bottom:0px;
    overflow:hidden;
    display:inline-block;
    border-radius: 2.5vh;
    height: 5vh;
    width: 5vh;
    font-size: 3.5vh;
    text-decoration: none;
    background-color: var(--page_top_bg_normal);
    border: var(--border_color), solid, 0.3vw;
}

#page_top:hover{
    background-color: var(--page_top_bg_hover);
}