body,
html {
    position: fixed;
    width: 100vw;
}

body{
    background-color: white;   
    pointer-events:none; 
}

#scene{
    position: relative;
    width: 960px;
    height: 600px;
    background-image: url(../images/background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0 auto;
    border: 1px solid black;
    pointer-events: none;
    overflow: hidden;
}

.heart_full, .heart_l, .heart_r{
    width: 71px;
    height: 59px;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 207px; 
    transform: rotate(0);
}
.heart_full{
    background-image: url(../images/heart_143_118.png);
}
.heart_l{
    background-image: url(../images/heart_143_118_l.png);
}
.heart_r{
    background-image: url(../images/heart_143_118_r.png);
}
.pos0{
    left: 545px;  
}
.pos1{
    left: 628px;  
}
.pos2{
    left: 711px;  
}
.pos3{
    left: 794px;  
}
.pos4{
    left: 885px;  
}
.rot_right{
    transform: rotate(+30deg);   
}
.rot_left{
    transform: rotate(-30deg);   
}


#figureslayer{
    position: absolute;
    width: 960px;
    height: 600px;
    margin: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 10;
}

#playfield{
    position: absolute;
    width: 960px;
    height: 600px;
    background-image: url(../images/background_fg.png);
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 20;
}

#the_device{
    width: 274px;
    height: 371px;
    position: absolute;
    left: 960px;
    top: 170px;
    background-image: url(../images/L200.png);
    pointer-events: none;
}

.glasCylinder{
    width: 40px;
    height: 60px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events:all; 
    background-image: url(../images/glas_cylinder.png);
}
.glasCylinder.mounted:hover .notake{
    background-image: url(../images/notake.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.notake{
    width: 40px;
    height: 60px;
    position: absolute;
    pointer-events: none;
}
.flower{
    width: 40px;
    height: 60px;
    position: absolute;
    pointer-events: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.flower-in-bulb{
    width: 40px;
    height: 60px;
    position: absolute;
    left: 3px;
    top: -15px;
    pointer-events: none;
}

.timer{
    width: 40px;
    height: 5px;
    background-color: red;
    position: absolute;
    bottom: -7px;
    left: 0;
}

.bgtimer{
    width: 42px;
    height: 7px;
    background-color: black;
    position: absolute;
    bottom: -8px;
    left: -1px;
}

.fig_timer{
    width: 40px;
    height: 5px;
    background-color: #ddd;
    position: absolute;
    bottom: -7px;
    left: 0;
}

.fig_bgtimer{
    width: 42px;
    height: 7px;
    background-color: #777;
    position: absolute;
    bottom: -8px;
    left: -1px;
}

.icy{
    width: 40px;
    height: 60px;
    position: absolute;
    background-image: url(../images/icy.png);
    pointer-events: none;
}

.figur{
    width: 155px;
    height: 200px;
    position: absolute;
    top: 86px;
    left: 960px;
}
.emotion{
    width: 155px;
    height: 200px;
    position: absolute;
}

.bulb{
    width: 46px;
    height: 66px;
    position: absolute;
    top: 70px;
    background-image: url(../images/bulb.png);
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}

.flower_id0{
    background-image: url(../images/flower_0.png);
}
.flower_id1{
    background-image: url(../images/flower_1.png);
}
.flower_id2{
    background-image: url(../images/flower_2.png);
}
.flower_id3{
    background-image: url(../images/flower_3.png);
}
.flower_id4{
    background-image: url(../images/flower_4.png);
}
.flower_id5{
    background-image: url(../images/flower_5.png);
}

.man_id0{
    background-image: url(../images/fig_m0.png);
}
.man_id1{
    background-image: url(../images/fig_m1.png);
}
.man_id2{
    background-image: url(../images/fig_m2.png);
}
.man_id3{
    background-image: url(../images/fig_m3.png);
}
.man_id4{
    background-image: url(../images/fig_m4.png);
}
.man_id5{
    background-image: url(../images/fig_m5.png);
}

.man_id0_happy{background-image: url(../images/fig_m0_happy.png);}
.man_id0_angry{background-image: url(../images/fig_m0_angry.png);}
.man_id1_happy{background-image: url(../images/fig_m1_happy.png);}
.man_id1_angry{background-image: url(../images/fig_m1_angry.png);}
.man_id2_happy{background-image: url(../images/fig_m2_happy.png);}
.man_id2_angry{background-image: url(../images/fig_m2_angry.png);}
.man_id3_happy{background-image: url(../images/fig_m3_happy.png);}
.man_id3_angry{background-image: url(../images/fig_m3_angry.png);}
.man_id4_happy{background-image: url(../images/fig_m4_happy.png);}
.man_id4_angry{background-image: url(../images/fig_m4_angry.png);}
.man_id5_happy{background-image: url(../images/fig_m5_happy.png);}
.man_id5_angry{background-image: url(../images/fig_m5_angry.png);}






.woman_id0{
    background-image: url(../images/fig_w0.png);
}
.woman_id1{
    background-image: url(../images/fig_w1.png);
}
.woman_id2{
    background-image: url(../images/fig_w2.png);
}
.woman_id3{
    background-image: url(../images/fig_w3.png);
}
.woman_id4{
    background-image: url(../images/fig_w4.png);
}
.woman_id5{
    background-image: url(../images/fig_w5.png);
}

.woman_id0_happy{background-image: url(../images/fig_w0_happy.png);}
.woman_id0_angry{background-image: url(../images/fig_w0_angry.png);}
.woman_id1_happy{background-image: url(../images/fig_w1_happy.png);}
.woman_id1_angry{background-image: url(../images/fig_w1_angry.png);}
.woman_id2_happy{background-image: url(../images/fig_w2_happy.png);}
.woman_id2_angry{background-image: url(../images/fig_w2_angry.png);}
.woman_id3_happy{background-image: url(../images/fig_w3_happy.png);}
.woman_id3_angry{background-image: url(../images/fig_w3_angry.png);}
.woman_id4_happy{background-image: url(../images/fig_w4_happy.png);}
.woman_id4_angry{background-image: url(../images/fig_w4_angry.png);}
.woman_id5_happy{background-image: url(../images/fig_w5_happy.png);}
.woman_id5_angry{background-image: url(../images/fig_w5_angry.png);}