.zoommodal {
    overflow:auto;
    width:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    &>picture>img {
        max-width: 100vw;
        max-height:100vh;
        margin:0 auto;
        align-self:center;
    }
    &.extrazoom {
        align-items:flex-start;
        justify-content:flex-start;
        &>picture>img {
            max-width: 300vw;
            max-height: 300vh;
        }
    }
}
#zoomlinkbox {
    position: absolute;
    top: 0;
    padding: 15px;
    width: 100%;
    justify-content: space-between;
    display: flex;
    .modal__close {
        font-size: 1.7em;
    }
}
@keyframes growfade {
    0% {
        transform: scale(0%);
        opacity: 1;
    }
    10% {
        transform: scale(100%);
    }
    50% {
        opacity: 0;
    }
}
.hotspot {
    position: absolute;
    translate: -50% -50%;
    width: 6em;
    height: 6em;
    border-radius: 100%;
    &>div {
        animation-iteration-count: infinite;
        animation: growfade infinite 7s 2s;
        background: rgba(255,255,255,0.7);
        opacity:0;
        border-radius:inherit;
        width: 100%;
        height: 100%;
    }

    &:before {
        content: "";
        position: absolute;
        inset: 37%;
        background: var(--accentcolor);
        border-radius: inherit;
        opacity: 0.8;
    }
}

.hotbox {
    position: absolute;
    cursor:zoom-in;
}

section#item {
    display: flex;
    flex-flow: column;
    position:relative;
    --labelmargin: 100px;
    --labelheight: 60px;
    & .imgbox {
        flex: 1;
        margin: 1em 40px 10px;
        position:relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column;
        container-type: size;
        & .imgwrapper {
            position: relative;
            height: fit-content;
            width: fit-content;
            &>a{
                display:block;
                &>img{
                    max-width:90cqw;
                    max-height:100cqh;
                }
            }
        }
    }
    & a[href^="#zoom"] {
        cursor: zoom-in;
    }
    & .imgwrapper::before {
        content: "↔";
        pointer-events:none;
        position: absolute;
        top: 5px;
        left: 5px;
        background: white;
        z-index: 1;
        color: var(--darkerblue);
        padding: 0.38em 8.5px 0.5em;
        rotate: -45deg;
        border-radius: 100%;
        opacity: 0.85;
    }
    & .nextprev {
        position: absolute;
        top: 50%;
        translate: 0 -50%;
        font-size: 3rem;
        text-decoration: none;
        padding: 0.25em 2.5px 0.35em;
        color: black;
        background:var(--textbgcolor);
        &#prev {
            left:0;
        }
        &#next {
            right:0;
        }
    }
    & #itemdescbox {
        /* position:absolute; */
        bottom:0;
        right:0px;
        width: 100%;
        background: rgba(255,255,255,0.9);
        & a {
            color: var(--darklinkcolor);
        }
        color:black;
        padding: 16px;
        display:flex;
        flex-flow: column;
        &>details {
            display:contents;
            &>summary {
                cursor:pointer;
                display:flex;
                gap:1em;
                align-items:center;
                &::marker {
                    font-size:1.5rem;
                    content:"";
                }
                &:before {
                    content:"";
                    transition: all 0.2s;
                    align-self:flex-start;
                    font-size: 18px;
                    translate: 0 4px;
                    border: 0.5em solid transparent;
                    border-left: 0.8em solid black;
                    border-right: none;
                }
                &>span {
                    display: flex;
                    /* margin-inline-end: var(--labelmargin); */
                    flex: 1;
                    max-width:calc(100% - 120px);
                    flex-flow: row wrap;
                    justify-content:space-between;
                    align-items:center;
                    gap: 16px;
                    &>*{
                        vertical-align:middle;
                    }
                    &>h2 {
                        min-width: min(20em, 100%);
                        margin:0;
                    }
                    &>a{
                        font-style: italic;
                        text-wrap: nowrap;
                        font-weight: 200;
                        font-size: 1rem;
                    }
                }
            }
            &>#itemdesc {
                overflow:auto;
                padding-inline-end: var(--labelmargin);
                margin-block-start:1em;
                padding-inline-start: 32px;
                text-wrap: pretty;
                max-height: 18em;
                &>p {
                    column-width:100cqw;
                    height:fit-content;
                }
                & br {
                    content:"";
                    display:block;
                    margin-block-end: 0.5em;
                }
            }
        }
    }
}

.original_link {
    background: var(--whitebg);
    color: var(--darkerblue);
    font-family: var(--headerfonts);
    padding: 5px;
    text-decoration: none;
    border-radius: 0.4em;
    font-size: 1.2em;
    margin-inline-end: 8px;
}
#itemdescbox:has(details[open]) {
    position:absolute;
}
details[open] > summary:before {
    rotate:90deg;
}

@media (aspect-ratio < 5/4 ) {
    section#item {
      & >.imgbox {
        container-type: unset;
      }
    }
    main {
      flex-flow: column;
      /* height: 150lvh; */
      overflow-y: auto;
      &:has(section#item) {
        flex-flow: column-reverse;
      }
    }
    #breadcrumb {
        display: flex;
        visibility:visible;
        justify-content: center;
        padding: 1em 32px;
        & > .breadcrumb {
            display: flex;
            flex-flow: row wrap;
        }
    }
    .leftnav {
        position:fixed;
        inset: 5vmin;
        margin-block-start:3em;
        z-index: 990;
        visibility:hidden;
        opacity:0;
        display:none;
        transition:all 0.5s;
        &:before {
            position:fixed;
            content:"";
            inset:0;
            background:#666;
            opacity: 0;
        }
        & .modal__close {
            visibility: visible;
            opacity: 1;
            position:fixed;
        }
        &>ul {
            margin-block-start:2em;
            position: absolute;
            &>li {
                &>div:before {
                    display:none;
                }
                &>ul{
                    max-height:400px;
                    visibility:visible;
                    padding-block:0.6em;
                    transition: all 0.2s;
                }
            }
        }
    }
    #nav:target {
        visibility:visible;
        opacity:1;
        display:block;
        &:before {
            visibility:visible;
            opacity: 0.8;
            display:block;
        }
    }
    section#item {
        overflow:auto;
        position: relative;
        &>.nextprev {
        }
        &>#itemdescbox {
            max-height:none;
            position:relative;
            &>details>#itemdesc {
                padding-inline-end: 40px;
            }
        }
        &>.imgwrapper{
            max-height:60vh;
            &>img {
                max-height:100%;
                position:relative;
            }
        }
    }
}

.sticky {
    position:sticky;
    top:0;
    left:0;
}