body { height: 100vh; margin: 0; background-color: #f0f0f0; /* Light gray background color */ } /* Style the container */ .email-container { max-width: 600px; /* Adjust the maximum width as needed */ padding: 20px; background-color: gainsboro; /* White background color */ border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow */ } /* Remove default padding and list-style */ ul { list-style: none; padding-left: 0; } .course__content { margin: 10px 0; } .course__price { font-size: 1.7em; color: gray; margin-top: 8px; } .course__box { border: 1px solid #ccc; padding: 10px; border-radius: 7px; background-color: #f5f5f5; transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease-in-out; } .course__title { font-size: 1.1em; font-weight: bold; color: gray; } .course__description { color: wheat; margin-top: 10px; font-size: 1.4em; } .purchase-button { position: left; bottom: 10px; right: 10px; padding: 5px 10px; text-decoration: none; background-color: #007bff; color: #fff; border-radius: 5px; transition: background-color 0.3s ease-in-out; } .course__box:hover { transform: scale(1.05); background-color: #e0e0e0; color: #333; } .course__box:hover .purchase-button { background-color: #00b36e; /* Change the button color on hover */ } .closing-paragraphs { margin-top: 20px; } .closing-paragraphs p { margin-bottom: 10px; font-size: 1.1em; color: #777; }