/* Footer Styling */
#footer {
    background-color: rgb(221, 221, 216); /* Match to rest of page */
    padding: 2em 2em 1em 2em ; /* Padding around footer content */
    font-family: 'Roboto';
    color: #111; /* Dark text color */
    margin-top: 3em; /* Space above the footer */
    position: relative; /* For positioning the back-to-top button */
}

/* Footer Section Styling */
.footer-section {
    display: flex; /* Use flexbox for the footer section */
    justify-content: space-between; /* Evenly space columns */
    flex-wrap: wrap; /* Wrap columns on smaller screens */
    margin-bottom: 2em; /* Space below the footer section */
    font-family: 'Roboto';
    font-size: 1em;
}

/* Footer Column Styling */
.footer-column {
    flex: 1; /* Flex each column equally */
    margin: 0 1em; /* Margin between columns */
    min-width: 150px; /* Minimum width for each column */
}

.footer-column h4 {
    font-size: 1em; /* Font size for column headings */
    font-weight: bold; /* Bold headings */
    margin-bottom: 0.5em; /* Space below headings */
    border-bottom: 1px solid #111; /* Bottom border for headings */
    padding-bottom: 0.5em; /* Padding under headings */
}

.footer-column ul {
    font-size: 1vw;
    font-style:'Roboto Mono';
    color:#7e7e7e;
    list-style: none; /* Remove bullet points */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
}

.footer-column ul li {
    margin-bottom: 0.5em; /* Space between list items */
}

.footer-column ul li a {
    color: #111; /* Link color */
    text-decoration: none; /* Remove underline */
}

.footer-column ul li a:hover {
    text-decoration: underline; /* Underline on hover */
}

/* Footer Bottom Styling */
.footer-bottom {
    display: flex; /* Use flexbox for layout */
    justify-content: space-between; /* Space between footer content */
    align-items: flex-start; /* Align to the top */
    flex-wrap: wrap; /* Wrap content on smaller screens */
    margin-top: 2em; /* Space above the bottom text */
    margin-left: 1em;
}

.footer-info {
    text-align: left; /* Align text to the left */
    
}

.footer-year {
    font-size: 1.5em; /* Larger font size for the year */
    font-weight: bold; /* Bold year text */
    margin-bottom: 0; /* No margin below the year */
}

.footer-name {
    font-size: 2.5em; /* Larger font size for the name */
    font-weight: bold; /* Bold name text */
    margin-top: 0; /* No margin above the name */
}

/* Footer Right Section Styling */
.footer-right {
    display: flex; /* Flexbox for horizontal alignment */
    align-items: center; /* Align items vertically in the center */
    margin-top: 3%;
}

.footer-time {
    font-family: 'Roboto Mono';
    font-size: 0.9em; /* Slightly smaller font size for the time */
    text-align: left; /* Align text to the left */
    margin-top: 5%;
    margin-right: 3%;
}

/* Back to Top Button */
.back-to-top {
    margin-left: 1em; /* Add space between time and button */
    margin-top: -1.5em;
}

.back-to-top a img {
    width: 70px; /* Size of the back-to-top icon */
    height: 70px; /* Size of the back-to-top icon */
    border-radius: 50%; /* Rounded shape */
    background-color: #333; /* Dark background for icon */
    padding: 1em; /* Padding inside icon */
    transition: background-color 0.3s ease; /* Hover transition */
}

.back-to-top a img:hover {
    background-color: #555; /* Lighter background on hover */
}