/* Bring in font assets */
@font-face {
    font-family: "SUSE Regular";
    src: url('/assets/fonts/SUSE-Regular.ttf');
}

@font-face {
    font-family: "SUSE Medium";
    src: url('/assets/fonts/SUSE-Medium.ttf');
}

/* Setup base page layout */
html,
body {
    margin: 0;
    height: 100%;

    /* Slight noise texture on background */
    background-color: #1a1a1a;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAHklEQVQoU2NkQAOYmRkYGBg+z0AEYBxVSFUDDAwA2y0HAtVOrjQAAAAASUVORK5CYII=");
    background-repeat: repeat;
    background-size: cover;
    background: #1a1a1a;
    color: #1a1a1a;
}

/* The header, usually a title, of a collection */
.collection-header {
    font-size: calc(1.5rem);
    font-family: "SUSE Medium", sans-serif;
    color: #fff;

    margin-left: 1rem;
    margin-top: 8px;
    margin-bottom: 0px;
    margin-right: 0px;
}

/* The subheader, usually a date, of a collection */
.collection-subheader {
    font-size: calc(0.9rem);
    font-family: "SUSE Regular", sans-serif;
    color: #eee;

    margin-left: 1rem;
    margin-top: 0px;
    margin-bottom: 8px;
    margin-right: 0px;
}

/* Shown in lightbox dynamic caption */
.image-name {
    font-size: calc(1.1rem);
    font-family: "SUSE Medium", sans-serif;
    color: #fff;

    margin-left: 1rem;
    margin-top: 8px;
    margin-bottom: 0px;
    margin-right: 0px;
}

.image-location {
    font-size: calc(0.8rem);
    font-family: "SUSE Regular", sans-serif;
    color: #ccc;

    margin-left: 1rem;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
}

.image-datetime {
    font-size: calc(0.8rem);
    font-family: "SUSE Regular", sans-serif;
    color: #ccc;

    margin-left: 1rem;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
}

.image-caption {
    font-size: calc(0.9rem);
    font-family: "SUSE Regular", sans-serif;
    color: #fff;

    margin-left: clamp(16px, 30px, 5%);
    margin-top: clamp(5px, 16px, 5%);
    margin-bottom: 0px;
    margin-right: clamp(16px, 30px, 5%);
}

div.justified-gallery>.jg-entry-visible {
    transition:
        width 0.2s ease,
        height 0.2s ease,
        top 0.2s ease,
        left 0.2s ease;
    will-change: width, height, top, left;
}

div.justified-gallery>.jg-entry-visible>img {
    transition:
        width 0.2s ease,
        height 0.2s ease,
        margin-top 0.2s ease,
        margin-left 0.2s ease;
    will-change: width, height, margin-top, margin-left;
    border-radius: 4px;
}

div.justified-gallery>.jg-entry-visible>video {
    transition:
        width 0.2s ease,
        height 0.2s ease,
        margin-top 0.2s ease,
        margin-left 0.2s ease;
    will-change: width, height, margin-top, margin-left;
    border-radius: 4px;
}

.exif-icon {
    max-height: 1rem;
    margin-right: 1rem;
    /* equivalent to #fafafa for recoloring svg's. see https://isotropic.co/tool/hex-color-to-css-filter/ */
    filter: invert(100%) sepia(76%) saturate(1%) hue-rotate(321deg) brightness(104%) contrast(96%);
}

.exif-row {
    display: flex;
    align-items: center;
    text-wrap: nowrap;
}

.exif {
    margin: 16px;
    display: flex;
    flex-direction: column;
    font-family: "SUSE Medium", sans-serif;
    font-size: calc(0.8rem);
    height: fit-content;
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted #fff;
}

.tooltip .tooltip-text {
    visibility: hidden;
    width: 20rem;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 4px;
    position: absolute;
    z-index: 1;
    text-wrap: wrap;
    transform: translate(-20rem, 1rem);
}

.tooltip:hover .tooltip-text {
    visibility: visible;
}

/* Layout dynamic caption differently based on whether it is beside or below the image */
.pswp__dynamic-caption--aside {
    display: flex;
    flex-direction: column;
}

.pswp__dynamic-caption--below {
    display: flex;
    flex-direction: row;
}

.pswp__dynamic-caption--below>.image-caption {
    margin-left: auto;
    padding-left: 16px;
    text-align: justify;
    max-width: 66%;
}

.pswp__dynamic-caption--below>.exif {
    margin-left: auto;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
}

.pswp__dynamic-caption--below>.exif>.exif-row {
    flex-direction: row-reverse;
}

.pswp__dynamic-caption--below>.exif>.exif-row>.exif-icon {
    margin-left: 1rem;
    margin-right: 0;
}

/* Caption when hovering justified gallery thumbnail */
.justified-gallery>a>.jg-caption {
    font-family: "SUSE Medium", sans-serif;
    font-size: calc(0.9rem);
    background-color: transparent;
    transition: opacity 100ms ease-in;
    opacity: 0;
    display: initial;
}

.justified-gallery>a>.jg-caption.jg-caption-visible {
    transition: opacity 100ms ease-in;
    opacity: 1;
}