body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-image: url('Earth_from_space_05.jpg'); /* Replace with your image file name */
    background-size: cover; /* Ensures the image covers the whole page */
    background-position: center; /* Centers the image */
    background-attachment: fixed; /* Keeps the background in place while scrolling */
    color: #fff; /* Text color for readability */
}

.icon-links {
    display: flex;
    justify-content: center; /* Centers the icons horizontally */
    gap: 20px; /* Spacing between icons */
    position: fixed;
    bottom: 10px; /* Positions the links at the bottom */
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Optional background for visibility */
    padding: 10px 0;
}

.icon {
    height: 50px; /* Ensures all icons are exactly the same height */
    width: auto; /* Keeps proportions intact */
    transition: transform 0.3s ease; /* Creates a hover effect */
    object-fit: contain; /* Ensures image fits nicely */
    border: none; /* Removes borders */
}

.icon:hover {
    transform: scale(1.2); /* Grows slightly on hover */
}

/* Apply universal rules to large icons as well */
.large-icon {
    height: 50px; /* Same height as smaller icons */
    width: auto; /* Ensure proportions are consistent */
}

@media (max-width: 768px) { /* For smaller screens */
    .icon-links {
        gap: 4px; /* Reduce spacing a tiny bit more */
        padding: 8px; /* Slightly reduce padding for better fit */
    }

    .icon, .large-icon {
        height: 32px; /* Further reduce height for all icons on mobile */
        width: auto; /* Maintain proportions */
    }
}