:root {
    --highlight-color: #ff0;
    --part-color: #00ffffeb;
    --placeholder-color: #ffffff12;
    --accent-color: #ff00df;
}

* {
    box-sizing: border-box;
}

* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body {
    margin: 0;
    padding: 0;
    background: #050505;
    font-family: sans-serif;
}

/* thumbs --------------------------------------- */

.thumb-container {
    position: relative;
    max-width: 1000px;
    height: 80vh;
    margin: 20px auto;
    /*border: 2px dashed #ffffff12;*/
    overflow: hidden;
}
@media screen and (max-width: 1100px) {
    .thumb-container {
        max-width: 90vw;
    }
}

.thumb {
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    cursor: pointer;

    background-color: var(--placeholder-color);
    animation: fadeIn 0.4s ease-out 1 forwards;
    opacity: .3;
    transition: 
        all 0.15s ease,
        opacity 3s linear;
}
.thumb:hover {
    /*transform: translate(0,0) scale(1.01) !important;*/
}
.thumb:hover .image,
.thumb a:focus .image {
    transform: scale(1.05);
    /*animation: slowZoom 3s ease-out 1 forwards;
    animation-delay: 0.3s;*/
}
@keyframes slowZoom {
    0% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1.1);
    }
}

@keyframes fadeIn {
    0% {
        opacity: .1;
    }
    100% {
        opacity: 1;
    }
}

.image {
    display: block;
    width: 100%;
    height: auto;
    transition: all 0.1s ease;
}

/* detail --------------------------------------- */

.detail-overlay {
    opacity: 0;
    display: none;
   
}
.detail-overlay .detail-image{
    /*background-color: var(--placeholder-color);*/
    min-height: 10vh;
    min-width: 10vh;
    max-height: calc(100vh - 20px);
    max-width: calc(100vw - 20px);
    cursor: pointer;

}
@media screen and (max-width: 1100px) {
    .detail-overlay .detail-image{
        max-height: 90vh;
        max-width: 90vw;
    }
}

body.detail .detail-overlay {
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    background: #000000ad;
    color: #FFF;
    z-index: 2;

    display: flex;
    opacity: 0.1;
    transform: scale(0.9);
    animation: sizeIn .15s ease-out normal forwards;
}

/* block the scroll, while detail is visible */
body.detail {
    overflow: hidden;
}


.detail-overlay .close-btn {
    position: fixed;
    z-index: 3;
    top: 5%;
    right: 5%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 80px;
    cursor: pointer;
}

@keyframes sizeIn {
    1% {
        opacity: 0.1;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.detail-overlay .detail-image img {
    opacity: 0;
    animation: fadeIn 0.2s ease-out 1 forwards;
    display: block;
    width: 100%;
    height: auto;
}

.vertical {
    left: 0px;
    display: inline-block;
    padding: 5px 10px;
    position: fixed;
    top: 200px;
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    transform-origin: top left;
    color: #FFF;
    text-decoration: none;
    font-size: smaller;
}



footer{
    padding: 20px 20px 10px 20px;
}
footer p{
    font-size: 0.7em;
    color: #6c6c6c;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}