*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    width:100%;
    height:100%;
}

body{

    width:100%;
    min-height:100vh;

    background:#ffffff;

    font-family:Arial,Helvetica,sans-serif;

    overflow:hidden;

    touch-action:manipulation;

}

.app{

    width:100%;
    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:20px;

}

.image-container{

    position:relative;

    width:min(95vw,1200px);

    height:75vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

.image-container img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:contain;

    user-select:none;

    -webkit-user-drag:none;

    pointer-events:none;

    opacity:0;

    transition:opacity .08s linear;

}

.image-container img.active{

    opacity:1;

}

.slider-container{

    margin-top:22px;

    width:min(900px,95vw);

    display:flex;

    align-items:center;

    gap:18px;

}

.leftLabel,
.rightLabel{

    width:70px;

    text-align:center;

    font-size:18px;

    font-weight:bold;

}

#slider{

    flex:1;

    appearance:none;

    -webkit-appearance:none;

    height:18px;

    border-radius:999px;

    background:#d5d5d5;

    outline:none;

}

#slider::-webkit-slider-thumb{

    appearance:none;

    -webkit-appearance:none;

    width:30px;

    height:30px;

    border-radius:50%;

    background:#1976d2;

    cursor:pointer;

}

#slider::-moz-range-thumb{

    width:30px;

    height:30px;

    border:none;

    border-radius:50%;

    background:#1976d2;

    cursor:pointer;

}

#slider::-moz-range-track{

    height:18px;

    background:#d5d5d5;

    border-radius:999px;

}

/* ---------- Tablet ---------- */

@media(max-width:992px){

.image-container{

    height:68vh;

}

.slider-container{

    width:96vw;

}

}

/* ---------- Mobile ---------- */

@media(max-width:768px){

.app{

    padding:12px;

}

.image-container{

    width:100%;

    height:60vh;

}

.leftLabel,
.rightLabel{

    width:55px;

    font-size:16px;

}

#slider{

    height:22px;

}

#slider::-webkit-slider-thumb{

    width:38px;

    height:38px;

}

#slider::-moz-range-thumb{

    width:38px;

    height:38px;

}

}

/* ---------- Large Desktop ---------- */

@media(min-width:1600px){

.image-container{

    width:1300px;

    height:78vh;

}

.slider-container{

    width:1100px;

}

}