html, body{
margin:0;
padding:0;
height:100%;
overflow:hidden;
}

body{
background-image:url("https://64.media.tumblr.com/50d6704005da88f59b7f12c15c6cc7c6/3bfdebfa702817bc-ae/s1280x1920/0f366aff4e3ecccc1f5f260f71f30149eb65b56a.pnj");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
}


.stage{
position:absolute;

width:1400px;
height:900px;

left:50%;
top:50%;

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

@media (max-width:1400px){

.stage{
transform:translate(-50%, -50%) scale(calc(100vw / 1400));
}

}

@media (max-height:900px){

.stage{
transform:translate(-50%, -50%) scale(calc(100vh / 900));
}

}

.quarto{
position:relative;
width:1400px;
height:900px;
}

.tapete{ position:absolute; 
width:1095px; /* MUDA O TAMANHO AQUI */ 
bottom:-280px; /* sobe ou desce */ 
left:127px; /* move esquerda ou direita */ }

.cama{ position:absolute; 
width:537px; 
bottom:80px; 
left:-110px; 
z-index:3; }

.mesa{
position:absolute;

width:383px;
bottom:28px;
right:120px;

transition:0.3s;
}

.mesa:hover{
transform:rotate(-3deg);
}

.gabinete{
position:absolute;

width:387px;

top:112px;
left:509px;

content:url("gabinete-fechado.png");

transition:0.3s;
}

.gabinete:hover{
content:url("https://64.media.tumblr.com/acef6564a7cff86491af03262b4241d6/232ddd48f277e629-76/s1280x1920/a5d0e60385ac0bd7ebed56b23ba033a97002f316.pnj");
transform:rotate(-2deg);
}

.janela{
position:absolute;

top:70px;      /* mover para cima ou para baixo */
right:8px;   /* mover esquerda/direita */

width:460px;   /* TAMANHO TOTAL DA JANELA */
height:auto;
pointer-events:none;
}

/* PAISAGEM */

.vista{
position:absolute;
top:58px;     /* sobe ou desce dentro da janela */
left:109px;    /* move para direita/esquerda */
width:270px;  /* tamanho da paisagem */
z-index:1;
transition:1.5s;
pointer-events:auto;
filter:brightness(0.8) contrast(1.2);
animation:janela-estranha 23s infinite;
}


.vista:hover{
transform:translateX(-25px) scale(1.03);
}


.moldura{
position:relative;
width:100%;
z-index:2;
}

.boneca{
position:absolute;

width:110px;

bottom:310px;
left:100px;

transition:0.4s;
z-index:4;
}

.boneca:hover{
transform:rotate( 7deg);
}

.mesinha{
position:absolute;

width:220px;

bottom:111px;
left:320px;
z-index:2;

}

.item-mesa{
position:absolute;

width:70px;

bottom:267px;
left:440px;
z-index:4;
}

.objeto-link{
position:absolute;

width:200px;

bottom:226px;
left:301px;
z-index:5;
}


.objeto-cama{
position:absolute;

width:166px;

bottom:60px;
left:223px;
z-index:4;
}

.gatinho{
position:absolute;

bottom:100px;
left:386px;

width:260px;

z-index:4;
}

.gato-corpo{
width:150px;
display:block;
transform:scaleX(-1)
}

.gato-rabo{
position:absolute;

width:130px;

bottom:7px;
left:55px;

transform-origin:35% 60%;

transform:scaleX(-1);

animation:rabito 2.5s infinite;
}

a{
display:inline-block;
}

/* CONTAINER DOS QUADROS */
.quadros{
position:absolute;
bottom:498px; /* altura da parede */
left:120px;
width:600px;
height:200px;
}

.quadro{
position:absolute;
width:90px; 
height:auto;
transition:0.4s;
filter:drop-shadow(2px 3px 3px rgba(0,0,0,0.35));
}

.q1{ left: 158px;top: -74px;width: 77px; }

.q3{ left: -94px;top: -51px;width: 53px; }

.q4{ left: -48px;top: -22px;width: 218px; }

.q5{ left: -123px;top: 40px;width: 46px;}

.q6{ left:200px; top:-9px;width:113px; animation:piscar 17s infinite;}

.q8{ left: 168px;top: 236px;width: 41px; }

.quadro-link:hover{
transform:rotate( 3deg);
}

@keyframes piscar{

0%, 96%, 100%{
opacity:1;
}

/* piscada rápida */
97%{
opacity:0.2;
}

98%{
opacity:1;
}

}



@keyframes rabito{

0%{
transform:scaleX(-1) rotate(0deg);
}

15%{
transform:scaleX(-1) rotate(2deg);
}

20%{
transform:scaleX(-1) rotate(-2deg);
}

25%{
transform:scaleX(-1) rotate(1.5deg);
}

30%{
transform:scaleX(-1) rotate(0deg);
}

100%{
transform:scaleX(-1) rotate(0deg);}
}


@keyframes janela-estranha{

0%, 94%, 100%{
transform:translateX(0);
}

95%{
transform:translateX(-12px);
}

96%{
transform:translateX(0);
}

}