body{
margin:0;
padding:0;

background-image:
linear-gradient(rgba(46, 32, 25, 0.6), rgba(28, 18, 14, 0.8)),
url("https://64.media.tumblr.com/50d6704005da88f59b7f12c15c6cc7c6/3bfdebfa702817bc-ae/s1280x1920/0f366aff4e3ecccc1f5f260f71f30149eb65b56a.pnj");
overflow:hidden;
background-size:cover;
background-position:center;
background-repeat:no-repeat;

display:flex;
justify-content:center;
align-items:center;
height:100vh;
}

.scene{
position:relative;
width:1000px;
height:700px;
}


.mesa-base{
position:absolute;
width:1200px;
top:311px;
left:125px;
}


.diario{
position:absolute;

width:250px;
top:391px;
left:604px;
transition:0.3s;
filter:drop-shadow(0 0 5px rgba(255,255,200,0.2));
}

.diario:hover{
transform:translateY(-5px) rotate(-2deg);
}


.perfume{
position:absolute;
width:290px;
transition:0.3s;
z-index:3;
}

.p1{
top:223px;
left:770px;
}

.xicara{
  position:absolute;
  width:168px;
  top:414px;
  left:469px;}
  
.relogio1{
    position:absolute;
    width:453px;
    top:474px;
    left:916px
}
.relogio1 {
  transform: rotate(-12deg);
  pointer-events:none;
}

    
  .relogio2{
      position:absolute;
      top:478px;
      left:771px;
      pointer-events:none;}
      
  
.perfume:hover{
transform:translateY(5px) rotate(2deg);
}


.velas{
  position:absolute;
  top:0px;   
  left:45%;
  transform:translateX(-50%);
  width:900px; 
  pointer-events:none;
  z-index:1;
 animation:velas-flutuando 6s ease-in-out infinite,
 luz 3s ease-in-out infinite;
    filter:
    drop-shadow(0 0 10px rgba(255,200,120,0.3))
    drop-shadow(0 0 25px rgba(255,180,100,0.15));
}

.v2{
  left:96%;
  z-index:2;
}




.stage{
position:absolute;

width:1400px;
height:900px;

left:50%;
top:50%;

transform:translate(-50%, -50%);
transform-origin:center;
}

/* RESPONSIVO */
@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));
}
}

@keyframes velas-flutuando{
  0%{
    transform:translateX(-50%) translateY(0px);
  }

  50%{
    transform:translateX(-50%) translateY(-6px);
  }

  100%{
    transform:translateX(-50%) translateY(0px);
  }
}

@keyframes luz{
  0%{
    filter:
      drop-shadow(0 0 8px rgba(255,200,120,0.25))
      drop-shadow(0 0 20px rgba(255,180,100,0.1));
  }

  50%{
    filter:
      drop-shadow(0 0 14px rgba(255,220,150,0.35))
      drop-shadow(0 0 30px rgba(255,200,120,0.2));
  }

  100%{
    filter:
      drop-shadow(0 0 8px rgba(255,200,120,0.25))
      drop-shadow(0 0 20px rgba(255,180,100,0.1));
  }
}
    
    