/* ==========================================
   RESET
========================================== */

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

body{
    overflow:hidden;
    background:#0b0b0b;
}

/* ==========================================
   IMAGES
========================================== */

img{
    display:block;
}


/* ==========================================
   MAIN STAGE
========================================== */

#stage{

    position:fixed;

    width:1920px;
    height:1080px;

    left:50%;
    top:50%;

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

    overflow:hidden;

}


/* ==========================================
   SCENES
========================================== */

#closedScene,
#animationScene,
#openScene{

    position:absolute;

    inset:0;

}


/* ==========================================
   INITIAL VISIBILITY
========================================== */

#closedScene{
    display:block;
}

#animationScene,
#openScene{
    display:none;
}


/* ==========================================
   FULL SCENE IMAGES
========================================== */

#firstBackground,
#lastBackground,
#animationFrame{

    position:absolute;

    left:0;
    top:0;

    width:1920px;
    height:1080px;

}


/* ==========================================
   INTERACTIVE OBJECTS
========================================== */

#frontDoor,
#doorKnob,
#candle,
#pumpkin{

    position:absolute;

    cursor:pointer;

    user-select:none;
    -webkit-user-drag:none;
    
    }
/* ==========================================
   CLOSED SCENE POSITIONS
========================================== */

#frontDoor{
    position:absolute;
    left:826.339px;
    top:164.072px;
    width:350px;
}


#doorKnob{
    position:absolute;
    left:1077.2px;
    top:536.491px;
    width:65px;
}

/* ==========================================
   OPEN SCENE POSITIONS
========================================== */


#candle{

    position:absolute;

    left:1051px;

    top:261px;

    width:75px;

}


#pumpkin{

    position:absolute;

    left:1152px;

    top:755px;

    width:200px;

}

@media (max-width:768px){

    #stage{

        position:relative;

        left:-15px;

    }

}