body{
    margin:0;
    overflow:hidden;
    background:black;
}
#chamber{

    position:relative;

    aspect-ratio:1148 / 1369;

    height:100vh;

    margin:auto;

}
/* Background */

#background{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:contain;

}

    /* Floating animation */

@keyframes float {
    0%   { transform: translate(-50%, -50%) translateY(0px); }
    50%  { transform: translate(-50%, -50%) translateY(-15px); }
    100% { transform: translate(-50%, -50%) translateY(0px); }
}

@keyframes pulse {

    0%   { scale:1; }

    50%  { scale:1.15; }

    100% { scale:1; }

}
#dice{

    position:absolute;

    top:50%;
    left:49%;

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

    width:220px;

    z-index:10;

    animation: float 4s ease-in-out infinite;

    cursor:pointer;

    transition:filter .2s ease;

}

#dice:hover{

    filter:
        brightness(1.08)
        drop-shadow(0 0 8px #c084ff)
        drop-shadow(0 0 18px #9333ea);

}

    #result{

    position:absolute;

    top:80%;
    left:49%;

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

    font-size:64px;

    color:white;

    font-weight:bold;

    text-shadow:
        0 0 10px #c084ff,
        0 0 20px #c084ff;

    font-family:Arial, sans-serif;
}
   

#effects{

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:2;


}
.particle{

    position:absolute;

    width:8px;
    height:8px;

    border-radius:50%;

    background:#d8b4fe;

    box-shadow:
        0 0 8px #ffffff,
        0 0 16px #c084ff,
        0 0 24px #a855f7;

    pointer-events:none;

    animation: magicRise 5s linear forwards;

}

#title{

    position:absolute;

    left:1%;
    top:-6%;

    width:95%;

    z-index:30;

    pointer-events:none;

}

#magazine{

    position:absolute;

left:-15%;
top: 0%;
    width:48%;

    z-index:31;

    pointer-events:none;

}
#leftCandles{
    position:absolute;
    left:0%;
    top:52%;
    width:8%;
    z-index:4;
    pointer-events:none;
}

#rightCandles{
    position:absolute;
    left:83%;
    top:44%;
    width:11%;
    z-index:4;
    pointer-events:none;
}
#raven{

    position:absolute;

    width:30%;

    left:63%;

    top:25.7%;

    z-index:3;

    pointer-events:auto;

}
#bookshelf{

    position:absolute;

    width:25%;

    left:9%;

    top:15%;

    z-index:2;

    pointer-events:none;

}
@keyframes wispFloat{

    0%{
        transform:translateY(0px) rotate(0deg);
    }

    50%{
        transform:translateY(-18px) rotate(-3deg);
    }

    100%{
        transform:translateY(0px) rotate(0deg);
    }

}   /* <-- ADD THIS */

@keyframes wispFade{

    0%{
        opacity:.45;
    }

    50%{
        opacity:.9;
    }

    100%{
        opacity:.45;
    }

}
@keyframes magicRise{

    0%{
        transform:translate(0px,0px) scale(.4);
        opacity:0;
    }

    15%{
        opacity:1;
    }

    35%{
        transform:translate(-6px,-70px) scale(.8);
    }

    65%{
        transform:translate(8px,-160px) scale(1);
    }

    100%{
        transform:translate(-4px,-260px) scale(.3);
        opacity:0;
    }

}
@keyframes flameFlicker{

    0%{
        transform:scale(1) rotate(-2deg);
        opacity:.95;
        filter:brightness(1);
    }

    25%{
        transform:scale(.95) rotate(1deg);
        opacity:.85;
        filter:brightness(.9);
    }

    50%{
        transform:scale(1.08) rotate(-1deg);
        opacity:1;
        filter:brightness(1.15);
    }

    75%{
        transform:scale(.98) rotate(2deg);
        opacity:.9;
        filter:brightness(1);
    }

    100%{
        transform:scale(1) rotate(-2deg);
        opacity:.95;
        filter:brightness(1);
    }

}
#leftFlame{

    position:absolute;

     left:2%;
    top:51.1%;

    width:3.5%;


    z-index:5;

    transform-origin:center bottom;

    animation:flameFlicker .45s infinite alternate;

    pointer-events:none;

}

#rightFlame{

    position:absolute;

    left:86.9%;
    top:44%;

    width:3.5%;

    z-index:5;

    transform-origin:center bottom;

    animation:flameFlicker .52s infinite alternate;

    pointer-events:none;

}
#centerFlame{

    position:absolute;

    left:70%;
    
    top:25%;

    width:2%;


    z-index:5;

    transform-origin:center bottom;

    animation:flameFlicker .62s infinite alternate;

    pointer-events:none;

}
/*
#wisp1{

    position:absolute;

    width:140px;

    left:55%;
    top:46%;

    z-index:8;

    pointer-events:none;

    opacity:.7;

    animation:
        wispFloat 6s ease-in-out infinite,
        wispFade 5s ease-in-out infinite;

}*/