@media screen and (width>=660px) {
}
@media screen and (width<660px) {
}
body.enlarged #page-heading,
body.enlarged #page-menu,
body.enlarged #page-footer{
    display:none;
}
#page-payload{
    display:flex;
    flex-wrap: wrap;
}
.enlarged #page-payload{
    display:grid;
    justify-items:center;
    align-items:center;
}
.enlarged #page-payload{
    flex-direction:column;
    flex-wrap: nowrap;
}
.page-frame {
    display:grid;
    grid-template-columns:100%;
    grid-template-rows:100%;
    justify-items:center;
    align-items:center;
    position:relative;
    auto-orientation: unset;
    box-sizing: border-box;
    border:solid black 1px;
    border-radius: 3px;
    margin:1px;
    padding:4px;
    width: 250px;
    height: 250px;
}
.page-frame.text{
    display:block;
    overflow: scroll;
}
.page-frame.text p{
    margin:0pt;
    text-indent:3ex;
}
.page-frame img.wide{
    width: 100%;
}
.page-frame img.high{
    height: 100%;
}
.page-frame .control {
    position: absolute;
    z-index:5;
    background:red;
    color:white;
    top: 0px;
    left:0px;
}
.page-frame .shrink {display:none;}
.enlarged .page-frame{
    display: none;
}
.enlarged .page-frame.enlarged .shrink{
    display:block;
}
.enlarged .page-frame.enlarged .enlarge{
    display:none;
}
.enlarged .page-frame.enlarged{
    width:100%;
    height:100%;
    display:grid;
}
#pageup, #pagedown {display:none;}
.enlarged #pageup {
    display:block;
    position: absolute;
    top: 50%;
    right: 2ex;
    z-index:5;
    color:white;
    background: #00ff;
}
.enlarged #pagedown {
    display:block;
    position: absolute;
    top: 50%;
    left: 2ex;
    z-index:5;
    color:white;
    background: #00ff;
}
.first-page #pagedown {display:none;}
.last-page #pageup {display:none;}