/* Page Layout */

body{
    position: relative;
}

.pageConteiner{
    pointer-events: none;
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;

    width: 100vw;
    height: 100vh;
    
}
  
  
.roomContainer{
    background-color: #b3c1b4;
    pointer-events: none;
    position: relative;
  
    width: 100vw;
    height: 100vh;

    box-sizing: border-box;
}
  
  
  
.itemFrame{
    
    pointer-events: none;
    width: 100%;
    height: 150%;
    
    position: absolute;
    z-index: 1;
    
    bottom: -12%;
    right: -3%;
    
    display: flex;
    
    justify-content: end;
    align-items: end;
    
    box-sizing: border-box;
}

.itemFrameLicht{
    
    pointer-events: none;
    width: 100%;
    height: 150%;
    
    position: absolute;
    z-index: 20;
    
    bottom: -12%;
    right: -3%;
    
    display: flex;
    
    justify-content: end;
    align-items: end;
    
    box-sizing: border-box;
}

.itemFrameAboveLight{
    
    pointer-events: none;
    width: 100%;
    height: 150%;
    
    position: absolute;
    z-index: 25;
    
    bottom: -12%;
    right: -3%;
    
    display: flex;
    
    justify-content: end;
    align-items: end;
    
    box-sizing: border-box;
}

.itemFrameChild{
    background-color: rgba(127, 255, 212, 0);
    pointer-events: none;
    position: relative;
    height: 100%;
    object-position: right bottom;
    aspect-ratio: 3566/1968;
}

.deko{
    background-color: rgba(127, 255, 212, 0);
    pointer-events: none;
    position: relative;
    height: 100%;
    object-position: right bottom;
    aspect-ratio: 3566/1968;
}

@media screen and (min-width: 1700px) {
    .itemFrame{
        height: 125%;
        
        bottom: -5%;
        right: -1%;
        
      }

    .itemFrameLicht{
        height: 125%;
        
        bottom: -5%;
        right: -1%;
        
      }

    .itemFrameAboveLight{
        height: 125%;
        
        bottom: -5%;
        right: -1%;
        
      }

}

/* Raum Dekorationen */
  
#sky img{

    height: 60%;

    right: 50%;
    bottom: 15%;
}

#background img{

    height: 100%;
    
    object-position: right bottom;
  }

#hängeTöpfe img{
  
    height: 100%;
    
    object-position: right bottom;
  }


.deko img{
    position: absolute;
}

#schreibtischDeko img{
    aspect-ratio: 1435/503;

    height: 22%;

    right: 13.3%;
    bottom: 23.7%;
}

#regalDeko img{
    aspect-ratio: 1463/833;

    height: 36%;

    right: 14.2%;
    bottom: 40.5%;
}



/* Lichterkettte */


#lichterkette_An img{
    aspect-ratio: 1463/833;

    height: 36%;

    right: 14.2%;
    bottom: 40.5%;
}



#lichterkette img{
    aspect-ratio: 1463/833;
    height: 36%;

    right: 14.2%;
    bottom: 40.5%;
}

#schreibtischStuhl img{
    right: 29%;
    bottom: -2%;
    
    height: 37%;
    aspect-ratio: 521/762;
}



/* Uhr */

#clock{
    pointer-events: all;
    cursor:pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    z-index: 5;

    aspect-ratio: 550/400;

    height: 10%;
    
    right: 25.8%;
    bottom: 33%;

    mix-blend-mode: screen;

    font-size: 3vw;

    color: var(--White);
}

#clockII{
    pointer-events:all;
    cursor:pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    z-index: 4;

    aspect-ratio: 550/400;

    height: 10%;
    
    right: 25.8%;
    bottom: 33%;

    mix-blend-mode: screen;

    font-size: 3vw;

    color: var(--White);
}

#escapeMessage{
    visibility: hidden;

    border-radius: 4px;

    padding: 4px 8px;
    position: absolute;
    z-index: 45;
    top: 40px;
    right: 33%;

    opacity: 0.8;

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

    font-family: LibreFranklin;
    font-size: 1.7rem;


    background-color: rgba(137, 129, 145, 0.82);
}