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

body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#game {
    width: 960px;
    height: 540px;
    background-color: lightgrey;
    position: relative;
    overflow: hidden;
}

#rooms {
    position: absolute;
    width: 300%;
    height: 100%;
    background-color: #e11034;
    display: flex;
    transform: translateX(0px);
    transition: 500ms;
}

.room {
    flex: 1;
    position: relative;
}

#info{
    position: absolute;
    background-image: url(../img/infosmall.png);
    width: 150px;
    height: 159px;
    top: 50px;
    left: 200px;
    z-index: 10;
    animation: pulse 3s infinite;
    cursor: pointer;
}

@keyframes pulse{
    0%{transform: scale(1);
    }
    50%{transform: scale(1.2);
    }
    100%{
        transform: scale(1);
    }
}

#infoTekst{
    position: absolute;
    width: 200px;
    font-size: 24px;
    left: 400px;
    color: white;
    z-index: 15;
    top: -450px;
    transition: 1s;
}

#close{
cursor: pointer;
}
    
#room3 {
    background-image: url(../img/rsz_kamer-deur.jpg);
    background-size: contain;
    
}
#deur{
    position: absolute;
    background-image: url(../img/deur-escape.png);
    width: 187px;
    height: 374px;
    top: 106px;
    left: 429px;
    z-index: 10;
    font-size: 24px;
    cursor: pointer;
}
#grid{
    position: absolute;
    background-image: url(../img/ironbars.png);
    width: 195px;
    height: 378px;
    top: 100px;
    left: 425px;
    z-index: 5;
    background-position: center top;
    background-repeat: no-repeat;
    transition: 2s;
}
#room2 {
    
    background-image: url(../img/keuken1.jpg);

}
#linkerdeur{
    position: absolute;
    background-image: url(../img/fridgedoor-left.png);
    width: 120px;
    height: 264px;
    top: 80px;
    left: 465px;
    z-index: 10;
    font-size: 24px;
}

#rechterdeur{
    position: absolute;
    background-image: url(../img/fridgedoor-right.png);
    width: 127px;
    height: 267px;
    top: 80px;
    left: 583px;
    z-index: 10;
}

#hangslot{
    position: absolute;
    background-image: url(../img/hangslot.png);
    width: 50px;
    height: 89px;
    top: 315px;
    right: 348px;
    z-index: 15;
    font-size: 24px;
}

#handdoek{
    position: absolute;
    background-image: url(../img/handdoek.png);
    width: 100px;
    height: 100px;
    top: 283px;
    left: 204px;
    z-index: 15;
    font-size: 24px;
    cursor: pointer;
}

#keukenlamp{
    position: absolute;
    background-image: url(../img/light.png);
    width: 150px;
    height: 150px;
    top: -7px;
    right: 82px;
    z-index: 15;
    font-size: 24px;
    cursor: pointer;
}
#room1 {
    background-image: url(../img/slaapkamer.jpg);
    z-index: 15;
}
.nacht{
    position: absolute;
    width: 960px;
    height: 540px;
    background-color: black;
    z-index: 5;     
}

.lichtAan{
    animation: licht 4s forwards;
}

@keyframes licht {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
#lamp{
    position: absolute;
    width: 60px;
    height: 90px;
    color: white;
    top: 200px;
    left: 380px;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    
}

#lamp2{
    position: absolute;
    width: 60px;
    height: 150px;
    color: white;
    top: 200px;
    left: 840px;
    font-size: 24px;
    /*cursor: pointer;*/
    z-index: 10;
    
}
#lamp2Tekst{
    position: absolute;
    width: 200px;
    font-size: 24px;
    left: 600px;
    color: white;
    z-index: 15;
    top: 60px;
    display: none;
    background-color: #e11034;
    padding: 10px;  
}

#lamp2Tekst2{
    position: absolute;
    width: 200px;
    font-size: 24px;
    left: 600px;
    color: white;
    z-index: 15;
    top: 60px;
    display: none;
    background-color: #e11034;
    padding: 10px;  
}

#golfclubs{
    position: absolute;
    background-image: url(../img/rsz-golf.png);
    width: 101px;
    height: 200px;
    bottom: 0px;
    right: -5px;
    z-index: 15;
    font-size: 24px;
}

#handdoekTekst{
    position: absolute;
    width: 200px;
    font-size: 24px;
    left: 160px;
    color: white;
    z-index: 15;
    top: 85px;
    display: none;
    background-color: #e11034;
    padding: 10px;  
}

#gridTekst{
    position: absolute;
    width: 200px;
    font-size: 24px;
    left: 600px;
    color: white;
    z-index: 10;
    top: 60px;
    display: none;
    background-color: #e11034;
    padding: 15px;  
}

#codePaneel{
    position: absolute;
    width: 180px;
    height: 130px;
    color: white;
    top: 132px;
    left: 132px;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
}

#codePaneelTekst{
    position: absolute;
    width: 200px;
    font-size: 24px;
    left: 200px;
    color: white;
    z-index: 25;
    top: 60px;
    display: none;
    background-color: #e11034;
    padding: 10px;  

}

#keukenLampTekst{
    position: absolute;
    width: 200px;
    font-size: 24px;
    left: 545px;
    color: white;
    z-index: 15;
    top: 22px;
    display: none;
    background-color: #e11034;
    padding: 10px;  
}

#golfClubTekst{
    position: absolute;
    width: 200px;
    font-size: 24px;
    left: 700px;
    color: white;
    z-index: 15;
    top: 230px;
    display: none;
    background-color: #e11034;
    padding: 10px;   
}

#mond{
    position: absolute;
    background-color: red;
    width: 15px;
    height: 15px;
    top: 251px;
    left: 588px;
    cursor: pointer;
}

#mondTekst{
    position: absolute;
    width: 200px;
    font-size: 24px;
    left: 700px;
    color: white;
    z-index: 15;
    top: 230px;
    display: none;
    background-color: #e11034;
    padding: 10px;   
}

.knop{
    position: absolute;
    width: 35px;
    height: 35px;
    background-color: green;
    z-index: 20;
}

#knop1{ left:150px; bottom:359px ;}
#knop2{ left:203px; bottom:359px ;}
#knop3{ left:253px; bottom:359px ;}
#knop4{ left:149px; bottom:292px ;}
#knop5{ left:202px; bottom:292px ;}
#knop6{ left:253px; bottom:292px ;}

#steden{
    position: absolute;
    background-image: url(../img/steden.jpg);
    width: 180px;
    height: 350px;
    right: 106px;
    top: -350px;
    transition: 1s;
}

#free{
    position: absolute;
    top: 110px;
    right: 668px;
    font-size: 50px;
    text-align: center;
    z-index: 30;
    display: none;
    color: white;
    background-color: lightgreen;
}

/*
[id$=Tekst] {
    pointer-events: none;
    user-select: none;
}
*/

#btn-left, #btn-right {
    position: absolute;
    right: 0;
    cursor: pointer;
    font-size: 60px;
}

#btn-left {
    right: auto;
    left: 0;
}