body {
    font-family: 'Roboto', sans-serif;
    margin: auto;
    padding: 0;
    background-color: #1C2833;
    color: #E5E5E5;
    max-width: 720px;
}

header {
    background-color: #212F3D;
    color: white;
    padding: 0px 0;
    text-align: center;
}

header h1 {
    margin: 0;
    padding: 0;
}

main {
    background-color: #212F3D;
    margin: 20px;
    padding: 20px;
    border-radius: 15px;
}

h2 {
    color: #58D68D;
}

a {
    color: #58D68D;
    text-decoration: none;
}

.cta-button {
    display: block;  /* Make the link display like a block element */
    width: 100%;  /* Make it take up the full width of its container */
    text-align: center;  /* Center the text */
    text-shadow: 2px 2px 4px #000000;  /* Adjust as needed */
    padding: 15px 0;  /* Add some vertical padding */
    margin: 0px 0;  /* Add some margin to separate it from other elements */
    color: white;  /* Set the text color */
    background-color: #e51e1e;  /* Set the background color */
    text-decoration: none;  /* Remove the underline */
    font-size: 24px;  /* Increase the font size */
    font-weight: bold;
    border-radius: 5px;  /* Round the corners */
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000; /* This ensures the button is always visible even when there are other elements on the page. */

}

/* On larger screens, limit the width and horizontally center the button */
@media (min-width: 768px) {
    .cta-button {
        width: 100%;  /* Only take up half of the width of its container */
        margin-left: auto;  /* Horizontally center the button */
        margin-right: auto;
    }
}


.cta-button:hover {
    background-color: #45B39D;
    color: white;
}
footer {
    text-align: center;
}

main img {
    width: 100%;
    height: auto;
}