html, body {
  font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 20px;
            background-color: #f0f8ff;
            color: #333;
        }
        h1 {
            text-align: center;
            color: #0366d6;
        }
        ul {
            list-style: none;
            padding: 0;
        }
        li {
            margin-bottom: 10px;
            background-color: #ffefd5;
            padding: 10px;
            border-radius: 5px;
        }
        .emoji {
            font-size: 24px;
        }

canvas {
  display: block;
}

.content-container {
    display: flex;
    justify-content: space-between; /* This will place content and image on opposite ends */
    align-items: center; /* This aligns items vertically in the center */
}

.text-content {
    /* Styling for text content */
    flex: 1; /* Allows this div to grow and take up space, adjust as needed */
}

.side-image {
    /* Styling for the image */
    width: 50%; /* Adjust the width as necessary */
    max-width: 600px; /* Example maximum width, adjust as needed */
}