body{margin:0;padding:0;height:100vh;box-sizing:border-box;background:linear-gradient(359deg,#000,#2f23b8)}.container{height:100vh;overflow:hidden;position:absolute;top:0;width:100%}.snowflake{animation:fall ease-in infinite,sway ease-in-out infinite;color:#87ceeb;position:absolute;opacity:0}@keyframes fall{0%{opacity:0;top:0vh}to{opacity:1;top:100vh}}@keyframes sway{0%{margin-left:0}25%{margin-left:68px}50%{margin-left:-71px}75%{margin-left:38px}to{margin-left:0}}.envelope-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.envelope{animation:bigger 5s ease-out;z-index:1}.envelope:hover{cursor:pointer}.letter{animation:fadein 3s ease forwards;height:80%;cursor:pointer}.letter>img{width:100%;height:auto}.next{animation:click 1s ease-in-out,fadeout 3s ease forwards}@keyframes click{0%{scale:1}50%{scale:1.05}to{scale:1}}@keyframes fadein{0%{opacity:0}to{opacity:1}}@keyframes fadeout{0%{opacity:1}to{opacity:0}}@keyframes bigger{0%{opacity:0;scale:0}75%{scale:1.15}to{opacity:1;scale:1}}.canvas-container{background:linear-gradient(170deg,#000,#2f23b8 50%);height:100vh}