body, html {
    height: 100%;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    background-color: #f1b57a;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

.logo, .banner, .button-link, .button, .social-media-links {
    max-width: 90%;
    height: auto;
    margin: 5px auto; /* Uniform spacing around elements */
}

.button-link {
    display: flex; /* Confirms block-level display for margin auto to work */
    position: relative; /* Ensures positioning is relative to the container for centering */
    left: 0; /* Reset any previously set left values */
    right: 0; /* Works with left:0 to assist in centering */
    transform: none; /* Clears any previously set transformations */
}
.banner {
	margin-top: -40px;
}

.button {
   width: 35vw; /* Icon size */
  margin-top: -100px;
}

.social-media-links {
    display: flex;
    justify-content: center;
    gap: 20px; /* Adjusted space between icons */
    padding: 10px 0; /* Padding around the icons */
    margin-top: 10px; /* Increased space between the button and social icons */
}

.social-media-links a {
    display: flex;
    justify-content: center;
  	align-items: center;
}

.social-media-links img {
    width: 10vw; /* Icon size */
    height: auto;
    min-width: 24px
    max-width: 48px
}

@media (max-width: 768px) {
    .logo {
        width: 100vw; /* Increase the logo size for better visibility */
        max-width: none; /* Remove the max-width restriction to allow the logo to grow */
        margin: 10px auto; /* Adjusted margin for spacing around the logo */
    }

    .banner {
        width: 95%; /* Adjust width for responsiveness */
        margin: 5px auto; /* Increase top margin to ensure separation from the logo */
    }

    .button-link {
        display: flex; /* Utilize flex to center the button */
        justify-content: center; /* Center the button within its container */
        margin: 50px auto; /* Adjusted margin to increase space between the banner and the button */
        width: auto; /* Allow the button to maintain its aspect ratio */
        max-width: 80vw; /* Control the maximum width of the button for larger mobile screens */
       margin-bottom: -20px; /* Reduce or remove this margin as needed */
    }
    }

    .button {
        width: 100%; /* Let the button fill its container to maintain aspect ratio */
        height: auto; /* Ensure the button's height adjusts to maintain aspect ratio */
    }

   .social-media-links {
        margin-top: 10px; /* Reduce the top margin to decrease the gap */
        padding: 10px 0; /* Adjust padding if necessary for visual balance */
        gap: 20px; /* Ensure the gap between icons is appropriate */
    }
}