body {
  background-color: #f0e6f6; 
  font-family: "Dancing Script", cursive;
  text-align: center;
}

.envlope-wrapper {
  height: 380px;
}

#envelope {
  position: relative;
  width: 280px;
  height: 180px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  margin: 150px auto 0 auto;
  background-color: #d9534f; 
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.front { position: absolute; width:0; height:0; z-index:3; }

.flap {
  border-left: 140px solid transparent;
  border-right: 140px solid transparent;
  border-bottom: 82px solid transparent;
  border-top: 98px solid #d9534f; 
  transform-origin: top;
  pointer-events: none;
}

.pocket {
  border-left: 140px solid #f5a3a2;
  border-right: 140px solid #f5a3a2;
  border-bottom: 90px solid #ff6f61; 
  border-top: 90px solid transparent;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.letter {
  position: relative;
  background-color: #fff;
  width: 90%;
  margin: auto;
  height: 90%;
  top: 5%;
  border-radius: 6px;
  box-shadow: 0 2px 26px rgba(0,0,0,0.12);
}

.words {
  position: absolute;
  left: 10%;
  width: 80%;
  text-align: center;
  font-size: 1.1rem;
}

.words.line1 { top:10%; font-size:0.7rem; width:20%; height:7%; }
.words.line2 { top:30%; }
.words.line3 { top:50%; }
.words.line4 { top:70%; }

.open .flap { transform: rotateX(180deg); transition: transform 0.4s ease; z-index:1; }
.close .flap { transform: rotateX(0deg); transition: transform 0.4s 0.6s ease; z-index:5; }

.close .letter { transform: translateY(0); z-index:1; transition: transform 0.4s ease; }
.open .letter { transform: translateY(-100px); z-index:2; transition: transform 0.4s 0.6s ease; }

.hearts { position: absolute; top:90px; left:0; right:0; z-index:2; }
.heart { position:absolute; bottom:0; right:10%; pointer-events:none; }
.heart:before, .heart:after { position:absolute; content:""; width:50px; height:80px; background:#e60073; border-radius:50px 50px 0 0; }
.heart:before { left:50px; transform:rotate(-45deg); transform-origin:0 100%; }
.heart:after { left:0; transform:rotate(45deg); transform-origin:100% 100%; }

.a1 { left:20%; transform:scale(0.6); opacity:1; animation:slideUp 4s linear 1, sideSway 2s ease-in-out 4 alternate; animation-fill-mode:forwards; animation-delay:0.7s;}
.a2 { left:55%; transform:scale(1); opacity:1; animation:slideUp 5s linear 1, sideSway 4s ease-in-out 2 alternate; animation-fill-mode:forwards; animation-delay:0.7s;}
.a3 { left:10%; transform:scale(0.8); opacity:1; animation:slideUp 7s linear 1, sideSway 2s ease-in-out 6 alternate; animation-fill-mode:forwards; animation-delay:0.7s;}

@keyframes slideUp {0%{top:0;}100%{top:-600px;}}
@keyframes sideSway {0%{margin-left:0;}100%{margin-left:50px;}}

.reset { text-align: center; margin-top: 20px; }
.reset button { font-weight: 800; background-color: transparent; border: 2px solid #d9534f; border-radius:4px; color:#d9534f; font-size:14px; text-transform:uppercase; margin:5px; padding:10px; cursor:pointer; min-width:120px; transition:all 0.1s; }
.reset button:hover { background-color:#d9534f; color:#fff; }

.invitation { margin-top:20px; }
.invitation button { font-weight:800; background-color:#ff6f61; border:none; color:white; padding:10px 20px; margin:5px; border-radius:8px; cursor:pointer; font-size:16px; transition:0.2s; }
.invitation button:hover { opacity:0.9; }

.floating-heart { position:fixed; font-size:20px; animation:floatUp 3s linear forwards; }
@keyframes floatUp {0%{bottom:0; opacity:1;}100%{bottom:100%; opacity:0;}}