* {
    margin: 0;
    padding : 0;
    box-sizing: border-box;
}
@font-face {
    font-family: 'segoe_printregular';
    src: url('../font/segoepr-webfont.woff2') format('woff2'),
         url('../font/segoepr-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'segoe_scriptregular';
    src: url('../font/segoesc-webfont.woff2') format('woff2'),
         url('../font/segoesc-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body {
    min-height: 100vh;
    display: grid;
    place-items: center;
     font-family: 'segoe_printregular';
  
}

#game {
    width: 960px;
    height: 540px;
    background-color: lightgrey;
    position: relative;
    overflow: hidden;
    border: 1px solid black;
    
}
.score {
    font-size: 20px;
    color: black;
    position: absolute;
     top: 0px;
     left: 50%;
    width: min-content;
    min-height: min-content; 
    padding-top: 20px;
    text-align: center;
    border: 1px solid black;
}
#timer{
    width: 100px;
    height: 50px;
    border-top: 1px solid #339933;
    background: linear-gradient(to bottom, rgba(210,255,82,1) 0%, rgba(110,163,60,1) 100%);
    position: absolute;
    z-index: 10;
    text-align: center;
    top: 50px ;
    right: 100px;
    border-radius: 15px;
    box-shadow:  0px 4px 3px rgba(0,0,0,0.4),
    0px 8px 13px rgba(0,0,0,0.1),
    0px 18px 23px rgba(0,0,0,0.1);
    text-shadow: rgba(0,0,0,.4) 0 1px 0;
    color: white;
    font-size: 24px;
    vertical-align: middle;

}
/*.countdown {
    font-size: 20px;
    color: black;
    position: absolute;
    top: 0px;
    left: 30%;
    padding: 20px;
    min-width: 100PX;
    text-align: center;
    text-transform: uppercase;
    
}*/
#btn-left, #btn-right {
    position: absolute;
    cursor: pointer;
    font-size: 60px;
    top: 250px;
    opacity: 0;
}

#btn-left img, #btn-right img{
    width: 40px;
    height: 40px;
    
}
#btn-left {
    left: 0;
    
    
}
#btn-right {
    right: 0;
    
}
.begin{
    position: absolute;
    bottom: 45%;
    left: 65%;
    transform: translate(-50%,0);
    z-index: 100;
}
#skipIntroBtn{
    position: absolute;
    bottom: 5%;
    right: 10%;
    font-size: 15px;
}

.button-style {
    color: white;
    padding: 20px 30px;
    border-radius: 10px;
    font-size: 30px;
    cursor: pointer;
    border: none; 
    text-transform: uppercase;
    border: 3px  rgb(104,169,44) solid ;
    background-image:  linear-gradient(to bottom, rgba(210,255,82,1) 0%, rgb(110, 163, 60.1) 100%);
}

#play{
    position: absolute;
    bottom: 50%;
    left: 65%;
    transform: translate(-50%,0);
    background-image:  linear-gradient(to bottom, rgba(210,255,82,1) 0%, rgba(110,163,60,1) 100%);
    color: white;
    padding: 20px 50px;
    border-radius: 10px;
    z-index: 100;
    cursor: pointer;
    border: none; 
    text-transform: uppercase;
    border: 3px  rgb(104,169,44) solid ;
    display: none;
}
/* --------------------------- INVENTORY --------------------------------------*/
#inventory {
    position: absolute;
    
    width: 400px;
    min-height: 60px;
    display: flex;
    border-top: 1px solid #339933;
    background: #81b03d;
    background: linear-gradient(to bottom, rgba(210,255,82,1) 0%, rgba(110,163,60,1) 100%);
    padding: 10px 10px;
    border-radius: 15px;
    box-shadow:  0px 4px 3px rgba(0,0,0,0.4),
    0px 8px 13px rgba(0,0,0,0.1),
    0px 18px 23px rgba(0,0,0,0.1);
    text-shadow: rgba(0,0,0,.4) 0 1px 0;
    color: white;
    font-size: 24px;
    font-family: Georgia, serif;
    text-decoration: none;
    vertical-align: middle;
        }
    

.inventory-item {
    width: 80px;
    height: 60px;
    background-color: white;
    cursor: pointer;
    background-size: contain;
    border-radius: 5PX;
    border: #339933 solid 2PX;
   
}

#room1 #inventory{
    left: 300px;
    top: 40px;
}

#room2 #inventory{
    left: 340px;
   top: 40px;
}

#room3 #inventory{
    left: 340px;
    top:10px;
}

/*------------------------------------ JONGE-----------------------------------------*/

.jongen{
    
    position: absolute;
    height: auto;
    width: 180px;
    top: 100px;
    left: 350px;
    
}
.jongen img{
    height: 100%;
    width: 100%;
}
.ogen{
    position: absolute;
    height: 68px;
    width: 86px;
    top: 30px;
    left: 45px;

}
.monden{
    position: absolute;
    height: 17px;
    width: 54px;
    top: 100px;
    left: 60px;
}

.active1 #mond1 img {
    animation: mond1animatie 8.5s 2 forwards;

}
@keyframes mond1animatie {
    0% {
        transform: scale(1);
       
    }
    3% {
        transform: scale(0.9);
       
    }
    4%{
        transform: scale(1.1);
       
    }
    6%{
        transform: scale(0.7);
       
    }
    7%{
        transform: scale(1);
         
    }
    8%{
        transform: scale(0.8);
    }
    10% {
        transform: scale(1.2); 
        
    }
    11% {
        transform: scale(0.9);
       
    }
    12% {
        transform: scale(1.2); 
        
    }
    13% {
        transform: scale(0.9);
    }   
    14%{
        transform: scale(1);
    }
    17% {
        transform: scale(0.8); 
        
    }
    19% {
        transform: scale(1.1);
       
    }
    21% {
        transform: scale(0.7);
       
    }
    23% {
        transform: scale(0.9);
       
    }
    25% {
        transform: scale(0.8);
       
    }
    27% {
        transform: scale(1);
       
    }
    29% {
        transform: scale(0.8);
       
    }
    31%{transform: scale(1.2 );
        
    }
    33% {
        transform: scale(1);
       
    }
    35%{
        transform: scale(1.2);
       
    }
    37%{
        transform: scale(0.8);
       
    }
    38% {
        transform: scale(1.1);
       
    }
    40% {
        transform: scale(1);
       
    }
    42% {
        transform: scale(1.2);
       
    }
    43% {
        transform: scale(0.9);
        
    }
    46% {
        transform: scale(1.2);
       
    }
    49% {
        transform: scale(1);
       
    }
    51%{
        transform: scale(1.2);
       
    }
    53%{
        transform: scale(0.8);
       
    }
    54% {
        transform: scale(1.1);
       
    }
    56% {
        transform: scale(1);
       
    }
    
    58%{
        transform: scale(1.2);
       
    }
    61% {
        transform: scale(1.1);
       
    }
    62% {
        transform: scale(1.3);
       
    }
    64%{
        transform: scale(0.9);
       
    }
    65% {
        transform: scale(1.1);
       
    }
    66% {
        transform: scale(1);
       
    }
    68% {
        transform: scale(1.2);
       
    }

    70% {
        transform: scale(0.7);
       
    }
    72% {
        transform: scale(1.1);
        
    }
    75% {
        transform: scale(0.8);
       
    }
    76% {
        transform: scale(1);
    }
    79% {
        transform: scale(0.8);
    }
    81% {
        transform: scale(1.2);
    }
    83%{
        transform: scale(1);
    }
    84% {
        transform: scale(1.15);
    
    }
    87% {
        transform: scale(0.95);
    }
    90% {
        transform: scale(1.18);
    }
    93% {
        transform: scale(1);
    }
    96% {
        transform: scale(1.1);
    }
    99%{
        transform: scale(1);
        
       
    }
    100% {
        transform: scale(1.1);
        
    }
}
.active2 #mond5 img {
    animation: mond5animatie 4s 2 forwards;

}  
@keyframes mond5animatie {
    0% {
        transform: scale(1);
       
    }
    3% {
        transform: scale(0.9);
       
    }
    4%{
        transform: scale(1.1);
       
    }
    6%{
        transform: scale(0.7);
       
    }
    7%{
        transform: scale(1);
         
    }
    8%{
        transform: scale(0.8);
    }
    10% {
        transform: scale(1.2); 
        
    }
    11% {
        transform: scale(0.9);
       
    }
    12% {
        transform: scale(1.2); 
        
    }
    13% {
        transform: scale(0.9);
    }   
    14%{
        transform: scale(1);
    }
    17% {
        transform: scale(0.8); 
        
    }
    19% {
        transform: scale(1.1);
       
    }
    21% {
        transform: scale(0.7);
       
    }
    23% {
        transform: scale(0.9);
       
    }
    25% {
        transform: scale(0.8);
       
    }
    27% {
        transform: scale(1);
       
    }
    29% {
        transform: scale(0.8);
       
    }
    31%{transform: scale(1.2 );
        
    }
    33% {
        transform: scale(1);
       
    }
    35%{
        transform: scale(1.2);
       
    }
    37%{
        transform: scale(0.8);
       
    }
    38% {
        transform: scale(1.1);
       
    }
    40% {
        transform: scale(1);
       
    }
    42% {
        transform: scale(1.2);
       
    }
    43% {
        transform: scale(0.9);
        
    }
    46% {
        transform: scale(1.2);
       
    }
    49% {
        transform: scale(1);
       
    }
    51%{
        transform: scale(1.2);
       
    }
    53%{
        transform: scale(0.8);
       
    }
    54% {
        transform: scale(1.1);
       
    }
    56% {
        transform: scale(1);
       
    }
    
    58%{
        transform: scale(1.2);
       
    }
    61% {
        transform: scale(1.1);
       
    }
    62% {
        transform: scale(1.3);
       
    }
    64%{
        transform: scale(0.9);
       
    }
    65% {
        transform: scale(1.1);
       
    }
    66% {
        transform: scale(1);
       
    }
    68% {
        transform: scale(1.2);
       
    }

    70% {
        transform: scale(0.7);
       
    }
    72% {
        transform: scale(1.1);
        
    }
    75% {
        transform: scale(0.8);
       
    }
    76% {
        transform: scale(1);
    }
    79% {
        transform: scale(0.8);
    }
    81% {
        transform: scale(1.2);
    }
    83%{
        transform: scale(1);
    }
    84% {
        transform: scale(1.15);
    
    }
    87% {
        transform: scale(0.95);
    }
    90% {
        transform: scale(1.18);
    }
    93% {
        transform: scale(1);
    }
    96% {
        transform: scale(1.1);
    }
    99%{
        transform: scale(1);
        
       
    }
    100% {
        transform: scale(1.1);
        
    }
}    


.armen {
    position: absolute;
    height: auto;
    width: 55px;

}
#armL{
    top: 123px;
    left: 15px;
    
}
#armR{
    top: 122px;
    left: 108px;
}
.text {
    width: 300px;
    min-height: auto;
    background-color: white;
    border: 5px solid #ad6d6d;
    border-radius: 10px;
    position: relative;
    padding: 10px;
    background-color: #f3f1ef;
    display: none;

}
.text p {
    display: block;
}
#text1{
    top: 40px;
    left: 100px;
}
#text2{
    top: 80px;
    left: 550px;
}
#text3{
    top: 110px;
    left: 520px;
}

#boekentas-leeg{
    
    top: 320px;
    left: 230px;    

}
#boekentas-leeg img{
    width: 170px;
   
   
}
#boekentas-vol {
    top: 320px;
    left: 230px;  
}
#boekentas-vol img{
    width: 170px;
}
/* ----------------------------------- ROOMS ----------------------------------------*/
#rooms {
    position: absolute;
    width: 500%;
    height: 100%;
    background-color: pink;
    display: flex;
    transform: translateX(0px);
    transition: 500ms;
}
.room {
    flex: 1;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
}
/* ------------------------------ HALLs ------------------------------------------------*/

#hall1{
    background-image: url(../img/Ingang_1.svg);
}

.zoom-in {
    animation: closeUP 5s ease-out both;
}
    
@keyframes closeUP {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.30);
    }
} 



#hall2{
background-image: url(../img/Ingang-close-up-100.jpg);
  
    height: 800px;
    width: 1029px;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    top: -96px;
    left: -34px;
    z-index: 2;
    display: none;
   /* overflow: hidden;*/
}
#hall3{
    background-image: url(../img/Ingang_1.svg);

}


.blank{
position: absolute;
height: auto;
display: block;
z-index: 2;
}
/* ------------------------------ ROOM 1- LIVING ROOM ---------------------------------------------*/
#room1 {
    background-image: url(../img/living-room.svg);
}
#doosDicht{
    width: 58px;
    bottom: 41px;
    left: 177px;
}
#kat{
    width: 80px;
    top: 375px;
    left: 87px;
}

    
#doosOpen{
    width: 58px;
    bottom: 41px;
    left: 177px;
    z-index: 1;
    

}
#pootlod1{
    width: 7px;
    transform: rotate(90deg);
    bottom: 25px;
    left: 200px;
    opacity: 0;
}
#noteboek{
    width: 70px;
    bottom: 80px;
    left: 90px;
    display: none;
    
    
}
#meetlaatRond{
    width: 70px;
    bottom: 90px;
    right: 120px;
    opacity: 0;
}
#sacapuntas{
    width: 30px;
    bottom: 160px;
    right: 490px;
    opacity: 0;
}
#penZwart{
    width: 10px;
    bottom: 145px;
    right: 250px;
    transform: rotate(90deg);
    opacity: 0;
}




/* ------------------------------- ROOM 2 - SLAAPKAMER ---------------------------------------------*/
#room2 {
    background-image: url(../img/slaapkamer-100.jpg);
}
#SlaapK_kussen1{
    width: 70px;
    top: 274px;
    left: 602px;
}
#SlaapK_kussen2{
    width: 80px;
    bottom: 175px;
    left: 710px;
}
#SlaapK_plant{
    width: 20px;
    bottom: 200px;
    left: 220px;
}
#SlaapK_robot{
    width: 100px;
    bottom: 40px;
    right: 20px;
}
#SlaapK_speel{
    width: 40px;
    top: 221px;
    left: 353px;
}
#SlaapK_zebra{
    width: 120px;
    bottom: 50px;
    left: 460px;
}

#boeken{
    width: 80px;
    bottom: 50px;
    left: 480px;
    display: none;
}

#meetlaatgroen{
    width: 40px;
    top: 221px;
    left: 353px;
    display: none;
}

#USB{
    width: 20px;
    bottom: 200px;
    left: 220px;
    display: none;
}

#penblauw{
    width: 15px;
    bottom: 175px;
    left: 730px;
    opacity: 0;
}
#schaar{
    width: 40px;
    bottom: 40px;
    right: 40px;
    display: none;
}



/* -------------------------------- ROOM 3 - KEUKEN----------------------------------------------*/
#room3 {
    background-image: url(../img/Keuken_1-100.jpg);
      /*background-image: url(..)*/
}
#keuken_deur{
    width: 86px;
    top: 22px;
    left: 78px;
    opacity: 0
}
#keuken_mes{
    width: 8px;
    top: 290px;
    left: 160px;
    opacity: 0;
}
#keuken_deksel{
    width: 43px;
    top: 278px;
    left: 498px;
    display: none;
}
#keuken_potO{
    width: 60px;
    top: 286px;
    left: 490px;
    display: none;
}
#keuken_potD{
    width: 60px;
    top: 278px;
    left: 490px;  
}
#keuken_plank{
    width: 55px;
    top: 271px;
    left: 328px;
    transform: rotate(270deg);
    z-index: 10;
}
#keuken_taburet{
    width: 80px;
    top: 410px;
    left: 180px;
}
#keuken_kom{
    width: 54px;
    top: 256px;
    left: 690px;  
}
#koek2{
    width: 35px;
    bottom: 150px;
    right: 150px;
    display: none;

}
#divkoek2{
    height: 50px;
    width: 35px;
    bottom: 150px;
    right: 150px;
}
#brooddoos{
    width: 50px;
    top: 60px;
    left: 160px;
    display: none;
}
#melk{
    width: 30px;
    top: 278px;
    left: 500px;
    display: none;
}
#drinkfles{
    width: 30px;
    top: 250px;
    left: 330px;
    display: none;

}
#appel{
    width: 30px;
    top: 250px;
    right: 220px;
    display: none;
}
.active3 #mond1 img {
    animation: mond3animatie 5s forwards;

}
@keyframes mond3animatie {
    0% {
        transform: scale(1);
       
    }
    3% {
        transform: scale(0.9);
       
    }
    4%{
        transform: scale(1.1);
       
    }
    6%{
        transform: scale(0.7);
       
    }
    7%{
        transform: scale(1);
         
    }
    8%{
        transform: scale(0.8);
    }
    10% {
        transform: scale(1.2); 
        
    }
    11% {
        transform: scale(0.9);
       
    }
    12% {
        transform: scale(1.2); 
        
    }
    13% {
        transform: scale(0.9);
    }   
    14%{
        transform: scale(1);
    }
    17% {
        transform: scale(0.8); 
        
    }
    19% {
        transform: scale(1.1);
       
    }
    21% {
        transform: scale(0.7);
       
    }
    23% {
        transform: scale(0.9);
       
    }
    25% {
        transform: scale(0.8);
       
    }
    27% {
        transform: scale(1);
       
    }
    29% {
        transform: scale(0.8);
       
    }
    31%{transform: scale(1.2 );
        
    }
    33% {
        transform: scale(1);
       
    }
    35%{
        transform: scale(1.2);
       
    }
    37%{
        transform: scale(0.8);
       
    }
    38% {
        transform: scale(1.1);
       
    }
    40% {
        transform: scale(1);
       
    }
    42% {
        transform: scale(1.2);
       
    }
    43% {
        transform: scale(0.9);
        
    }
    46% {
        transform: scale(1.2);
       
    }
    49% {
        transform: scale(1);
       
    }
    51%{
        transform: scale(1.2);
       
    }
    53%{
        transform: scale(0.8);
       
    }
    54% {
        transform: scale(1.1);
       
    }
    56% {
        transform: scale(1);
       
    }
    
    58%{
        transform: scale(1.2);
       
    }
    61% {
        transform: scale(1.1);
       
    }
    62% {
        transform: scale(1.3);
       
    }
    64%{
        transform: scale(0.9);
       
    }
    65% {
        transform: scale(1.1);
       
    }
    66% {
        transform: scale(1);
       
    }
    68% {
        transform: scale(1.2);
       
    }

    70% {
        transform: scale(0.7);
       
    }
    72% {
        transform: scale(1.1);
        
    }
    75% {
        transform: scale(0.8);
       
    }
    76% {
        transform: scale(1);
    }
    79% {
        transform: scale(0.8);
    }
    81% {
        transform: scale(1.2);
    }
    83%{
        transform: scale(1);
    }
    84% {
        transform: scale(1.15);
    
    }
    87% {
        transform: scale(0.95);
    }
    90% {
        transform: scale(1.18);
    }
    93% {
        transform: scale(1);
    }
    96% {
        transform: scale(1.1);
    }
    99%{
        transform: scale(1);
        
       
    }
    100% {
        transform: scale(1.1);
        
    }
}