#reader-frame {
    overflow: hidden;
    position: relative;
}

#reader-pages {
    position: absolute;
    flex-direction: row;
    left: 0px;
    right: 0px;
    transition: all 1.5s ease;
}

#reader-pages > img {
    display: inline-block;
    opacity:0;
    transition: all 1s cubic-bezier(.9,.03,.69,.22); /* ease-in quartic */
    flex-shrink: 0;
}

#focus-overlay, #focus-overlay * {
    transition: all 1.5s ease;
}

#focus-overlay, #nav-controls {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    display: grid;
    
    grid-template-areas: 
        "left top right"
        "left center right"
        "left bottom right";
}

#focus-overlay {
    grid-template-columns: 50% auto 50%;
    grid-template-rows: 50% auto 50%;
}

#nav-controls {
    grid-template-columns: 1fr 15em 1fr;
    grid-template-rows: auto;
}

#nav-controls > div {
    cursor: pointer;
}

.top {
    grid-area: top;
}

.left {
    grid-area: left;
}

.right {
    grid-area: right;
}

.top {
    grid-area: top;
}

.bottom {
    grid-area: bottom;
}

#focus-overlay > *:not(.center) {
    background-color: rgba(0, 0, 0, 0.85);
}

#focus-overlay > .center {
    box-shadow: inset 0px 0px 5px 5px rgba(0, 0, 0, 0.85);
}