/* General Styles */
body {
    font-family: Arial, sans-serif; /* Sets the font for the entire document */
    background-color: #FFCC99; /* Light peach orange background for a clean look */
    margin: 0;
    padding: 0;
}

/* Header Styles */
h1 {
    color: #333333; /* Dark gray text color */
    text-align: center; /* Center align the heading */
    margin-top: 50px; /* Adds space above the heading */
}

/* Link Styles */
a {
    display: block; /* Makes the link a block element */
    width: 200px; /* Sets a fixed width for the link */
    margin: 20px auto; /* Centers the link horizontally and adds vertical spacing */
    padding: 10px 0; /* Adds padding inside the link */
    text-align: center; /* Centers the link text */
    background-color: #007BFF; /* Blue background color */
    color: #ffffff; /* White text color */
    text-decoration: none; /* Removes underline from the link */
    border-radius: 5px; /* Rounds the corners of the link */
    transition: background-color 0.3s ease; /* Smooth transition for background color change */
}

a:hover {
    background-color: #0056b3; /* Darker blue background color on hover */
}

/* Subheader Styles */
h2 {
    color: #555555; /* Medium gray text color */
    text-align: center; /* Center align the subheading */
    margin-top: 30px; /* Adds space above the subheading */
}

/* Image Styles */
img {
    display: block; /* Makes the image a block element */
    width: 150px; /* Sets the width for the image */
    margin: 20px auto; /* Centers the image horizontally and adds vertical spacing */
    border: 2px solid #333333; /* Adds a dark gray border around the image */
    border-radius: 10px; /* Rounds the corners of the image */
    transition: transform 0.3s ease; /* Smooth transition for image scaling */
}

img:hover {
    transform: scale(1.1); /* Scales the image up slightly on hover */
}
footer {
    text-align: center; /* Centers the footer content */
    background-color: #333333; /* Dark gray background color */
    color: #ffffff; /* White text color */
    padding: 10px 0; /* Adds padding inside the footer */
    position: fixed; /* Fixes the footer at the bottom of the page */
    bottom: 0; /* Positions the footer at the bottom */
    width: 100%; /* Ensures the footer spans the full width of the page */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow for depth */
}