*{box-sizing:border-box;margin:0;padding:0}body{background-color:pink}.Home_Page{flex-direction:column;justify-content:center;align-items:center;display:flex}.header{position:absolute;top:100px}.quote1{font-weight:10px;position:absolute;top:200px}.quote2{position:absolute;top:230px}.surprise button{color:#000;border-radius:10px;padding:10px;font-size:20px;transition:all 1s;position:absolute;top:380px}.music{color:#000;border-radius:10px;padding:10px;font-size:15px;transition:all 1s;position:absolute;top:300px}.lock{position:absolute;top:500px}.footer{position:absolute;bottom:100px}.surprise button:hover,.music:hover{cursor:pointer;border:5px solid #000}@media (width<=400px){.header{position:absolute;top:70px}.quote1{position:absolute;top:170px}.quote2{position:absolute;top:200px}.surprise button{position:absolute;top:350px;left:120px}.lock{position:absolute;top:470px}.footer{position:absolute;bottom:50px}.music{position:absolute;left:135px}}.card{justify-content:center;align-items:center;width:100vw;height:100vh;display:flex}.inputAndbutton{flex-direction:row;justify-content:center;align-items:center;gap:10px;display:flex}.inputAndbutton input{border:none;border-radius:5px;height:25px;padding:10px;position:relative;top:50px}.inputAndbutton button{cursor:pointer;border-radius:5px;height:25px;padding:4px;position:relative;top:50px}.card h1{min-width:400px}.next{justify-content:center;align-items:center;gap:20px;display:flex}.next button{cursor:pointer;border-radius:5px;width:100%;max-width:50px;height:100%;max-height:40px;padding:4px}.inputAndbutton input:hover,.inputAndbutton button:hover{border:none}.card h1{padding:5px}@media (width<=400px){.card{display:flex}.card h1{min-width:200px;max-width:400px;margin:5px}.inputAndbutton{justify-content:center;align-items:center;display:flex}.inputAndbutton button{padding:5px;position:relative;top:50px}.next{display:flex;position:relative;top:100px}}.gift{flex-direction:column;justify-content:center;align-items:center;width:100vw;min-width:370px;height:100vh;max-height:700px;display:flex}.surprise{flex-direction:column;justify-content:center;align-items:center;display:flex}.surprise strong{font-size:24px}.surprise h1{position:absolute;bottom:100px}.gift h1:first-child{position:absolute;top:50px}.gift h2{position:absolute;top:150px}.gift strong:first-child{position:absolute;top:240px}.gift strong{position:absolute;top:280px}.surprise img{max-width:150px;animation:3s linear entry;position:absolute;top:350px;left:700px}.surprise img:hover{cursor:pointer}@media (width<=400px){.surprise img{max-width:150px;position:absolute;top:330px;left:120px}}@keyframes entry{0%{transform:translateY(-400%)}}.media button{position:absolute;top:100px;left:680px}.media{width:90%;animation:5s linear entryOfImageSlider;overflow:auto}.media::-webkit-scrollbar{display:none}.imageSlider{flex-shrink:0;width:max-content;animation:10s linear 5s infinite slide;display:flex;overflow:auto}.img{flex:0 0 400px;width:400px;height:400px;overflow:auto}@media (width<=400px){.media{flex-direction:column;justify-content:center;align-items:center;display:flex}#pic7{max-height:700px}}@keyframes slide{0%{transform:translate(0%)}to{transform:translate(-50%)}}@keyframes entryOfImageSlider{0%{transform:translateY(-100%)}}body{background-image:url(/assets/BackgroundImage-BsXdJseh.jpg);background-position:50%;background-repeat:no-repeat;background-size:cover;justify-content:center;align-items:center;height:100vh;display:flex}.base{justify-content:center;width:300px;height:200px;animation:5s entry;display:flex;position:relative}.envelope{transform-origin:0 0;z-index:4;border-top:100px solid red;border-left:150px solid #0000;border-right:150px solid #0000;width:0;height:0;transition:all 1s;position:absolute}.cover{transform-origin:0 0;z-index:3;border-top:200px solid #0000;width:0;height:0;transition:entry 1s;position:absolute}.cover-left{border-left:300px solid #c80000}.cover-right{border-right:300px solid #c80000}.envelope.Open{cursor:pointer;z-index:1;animation:1s linear forwards open}.letter{z-index:2;background-color:#fff;border-radius:5px;width:280px;height:200px;transition:all 1s 1s;position:relative;box-shadow:0 0 2px #000}h3{text-align:center}.envelope.Open~.letter{z-index:1;animation:1s linear 1s forwards show}.btn{cursor:pointer;position:absolute;top:500px;left:745px}.btn button{border-radius:5px;padding:4px;font-size:15px;animation:5s entryOfButton}@media (width<=400px){body{background-image:url(/assets/BackgroundImage-BsXdJseh.jpg);background-size:400px 100%}.btn{cursor:pointer;padding:2px;position:absolute;top:520px;left:180px}.letter{z-index:2;background-color:#fff;border-radius:5px;flex-wrap:wrap;justify-content:center;align-items:center;width:280px;height:200px;transition:all 1s 1s;display:flex;box-shadow:0 0 2px #000}}@keyframes open{to{transform:rotateX(180deg)}}@keyframes show{to{transform:translateY(-200px)}}@keyframes entryOfButton{0%{transform:translateY(750%)}}