body{
  margin:0;
  padding:0;
  overflow-y:auto;
  overflow-x:hidden;
  background-image:url("https://64.media.tumblr.com/2ba4b0642922558a2db2d567557290aa/94dc102a56480c2c-5e/s1280x1920/369a24d3a1ee8f4030e64f100c69ff16795db737.pnj");
  background-size:cover;        
  background-position:center;   
  background-repeat:no-repeat;  
  background-attachment:fixed; 
  
}


.container{
  width:1000px;
  margin:60px auto;
  padding-bottom:200px;
}


.bloco{
  margin-bottom:60px;
}


.perfume-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
}


.perfume-img{
  width:220px;
  cursor:pointer;

  animation:flutuar 4s ease-in-out infinite;

  filter:drop-shadow(0 0 12px rgba(200,180,255,0.3));

  transition:0.3s;
}

.perfume-img:hover{
  transform:scale(1.05);
}


.info-img{
  width:500px;
}

.cartao{
  max-height:0;
  overflow:hidden;

  opacity:0;

  transition: 
    max-height 0.6s ease,
    opacity 0.4s ease;
}

.cartao.ativo{
  max-height:2000px;
  opacity:1;
}


/* imagem do cartão */
.cartao img{
  width:350px;

  background:#1a1a1a;
  padding:15px;

  border:1px solid rgba(255,255,255,0.1);

  box-shadow:
    0 0 30px rgba(100,0,150,0.2),
    inset 0 0 20px rgba(255,255,255,0.05);

  transform:rotate(-1deg);
}


.cartao::before{
  display:block;
  margin-bottom:10px;
  color:rgba(200,180,255,0.5);
  letter-spacing:5px;
}

.cartao::after{
  display:block;
  margin-top:10px;
  color:rgba(200,180,255,0.5);
  letter-spacing:5px;
}

/* ANIMAÇÕES */

@keyframes flutuar{
  0%{ transform:translateY(0px); }
  50%{ transform:translateY(-15px); }
  100%{ transform:translateY(0px); }
}

@keyframes aparecer{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}


@media (max-width:1200px){
  .stage{
    transform:translate(-50%, -50%) scale(calc(100vw / 1200));
  }
}

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