* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    font-family: Arial, sans-serif;
    overflow: auto; /* Allow scrolling */
    background: url('your-image.jpg') no-repeat center center fixed; /* Fixed background image */
    background-size: cover; /* Cover the entire background */
}

.container {
    padding: 20px; /* Maintain consistent padding */
    max-width: 80%; /* Limit max width of the container */
    margin: 0 auto; /* Center the container */
}

.header {
    width: 100%; /* Full width */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px; /* Add padding for the header */
}

.site-name img {
    max-width: 100%; /* Responsive image */
    height: auto; /* Maintain aspect ratio */
}

.navbar ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center; /* Center-aligns the links */
}

.navbar li {
    margin: 0 15px;
}

/* Link spacing for phone screens */
@media (max-width: 600px) {
    .navbar li {
        margin: 0 10px; /* Adjust spacing for smaller screens */
    }
}
.navbar a {
    text-decoration: none;
    color: white; /* Change link color */
    font-size: 18px;
}

.navbar a:hover {
    text-decoration: underline;
}

.content {
    background-color: rgba(255, 255, 255, 0.85); /* Solid background with transparency */
    padding: 2vw; /* Use viewport width for padding */
    border-radius: 8px;
    text-align: center;
    margin: 20px 20px; /* Space above and below */
}

.content ul {
	list-style-position: inside;
}

.blog-post {
    margin-bottom: 1vw; /* Space between blog posts */
}

.blog-post h1 {
    font-size: 22px; /* Responsive heading size */
}

.blog-post p {
    font-size: 16px; /* Responsive paragraph size */
    line-height: 1.6;
}

.spacer {
    height: 40px; /* Adds space between the two blog posts */
}

.contact-info {
    text-align: center; /* Center the text */
    max-width: 400px;
    margin: 0 auto; /* Center the div itself */
}

.contact-info p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 15px;
}

.contact-info a {
    color: #007BFF;
    text-decoration: none;
}

.contact-info a:hover {
    text-decoration: underline;
}

.blog-post a {
    color: black; /* Change the link color to black */
    text-decoration: none; /* Remove underline */
}

.blog-post a:hover {
    text-decoration: underline; /* Optional: underline on hover */
    color: darkgray; /* Optional: change color on hover */
}

footer {
    position: fixed; /* Fixes the footer to the bottom left */
    bottom: 0; /* Aligns it to the bottom */
    left: 0; /* Aligns it to the left */
    display: flex;
    align-items: center; /* Vertically center content */
    background-color: rgba(0, 0, 0, 0); /* Optional: background for contrast */
    color: white; /* Set text color to white */
    padding: 10px 20px; /* Add some padding */
    width: 100%; /* Full width */
}

.footer-content {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: flex-start; /* Align items to the left */
}

.footer-logo {
    max-height: 9vh; /* Adjust the logo size relative to viewport height */
    margin-bottom: 5px; /* Space between logo and text */
}

.footer-text {
    font-size: 2vw; /* Adjust font size relative to viewport width */
    font-size: max(12px); /* Optional: set a max size */
}

.footer-content {
    background-color: rgba(0, 0, 0, 0.3); /* Solid background with transparency */
    padding: 2vw; /* Use viewport width for padding */
    border-radius: 8px;
    text-align: center;
    margin: 20px 0; /* Space above and below */
}

.footer-content img{
	width: 200px;
	height: 200px;
	align-items: center;
	margin-right: auto;
	margin-left: auto;
}

.footer-content p{
	font-size: 18px;
	color: white;
}

.footer-container {
    padding: 20px; /* Maintain consistent padding */
    max-width: 80%; /* Limit max width of the container */
    margin: 0 auto; /* Center the container */
    display: flex;
    justify-content: center; /* Horizontally centers the content */
    align-items: center; /* Vertically centers the content */
    text-align: center; /* Centers the text inside the div */}