:root{
    --arrowSize: 1;
}

div.content{
    width: clamp(65vw, 130vh, 90vw);
    min-height: clamp(29vw, 58vh, 58vh);
    padding-bottom: clamp(1vw, 2vh, 2vh);
}

div.pdf-page-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
}

div.zoomButtons{
    gap: clamp(2vw, 4vh, 4vh);
}
div.zoomButtons a{
    margin-top: clamp(1vw, 2vh, 2vh);
    margin-bottom: clamp(1vw, 2vh, 2vh);
}
div.zoomButtons img{
    height: clamp(2.25vw, 4.5vh, 4.5vh);
}
div.zoomButtons img.abs{
    height: clamp(2.25vw, 4.5vh, 4.5vh);
}
div.zoomButtons a:hover img{
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
div.zoomButtons a:hover img.abs{
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
@media (min-width: 1200px){
    div.zoomButtons a:hover img{
        opacity: 0;
        transition-duration: 0.3s;
        transition-timing-function: ease-out;
    }
    div.zoomButtons a:hover img.abs{
        opacity: 1;
        transition-duration: 0.3s;
        transition-timing-function: ease-out;
    }
}
div.zoomButtons a:active img{
    opacity: 0;
    transition-duration: 0.1s;
}
div.zoomButtons a:active img.abs{
    opacity: 1;
    transition-duration: 0.1s;
}


a.move-up, a.move-down{
    margin-top: clamp(0.5vw, 1vh, 1vh);
}
a.move-up img, a.move-down img{
    height: clamp(1.6vw, 3.2vh, 3.2vh);
    transition-property: filter, opacity;
    transition-duration: 0.3s, 0.5s;
    transition-timing-function: ease-out;
}

@media (min-width: 1200px){
    a.move-up:hover img, a.move-down:hover img{
        filter: drop-shadow(0 0 clamp(0.2vw, 0.4vh, 0.4vh) var(--Text));
    }
    
}
a.move-up:active img, a.move-down:active img{
    filter: drop-shadow(0 0 clamp(0.2vw, 0.4vh, 0.4vh) var(--Text));
}

a.page-arrow-control{
    margin-left: clamp(0.5vw, 1vh, 1vh);
    margin-right: clamp(0.5vw, 1vh, 1vh);
}
a.page-arrow-control img{
    height: calc(clamp(1.6vw, 3.2vh, 3.2vh)*var(--arrowSize));
}
a.page-arrow-control.move-up img{
    transform: rotate(-90deg);
}
a.page-arrow-control.move-down img{
    transform: rotate(-90deg);
}

@media (min-width: 1200px){
    div.pdf-page-wrapper a.page-arrow-control img{
        opacity: 0.25;
    }
    div.pdf-page-wrapper:hover a.page-arrow-control img{
        opacity: 1;
        transition-duration: 0.3s, 0.3s;
    }
}