@font-face {
      font-family: 'JO Ottonormal WIP';
      src: url('ress/fonts/JOOttonormalWIP-Regular.woff2') format('woff2');
    }
    
    /*my controls*/
    
:root {
    /* general */
    --page-padding: 20px;
    --font-size: 1.23em;
    --small-font-size: 0.75em;

    /* image size*/
    --image-width: 85vw;
    --image-height: 88vh;
    --image-offset-y: -15px;

    /* info */
    /*how much space between info and pic*/
    --info-gap: 10px;

   
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: var(--page-padding);
    font-family: 'JO Ottonormal WIP', sans-serif;
    font-size: var(--font-size);
    line-height: var(--line-height);
}

/* top-left */
#header {
    position: fixed;
    top: var(--page-padding);
    left: var(--page-padding);
    z-index: 10;
}

/*links*/
a,
a:visited,
a:hover,
a:active {
    color: inherit;
    text-decoration: none;
}

a::before {
    content: "";
}

a:hover::before {
    content: "→";
    margin-right: 0.01em;
}


/* the slideshow*/
/* image is independent of header + info */
#slideshow {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

#image-area {
    width: var(--image-width);
    height: var(--image-height);
    transform: translateY(var(--image-offset-y));
    cursor: e-resize;
    pointer-events: auto;
}

#image-area.left {
    cursor: w-resize;
}

#slide-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}



/* bottom-left */
#slide-info {
    position: fixed;
    bottom: var(--page-padding);
    left: var(--page-padding);
    font-size: var(--small-font-size);
    margin: 0;
    z-index: 10;
    pointer-events: none;
}