body {
    background-color: hsl(0, 0%, 2%);
    color: hsl(0, 0%, 90%);
    overflow: auto;
    text-align: center;
}

body > h1:first-child {
    margin-top: 0;
    padding-top: 1em;
}

main {
    position: relative;
    color: black;
    background: 
        hsl(60, 56%, 80%)
    ;
    width: 190vw;
    margin-left: 2.5vw;
    height: calc(100dvh - 10em);
}

input[name=page-selector] {
    display: none;
}

.page-set {
    position: absolute;
    width: 0;
    height: 100%;
    right: 0;
    overflow: hidden;
    transition: 1s;
    background-color: hsl(60, 56%, 80%);
}

.page-set > div {
    position: relative;
    display: inline-block;
    width: 49%;
    height: 100%;
    box-sizing: border-box;
    text-align: left;
}

.left-page {
}

.left-page > div {
    background:
        linear-gradient(90deg, transparent 41vw, hsla(0, 0%, 0%, 0.25) 100%)
    ;
}

.right-page {
    /* overflow: hidden; */
}

.right-page > div {
    right: 0;
    /* left: -46.5vw; */
    transition: 1s;
    background:
        linear-gradient(90deg, black 1px, hsla(0, 0%, 0%, 0.25) 1px, transparent 12%)
    ;
}

input[name=page-selector]:checked + .page-set {
    width: 100%;
}

input[name=page-selector]:checked + .page-set > .right-page > div {
    right: 0;
}

.page-content {
    box-sizing: border-box;
    padding: 1.2vw 5%;
    font-family: 'Ink Free', 'Comic Sans MS', sans-serif;
    font-size: 1.1em;
    overflow-y: scroll;
    max-height: 100%;
    scrollbar-width: none;
}

label {
    background-color: black;
}

.left-paginator,
.right-paginator {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    width: 5vw;
    height: 30dvh;
}

.left-paginator {
    left: 0;
    background: conic-gradient(at 0% 50%, transparent 18.75%, black 18.75% 30.75%, transparent 30.75%);
}

.right-paginator {
    right: 0;
    background: conic-gradient(from 180deg at 100% 50%, transparent 18.75%, black 18.75% 30.75%, transparent 30.75%);
}

#back-link {
    position: fixed;
    bottom: 10px;
    left: 10px;
    width: auto;
    font-family: 'Ink Free', 'Comic Sans MS', sans-serif;
    font-size: 2em;
    font-weight: 1000;
    color: white;
    /* writing-mode: vertical-rl; */
    text-orientation: upright;
}

#back-link:hover {
    color: red;
}

aside {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 50%;
    font-family: 'Ink Free', 'Comic Sans MS', sans-serif;
}

/* 

desktop css overrides 

*/
@media only screen and (min-width: 768px) {
    main {
        width: 95vw;
    }

    .left-paginator,
    .right-paginator {
        width: 2vw;
    }
    
    #back-link {
        bottom: unset;
        top: 10px;
    }

    aside {
        display: none;
    }
}