body {
    margin: 0;
    padding: 0;
    background-color: white;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    color: #65797e;
}

a {
    color: #65797e;
    text-decoration: none;
}

#navigation {
    margin: 1em 0;

    text-align: right;
}

#download {
    display: inline-flex;

    align-items: center;

    font-size: 0.8em;

    gap: 10px;
    padding: 0 30px;
}

#download span {
    opacity: 0;
    transition: opacity ease 0.3s;
}

#download:hover span {
    opacity: 100;
}

#overlay, #error {

    position: absolute;
    left: 0;
    top: 0;

    width: 100vw;
    height: 100vh;

    backdrop-filter: blur(100px) saturate(0%) brightness(200%);
    background-color: rgba(255, 255, 255, 1);

    z-index: 10000;

    pointer-events: none;
}

#error::after {
    display: block;
    content: attr(data-error);

    font-size: 0.8em;
    color: #b29d00;

    position: absolute;
    left: 50%;
    top: 50%;

    margin-top: 20px;

    transform: translate(-50%, 100%);

    z-index: 999999;
}

#overlay::before, #error::before {
    content: '';
    display: block;
    background-image: url("../images/fuji-63bc935f61677b2f9c1c4e1116802818.svg");
    background-size: contain;
    width: 20vw;
    aspect-ratio: 17/5;

    position: absolute;
    left: 50%;
    top: 50%;

    opacity: 100;

    transform: translate(-50%, -100%);
    transition: opacity 0.3s ease;

    z-index: 99999;

    pointer-events: none;
}

#overlay.hide {
    animation: backdrop-filter-animation 2s forwards 1;
}

#overlay.hide::before {
    opacity: 0;
}

img {
    object-fit: contain;
}

@keyframes backdrop-filter-animation {
    from {
        backdrop-filter: blur(100px) saturate(0%) brightness(200%);
        background-color: rgba(255, 255, 255, 1);
    }

    99% {
        backdrop-filter: blur(0) saturate(100%) brightness(100%);
        background-color: rgba(39, 39, 39, 0);
    }

    to {
        backdrop-filter: blur(0) saturate(100%) brightness(100%);
        background-color: rgba(39, 39, 39, 0);
        display: none;
    }
}

#content {
    position: absolute;
    left: 0;
    top: 0;

    width: 100vw;
    height: 100vh;

    text-align: center;

    overflow-x: hidden;
    overflow-y: scroll;
}

/* Hide scrollbar for Chrome, Safari and Opera */
#content::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#content {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

#video {
    text-align: center;
    background: black;
}

iframe {
    margin: auto;
    width: 100vw;
    max-width: 100vw;
    min-height: 50vh;
    max-height: 70vh;
    aspect-ratio: 16/9;
}

body:not(:has(#photos)) #video {
    margin: 0;
}

body:not(:has(#photos)) iframe {
    height: 100vh;
    max-height: 100vh;
}

body > * {
    width: 100vw;
    overflow: hidden;
}

#photos {
    margin: auto;
    max-width: 1800px;
    overflow: visible;
}

a img {
    transition: transform 0.3s ease;
    z-index: 9998;
}

a:hover img {
    transform: scale(1.1)!important;
}

.photo-booth-set {
    transition: transform 0.3s ease;
}

.photo-booth-set:hover {
    transform: scale(1.05)!important;
}

.photo-booth-set a:hover img {
    transform: scale(1.05)!important;
}

#photos::after {
    content: '';
    display: block;
    margin: 3em auto 13em auto;

    background-image: url("../images/fuji-63bc935f61677b2f9c1c4e1116802818.svg");

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    max-width: 80vw;
    height: 2em;
    aspect-ratio: 17/5;
}

img.photo {
    width: round(down, 20%, 1px);

    border: 20px solid transparent;

    box-sizing: border-box;
}

#photos img.photo.large {
    width: round(down, 60%, 1px)!important;
}
#photos img.photo.medium {
    width: round(down, 40%, 1px)!important;
}
#photos img.photo.small {
    width: round(down, 20%, 1px)!important;
}

.photo-booth-set img {
    width: round(down, 100%, 1px);
}

.photo-booth-set {
    width: round(down, 20%, 1px);

    padding: 1vw;

    box-sizing: border-box;

    display: inline-block;

    z-index: 100;
}

.photo-booth-set .content {
    background: white;

    box-shadow: 0 3px 14px 0 rgba(0,0,0,0.3);
}

.photo-booth-set .content > *, .photo-booth-set .content::after {
    margin-bottom: -.3vw;
}

.photo-booth-set .content::after {
    content: '';
    display: inline-block;
    background-image: url("../images/photo-booth-logo-76162109039fb6b47788f3e2890ae03d.jpg");
    background-size: contain;
    width: round(down, 100%, 1px);
    aspect-ratio: 60/45;
}

html:not([data-scroll='0']) #video::after {
    content: '';
    display: block;
    margin: auto;
    width: 100vw;
    max-width: 100vw;
    min-height: 50vh;
    max-height: 70vh;
    aspect-ratio: 16/9;
}

html:not([data-scroll='0']) iframe {
    position: fixed;
    bottom: 20px;
    right: 20px;

    z-index: 9999;

    width: calc(min(120vw, 50em));
    max-width: unset;
    min-height: unset;
    max-height: unset;
    aspect-ratio: 16/9;

    transform-origin: bottom right;
    transform: scale(0.5);
}

@media screen and (max-width: 767px) and (orientation:portrait)
{
    img.photo {
        width: round(down, 50vw, 1px);
        max-height: 60vh;
        border-width: round(down, 4vw, 1px);
    }

    #photos img.photo.large {
        width: round(down, 100vw, 1px)!important;
    }
    #photos img.photo.medium {
        width: round(down, 100vw, 1px)!important;
    }
    #photos img.photo.small {
        width: round(down, 50vw, 1px)!important;
    }

    .photo-booth-set {
        width: round(down, 50vw, 1px);
        margin-left: round(down, 25vw, 1px);
    }

    .all .photo-booth-set {
        width: round(down, 50vw, 1px);
        margin-left: 0;
    }

    html:not([data-scroll='0']) iframe {
        width: 120vw;
    }
}