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

body{
    min-height:100vh;
    background:#fafafa;
    font-family:Inter,system-ui,sans-serif;
}

.hidden{
    display:none !important;
}

#loginScreen{
    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;
}

.login-card{
    width:340px;

    display:flex;
    flex-direction:column;
    gap:1rem;
}

.login-card h1{
    text-align:center;
    font-size:2rem;
    font-weight:500;
}

.login-card input{
    padding:1rem;

    border:1px solid #ddd;
    outline:none;

    font-size:1rem;
}

.login-card button{
    padding:1rem;

    border:none;

    background:#111;
    color:white;

    cursor:pointer;
}

#errorMessage{
    text-align:center;
    color:#c62828;
}

.viewer{
    min-height:100vh;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    padding:2rem;
}

.image-wrapper{
    width:min(100%,1000px);
    height:80vh;

    display:flex;
    justify-content:center;
    align-items:center;
}

#dietyimage{
    max-width:100%;
    max-height:100%;

    object-fit:contain;

    transition:
        opacity .25s ease,
        transform .25s ease,
        filter .25s ease;
}

#dietyimage.fade{
    opacity:0;
    transform:translateY(10px);
    filter:blur(3px);
}

.controls{
    margin-top:1.5rem;

    display:flex;
    gap:1rem;
}

.controls button{
    border:none;

    background:#111;
    color:white;

    padding:.9rem 1.4rem;

    cursor:pointer;

    transition:
        transform .2s ease,
        opacity .2s ease;
}

.controls button:hover{
    transform:translateY(-2px);
}

.controls button:active{
    transform:scale(.98);
}