@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");body,html{max-width:100vw;overflow-x:hidden;background-color:#fff2cc}body{color:var(--foreground);background:var(--background);font-family:IBM Plex Sans,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;padding:0;margin:0}a{color:inherit;text-decoration:none}@media (prefers-color-scheme:dark){html{color-scheme:dark}}.my-emoji-styles,.my-emoji-styles button{font-size:100px;text-shadow:2px 2px 8px rgba(0,0,0,.5);transform:scale(1.5)}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background-color:#fff2cc;text-align:center;color:#ff6f61}.header{font-size:3rem;color:#f5a623;padding-bottom:30px}.paragraph{font-size:1.5rem;color:#f4a300;padding-bottom:20px}.button{margin-top:20px;padding:15px 30px;font-size:20px;background-color:#ff6f61;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:background-color .3s}@keyframes openEnvelope{0%{transform:rotateX(0)}to{transform:rotateX(180deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.envelope{width:750px;height:500px;background:#f5f5f5;position:relative;perspective:1000px;margin:50px auto;cursor:pointer}.envelope.open .flap{animation:openEnvelope 2s forwards}.envelope.open .letter{animation:fadeIn 2s 2s forwards}.flap{width:100%;height:100%;background:#fff700;position:absolute;top:0;left:0;transform-origin:top;display:flex;align-items:center;justify-content:center}.open-me{font-size:24px;font-weight:700;color:#ff6f61}.letter{width:700px;height:450px;background:#fff;position:absolute;top:25px;left:25px;opacity:0;padding:20px;box-shadow:0 0 10px rgba(0,0,0,.1);color:#000;font-size:18px}