main.css

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


body {
    display: flex;
    flex-direction: column; /* Stack content vertically */
    justify-content: space-between; /* Align content to space between which pushes footer to the bottom */
    align-items: center; /* Center content horizontally */
    height: 100vh; /* Full height of the viewport */
    margin: 0;
    padding: 0;
}

#content {
    text-align: center;
    max-width: 520px;
    padding: 0px;
    line-height: 2em;
}

.avatar {
    border-radius: 180px;
    width: 180px;
}

.icons {
    list-style-type: none;
    padding: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 800px;
    margin: 1em auto;
    padding-top: 50px;
}

.icons li {
    display: inline;
    width: 40px; /* Increased width for each icon */
}

.icons a {
    color: black;
    display: inline-block; /* Ensure transform applies correctly */
    font-size: 32px; /* Increased font size for larger icons */
    transition: transform 0.5s ease, color 3s ease; /* Smooth transition for transform and color */
}

.icons a:hover {
    color: #C41E3A;
    transform: scale(1.8); /* Enlarge icons on hover */
}

a {
    text-decoration: none;
    color: #C41E3A; /* Initial color for links */
}

a:hover {
    color: #C41E3A; /* Keep the color consistent on hover for all links */
}

/* FOOTER SECTION */
footer {
    width: 100%; /* Full width */
    padding: 20px 0; /* Add some padding inside the footer */
    text-align: center;
}
#particle-image {
    position: absolute;
    top: 0;
    right: 0; /* Move the image to the right side */
    height: 100%; /* Reduce the height by 50% */
    width: 100%; /* Reduce the width by 50% */
}

.home-button {
    position: absolute; /* Fixed position */
    top: 40px; /* Distance from the top */
    left: 40px; /* Distance from the left */
    font-size: 24px; /* Icon size */
    color: black; /* Icon color */
    padding: 10px; /* Padding around the icon */
    border-radius: 50%; /* Circular button */
    text-decoration: none; /* Removes underline from the icon */
    z-index: 1000; /* Makes sure the button is on top */
    transition: transform 0.5s ease, color 3s ease; /* Smooth transition for transform and color */
}

.home-button:hover {
  color: #C41E3A;
  transform: scale(1.8); /* Enlarge icons on hover */ 
}