/* Reset some default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body styling */
body {
    font-family: Arial, sans-serif; /* Font for the page */
    background-color: #000; /* Background color for the page */
    color: #fff; /* Text color */
    display: flex;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    height: 100vh; /* Full viewport height */
}

/* Container that holds all the content */
.container {
    background-color: #150000; /* Near black background for the content */
    border-radius: 10px; /* Rounded corners */
    padding: 20px;
    text-align: center;
    width: 90%; /* 90% of the viewport width */
    max-width: 400px; /* Maximum width for the container */
}

/* Profile section */
.profile {
    margin-bottom: 30px;
}

/* Profile image styling */
.profile-image {
    width: 150px; /* Size of the profile image */
    height: 150px; /* Height of the profile image */
    border-radius: 50%; /* Makes the image circular */
    object-fit: cover; /* Ensures the image fits within the circle */
    margin-bottom: 10px; /* Space below the image */
}

/* Profile name and description */
.profile h1 {
    font-size: 24px; /* Name font size */
    margin-bottom: 10px; /* Space below the name */
}

.profile p {
    font-size: 14px; /* Font size for the bio/description */
    color: #777; /* Gray color for the description */
}

/* Links section */
.links {
    display: flex;
    flex-direction: column; /* Aligns links vertically */
    gap: 10px; /* Space between each link */
}

/* Individual link styling */
.link {
    display: flex;
    align-items: center; /* Center items vertically */
    justify-content: flex-start; /* Align text to the left of the thumbnail */
    background-color: #601616; /* Red background color */
    color: white; /* White text color */
    padding: 15px 20px; /* Padding inside each link */
    text-decoration: none; /* Removes the underline from links */
    font-size: 16px; /* Font size for the link text */
    border-radius: 5px; /* Rounded corners for the links */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
    box-shadow: 0px 4px 4px rgba(126, 23, 23, 1); /* Shadow to the bottom-right */
}
/* Styling for the link thumbnail images */
.link-thumbnail {
    width: 30px; /* Set the size of the thumbnail */
    height: 30px; /* Set the size of the thumbnail */
    border-radius: 5px; /* Rounded corners for the thumbnail */
    margin-right: 15px; /* Space between the thumbnail and the text */
    object-fit: contain; /* Ensure the entire image fits within the space without cropping */
    object-position: center; /* Keep the image centered within the thumbnail */
}


/* Hover effect for links */
.link:hover {
    background-color: #480c0c; /* Darker red when the link is hovered */
    box-shadow: 0px 4px 4px rgba(146, 5, 5, 1); /* Retain shadow on hover */
}