/* this stylesheet is used to create a paper effect when reading stories/poems */

:root{
    scrollbar-color:#ddd #101010;
}

@media screen and (max-width:800px){
    body{
        .flex-container-general{
            flex-direction:column;
            padding:0;
            gap:0;
            width:auto;
            height:auto;
        }
        .nav-window-area{
            position:sticky;
            top:0;
            flex-basis:content;
        }
        .viewport-area{
            flex-basis:content;
            width:100%;
        }
        .viewport{
            background-image:none;
            background:radial-gradient(#101010,#202020);
            overflow:hidden;
            size:content;
            padding-bottom:2.5rem;
        }
    }
}
@media (prefers-color-scheme: light){
    body{
        .viewport{
            background-color:#dadada;
            background-image:url("/assets/paper-background-light.jpg");
        }
    }
    :root{
        scrollbar-color:#bbb #ddd;
    } 
}
@media screen and (max-width:800px) and (prefers-color-scheme:light){
    body{
        .viewport{
            background-image:none;
            background:radial-gradient(#dadada,#c8c8c8);
            overflow:hidden;
            size:content;
            padding-bottom:2.5rem;
        }
    }
}

.flex-container-general{
    display:flex;
    flex-direction:row;
    width:95vw;
    height:97vh;
    gap:0.125rem;
    justify-content:left;
}
.nav-window-area{
    flex-basis:20vw;
    padding:0;
}
/* this is the area where the "paper" is contained */
.viewport-area{
    flex-basis:60vw;
    padding:0;
}
/* This class acts as the "paper" */
.viewport{
    width:100%;
    height:100%;
    overflow:auto;
    background-color:black;
    background-image:url("/assets/paper-background.jpg");
    background-attachment: fixed;
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
}
.viewport h1{padding-top:2.5rem;}