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

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
    font-family:Georgia,serif;
    color:#E6E6E6;
    background:#0b0a08;
}

.viewer-background{
    position:fixed;
    inset:0;

    background-image:url("images/Talvaren_Wallpaper.PNG");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    z-index:-1;
}

.viewer{
    width:100%;
    height:100vh;

    display:flex;
    flex-direction:column;
}

.viewer-header{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:20px 30px;

    background:rgba(0,0,0,.35);
    backdrop-filter:blur(6px);
}

.viewer-header h1{
    font-size:2rem;
    font-weight:normal;
    text-align:center;
    color:#E6E6E6;
}

.viewer-main{
    flex:1;

    overflow:auto;

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

    padding:25px;
}

#viewerImage{
    max-width:none;
    max-height:none;

    width:auto;
    height:auto;

    border:2px solid rgba(230,230,230,.25);

    box-shadow:0 10px 40px rgba(0,0,0,.55);

    cursor:zoom-in;
    transition:transform .25s ease;
}

#viewerImage.zoomed{
    max-width:none;
    max-height:none;
    width:auto;
    height:auto;

    cursor:zoom-out;
}

.viewer-footer{
    display:flex;
    justify-content:center;

    padding:20px;

    background:rgba(0,0,0,.35);
    backdrop-filter:blur(6px);
}

button{
    padding:12px 24px;

    font-size:1rem;

    color:#E6E6E6;

    background:rgba(40,40,40,.45);

    border:1px solid rgba(230,230,230,.35);

    border-radius:8px;

    cursor:pointer;

    transition:.2s;
}

button:hover{
    background:rgba(230,230,230,.12);
    border-color:#E6E6E6;
}

@media (max-width:768px){

    .viewer-header{
        flex-direction:column;
        gap:15px;
    }

    .viewer-header h1{
        font-size:1.4rem;
    }

    button{
        width:100%;
        max-width:320px;
    }

}