Changed around line 1
+ body {
+ font-family: 'Comic Sans MS', cursive, sans-serif;
+ background-color: #f9f9f9;
+ color: #333;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ overflow: hidden;
+ }
+
+ .container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .page {
+ width: 100%;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ }
+
+ .flower {
+ position: relative;
+ width: 100px;
+ height: 100px;
+ animation: grow 2s ease-in-out infinite;
+ }
+
+ .petal {
+ position: absolute;
+ width: 50px;
+ height: 50px;
+ background-color: pink;
+ border-radius: 50%;
+ transform-origin: center bottom;
+ }
+
+ .petal:nth-child(1) { transform: rotate(0deg) translateY(-50px); }
+ .petal:nth-child(2) { transform: rotate(60deg) translateY(-50px); }
+ .petal:nth-child(3) { transform: rotate(120deg) translateY(-50px); }
+ .petal:nth-child(4) { transform: rotate(180deg) translateY(-50px); }
+ .petal:nth-child(5) { transform: rotate(240deg) translateY(-50px); }
+ .petal:nth-child(6) { transform: rotate(300deg) translateY(-50px); }
+
+ .heart {
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ background-color: red;
+ transform: rotate(45deg);
+ top: 40px;
+ left: 40px;
+ }
+
+ @keyframes grow {
+ 0%, 100% { transform: scale(1); }
+ 50% { transform: scale(1.2); }
+ }
+
+ .envelope {
+ position: relative;
+ width: 200px;
+ height: 120px;
+ background-color: #ffcccb;
+ cursor: pointer;
+ }
+
+ .flap {
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-left: 100px solid transparent;
+ border-right: 100px solid transparent;
+ border-bottom: 60px solid #ffcccb;
+ top: -60px;
+ }
+
+ .letter {
+ position: absolute;
+ width: 180px;
+ height: 100px;
+ background-color: white;
+ top: 10px;
+ left: 10px;
+ padding: 10px;
+ display: none;
+ }
+
+ .envelope.open .flap {
+ transform: rotateX(180deg);
+ }
+
+ .envelope.open .letter {
+ display: block;
+ }
+
+ .music-controls {
+ margin-top: 20px;
+ }
+
+ button {
+ background-color: pink;
+ border: none;
+ padding: 10px 20px;
+ margin: 5px;
+ cursor: pointer;
+ border-radius: 5px;
+ }
+
+ button:hover {
+ background-color: #ff69b4;
+ }