body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
}


.top-text {
    position: fixed;
    top: 20px;
    right: 20px;

    max-width: 280px;
    text-align: right;

    font-family: Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 1.4;

    opacity: 0.7;
}


.top-text a {
    color: inherit;
    text-decoration: underline;
}

.top-text a:hover {
    opacity: 1;
}

.nav {
    position: fixed;
    top: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: Arial, sans-serif;
    font-size: 12px;
}

.nav label {
    cursor: pointer;
    opacity: 0.4;
}

.nav label:hover {
    opacity: 1;
}

input {
    display: none;
}

.viewer {
    width: 500px;
    height: 500px;
    position: relative;
    overflow: hidden;
}

.frame {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 0;
}

.frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* animation */
.f0 { animation: play 8s infinite 0s; }
.f1 { animation: play 8s infinite 0.5s; }
.f2 { animation: play 8s infinite 1s; }
.f3 { animation: play 8s infinite 1.5s; }
.f4 { animation: play 8s infinite 2s; }
.f5 { animation: play 8s infinite 2.5s; }
.f6 { animation: play 8s infinite 3s; }
.f7 { animation: play 8s infinite 3.5s; }
.f8 { animation: play 8s infinite 4s; }
.f9 { animation: play 8s infinite 4.5s; }
.f10 { animation: play 8s infinite 5s; }
.f11 { animation: play 8s infinite 5.5s; }
.f12 { animation: play 8s infinite 6s; }
.f13 { animation: play 8s infinite 6.5s; }
.f14 { animation: play 8s infinite 7s; }
.f15 { animation: play 8s infinite 7.5s; }

@keyframes play {
    0% { opacity: 1; }
    6% { opacity: 1; }
    7% { opacity: 0; }
    100% { opacity: 0; }
}


#t0:checked ~ .viewer .f0,
#t1:checked ~ .viewer .f1,
#t2:checked ~ .viewer .f2,
#t3:checked ~ .viewer .f3,
#t4:checked ~ .viewer .f4,
#t5:checked ~ .viewer .f5,
#t6:checked ~ .viewer .f6,
#t7:checked ~ .viewer .f7,
#t8:checked ~ .viewer .f8,
#t9:checked ~ .viewer .f9,
#t10:checked ~ .viewer .f10,
#t11:checked ~ .viewer .f11,
#t12:checked ~ .viewer .f12,
#t13:checked ~ .viewer .f13,
#t14:checked ~ .viewer .f14,
#t15:checked ~ .viewer .f15 {
    opacity: 1 !important;
    animation: none !important;
    z-index: 10;
}