body { font-family: 'Poppins', 'Arial', sans-serif; background-color: #f4f4f4; /* Background color similar to your app */ text-align: center; padding: 20px; } .container { display: flex; flex-direction: column; align-items: center; max-width: 600px; margin: auto; background-color: #fff; /* Assuming a light theme similar to your app */ padding: 20px; border-radius: 16px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /* Small header logo style */ .logo-small { max-width: 120px; margin: 10px auto; display: block; } .music-description { font-size: 18px; color: #333; margin-bottom: 20px; /* Add any other styling that fits your design, like font-weight, etc. */ } .character-image-container img { max-width: 150px; /* Adjust based on your character image */ height: auto; margin: 20px 0; } .toy-information { text-align: center; color: #333; font-size: 16px; margin-bottom: 20px; width: 100%; } .additional-image-container { text-align: center; margin: 20px 0; /* Adjust spacing as needed */ } .additional-image { max-width: 30%; /* Ensures the image is responsive */ height: auto; /* Maintains aspect ratio */ /* Add any additional styles you need */ } .music-services { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 20px; margin: 20px 0; } .service-logo { max-width: 50px; /* Adjust for the service logos */ margin-bottom: 10px; } #spotifySection, #appleMusicSection { text-align: center; margin-bottom: 20px; } button { background-color: #007bff; /* Example primary button color */ color: #fff; border: none; border-radius: 5px; padding: 10px 20px; cursor: pointer; font-size: 16px; margin-top: 10px; } button:hover { background-color: #0056b3; } .download-section a { display: inline-block; padding: 15px 25px; color: #fff; background-color: #28a745; /* Download button color */ border-radius: 5px; text-decoration: none; font-weight: bold; margin-top: 20px; } .download-section a:hover { background-color: #218838; } .buy-button { display: inline-block; padding: 15px 25px; color: #fff; background-color: #28a745; border-radius: 5px; text-decoration: none; font-weight: bold; margin-top: 10px; } .buy-button:hover { background-color: #218838; } body, html { margin: 0; padding: 0; height: 100%; background-image: url('images/bg.png'); /* Replace with your image path */ background-position: center; background-repeat: no-repeat; background-size: cover; /* This will ensure the image covers the entire page */ } .container { /* Your existing styles */ background-color: rgba(255, 255, 255, 0.8); /* Optional: makes the container slightly transparent */ } /* Google Fonts import for Poppins */ /* Place this in your HTML : */ #appleMusicSection { display: none; } /* Modern, prominent action buttons styles */ .action-buttons { display: flex; gap: 15px; justify-content: center; margin: 20px 0; } .btn { padding: 12px 20px; border-radius: 6px; font-size: 1rem; text-decoration: none; text-align: center; transition: background 0.3s ease; } .primary-btn { background-color: #1DB954; /* Spotify green */ color: white; } .primary-btn:hover { background-color: #17a74a; } .secondary-btn { background-color: #ff5a5f; color: white; } .secondary-btn:hover { background-color: #e04a4e; } /* Hide the sphere logo image */ .sphere-logo { display: none; }