body {display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; margin: 0; padding: 0; background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);}

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

#envelope:hover {cursor: pointer;}

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

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

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

.letter {position: relative; background-color: white; width: 96%; height: 92%; top: 5%; border-radius: 10px; box-shadow: 0 2px 26px rgba(0, 0, 0, .12); margin-left: auto; margin-right: auto; text-align: center;}
.letter:after {content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0;}

.words {position: absolute; left: 5%; width: 90%; height: 14%; font-size: 15px; font-family: Arial, Helvetica, sans-serif; color: black;}

.line1 {top: 2%;}
.line2 {top: 25%;}
.line3 {top: 50%;}
.line4 {top: 70%; font-weight: bold;}

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

.open .letter {transform: translatey(-120px); transition: transform 0.4s 0.6s ease, z-index 0.6s; z-index: 2;}
.close .letter {transform: translatey(0deg); transition: transform 0.4s ease, z-index 1s; z-index: 1;}

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

.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: 0px;}
    100% {margin-left: 50px;}
}

.reset {text-align: center;}
.reset button {font-weight: 800; font-style: normal; transition: all 0.1s linear; background-color: transparent; border: solid 2px #FF6863; border-radius: 4px; color: #FF6863; display: inline-block;
	font-size: 14px; margin: 20px; margin-top: 110px; padding: 10px; line-height: 2em; text-decoration: none; min-width: 150px; outline: none;}
.reset button:hover {background-color: #FF6863; cursor: pointer; color: white;}

.valentine {text-align: center; font-family: Arial, Helvetica, sans-serif; color:rgb(20, 20, 20); font-size: 30px;}