body, h1 {
    font-family: "Raleway", sans-serif;
}

body, html {
    height: 100%;
    margin: 0;
}

.bgimg {
    background-image: url('../images/background4.png');
    min-height: 100%;
    background-position: center;
    background-size: cover;
    display: flex; /* Enable flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

a {
    background-color: black;  /* Set default background to black */
    padding: 10px 30px;  /* Consistent padding for width */
    text-decoration: none;
    border-radius: 8px;
    color: orange;
    font-size: 18px; /* Make font larger */
    margin: 5px;
    display: flex; /* Use flexbox for button content alignment */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for both background and text color */
    height: 50px;  /* Set a fixed height for all buttons */
    width: 200px;  /* Set a fixed width for all buttons */
}

/* Hover effect */
a:hover {
    background-color: orange;  /* Change background color on hover */
    color: black;  /* Change text color to black */
}

a i {
    margin-right: 10px; /* Add space between the icon and text */
}

/* Adjust button content */
.button {
    font-size: 20px; /* Larger font size */
    padding: 0; /* Remove extra padding */
    border-radius: 10px; /* More rounded corners */
    display: inline-flex; /* Make sure icon and text stay inline with flex */
    justify-content: center; /* Center both icon and text horizontally */
    align-items: center; /* Center both icon and text vertically */
}

/* Center the logo */
.w3-display-middle {
    text-align: center; /* Ensure text or images inside are centered */
}

img {
    max-width: 100%; /* Make the logo responsive */
    height: auto;    /* Maintain aspect ratio */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); /* Optional: Add shadow to logo text for better visibility */
}