html,
body{
    margin:0;
    width:100%;
    height:100%;
    background:#000;
    overflow:hidden;

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

.archive-container{
    position:relative;
    display:inline-block;
}

.scene-image{
    display:block;

    max-width:100vw;
    max-height:100vh;

    width:auto;
    height:auto;
}

/* Marker */

.lore-marker{

    position:absolute;

    left:220px;
    top:622px;

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

    font-size:42px;

    color:#ffd76a;

    cursor:pointer;

    z-index:9999;

    animation:pulse 2.5s infinite;

    text-shadow:
        0 0 10px #ffd76a,
        0 0 20px #ffd76a,
        0 0 35px #ffd76a;
}

.lore-marker:hover{
    transform:translate(-50%,-50%) scale(1.3);
}

/* Overlay */

.archive-overlay{

    display:none;

    position:absolute;

    left:50%;
    top:50%;

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

    width:60%;

    padding:30px;

    background:rgba(15,15,15,0.95);

    border:2px solid #b79a56;

    border-radius:12px;

    color:#f0e6c0;

    text-align:center;

    z-index:9998;
}

.archive-overlay.active{
    display:block;
}

.archive-overlay h2{
    margin-top:0;
    color:#d8c08a;
}

.archive-overlay ul{
    list-style:none;
    padding:0;
}

.archive-overlay li{
    margin:12px 0;
}

.archive-overlay a{
    color:#f0e6c0;
    text-decoration:none;
}

.archive-overlay a:hover{
    color:#ffd76a;
}

/* Animation */

@keyframes pulse{

    0%{
        opacity:0.7;
        transform:translate(-50%,-50%) scale(1);
    }

    50%{
        opacity:1;
        transform:translate(-50%,-50%) scale(1.15);
    }

    100%{
        opacity:0.7;
        transform:translate(-50%,-50%) scale(1);
    }
}