body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: black;
    
}
#backLink{
    position: fixed;
    top : 20px;
    left:20px;
    color: white;
    font-family: consolas;    
}

#game-container{
    position: relative;
    width: 900px;
    height: 600px;
    flex-shrink: 0;
    cursor: url(cursors/hand.png), pointer;
}

#scene {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hotspot {
    position: absolute;
    cursor: pointer
}
/* .hotspot.nav {
    border: solid red 2px;
}
.hotspot.text{
    border: solid 2px blue;
} */

.hotspot-text {
    position: absolute;
    top: -10px;
    left: 100%;
    color:white;
    font-family: sans-serif;
    font-size: 14px;
    /* white-space: nowrap; */
    width:250px;
    pointer-events: none;
}


/* _____bedroom_______________________________________________ */
#toDesk{
    left : 590px;
    top: 350px;
    width: 230px;
    height: 100px;
    cursor: url(cursors/go.png), pointer;
}

#bedroomToBed{
    left : 0;
    top: 0;
    width: 10%;
    height: 100%;
    cursor: url(cursors/left.png), pointer;
}

#bedroomToCactus{
    left : 17%;
    top: 29%;
    width: 83px;
    height: 120px;
    cursor: url(cursors/look.png), pointer;
}

#bedroomToEntry{
    left : 50%;
    top: 85%;
    width: 50%;
    height: 15%;
    cursor: url(cursors/back.png), pointer;
}

/* _____desk__________________________________________________ */
#deskPicture{
    left: 200px;
    top: 200px;
    width: 50px;
    height: 70px;
    cursor: url(cursors/look.png), pointer;
}

#bookNote{
    left: 400px;
    top: 320px;
    width: 100px;
    height: 110px;
    cursor: url(cursors/look.png), pointer;
}

#deskToBedroom{
    left : 5%;
    top: 85%;
    width: 90%;
    height: 15%;
    cursor: url(cursors/back.png), pointer;
}

/* _____bed___________________________________________________ */
#bedToBedroom{
    left : 90%;
    top: 0;
    width: 10%;
    height: 100%;
    cursor: url(cursors/right.png), pointer;
}

#bedToButterflies{
    left : 22%;
    top: 33%;
    width: 12%;
    height: 15%;
    cursor: url(cursors/look.png), pointer;
}

/* _____butterflies___________________________________________________ */
#butterfliesToBed{
    left : 5%;
    top: 85%;
    width: 90%;
    height: 15%;
    cursor: url(cursors/back.png), pointer;
}

#butterfliesText{
    left : 28%;
    top: 35%;
    width: 10%;
    height: 15%;
    cursor: url(cursors/look.png), pointer;
}

/* _____cactus___________________________________________________ */
#cactusToBedroom{
    left : 0;
    top: 85%;
    width: 100%;
    height: 15%;
    cursor: url(cursors/back.png), pointer;
}


/* _____entry___________________________________________________ */
#entryToBedroom{
    left : 20%;
    top: 85%;
    width: 60%;
    height: 15%;
    cursor: url(cursors/back.png), pointer;
}