body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: min(24px, 5%);
    box-sizing: border-box;
    gap: 5px;
}

.last-name {
    letter-spacing: 0.03rem;
}

.profile {
    display: flex;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); /* Soft shadow */
    min-height: 160px;
    max-width: 800px;
    margin: 10px;
    position: relative;
    transition: transform 0.3s ease-out; /* Smooth hover transition for the card itself */
}

.profile::after {
    content: '';
    position: absolute; /* Position relative to the .profile parent */
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: linear-gradient(45deg, #00f0f0, #5f00ff, #00ffff); /* Neon gradient color */
    background-size: 200% 200%; /* For animating the gradient */
    border-radius: 16px; /* Slightly larger radius than the card to account for blur */
    filter: blur(15px); /* Apply a blur to create the glow effect */
    opacity: 0; /* Hidden by default */
    z-index: -1; /* Place behind the actual card content */
    transition: opacity 0.3s ease-out, background-position 0.6s ease-out; /* Smooth transition for opacity and gradient animation */
}

/* Hover effect for the profile card */
.profile:hover {
    transform: translateY(-5px); /* Slightly lift the card on hover */
}

/* Show the glow on hover */
.profile:hover::after {
    opacity: 1; /* Make the glow visible */
    background-position: -100% 0; /* Animate the gradient on hover */
}

.profile-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: flex-start;
    flex-grow: 1;
    margin: min(15px, 3%);
}

.profile-content h3 {
    font-size: clamp(1.5rem, calc(2vw + 0.5rem), 3rem);
    font-family: 'Noto Sans KR', 'Noto Sans SC', 'Poppins', 'Inter', sans-serif;
    font-weight: bold;
    margin: min(6px, 1.5%);
    margin-left: 0;
    position: relative;
    width: max-content;
}

.profile-content h3::after {
    content: '';
    background: linear-gradient(45deg, rgba(128, 128, 128, 0.2), rgba(0, 0, 0, 0.4));
    height: 4px;
    width: 100%;
    position: absolute;
    bottom: -0.1rem;
    left: 0;
}

.profile-content p {
    margin: 0;
    font-family: 'Inter', 'Noto Sans KR', 'Noto Sans SC', 'Poppins', sans-serif;
}

.profile-content a {
    color: inherit;
    text-decoration: underline;
}

.hexagon-clip {
    width: 128px;
    height: 128px;
    margin: 5px;
    margin-right: auto;
    overflow: hidden; /* Hides parts of the image outside the clip-path */
    position: relative;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transform: rotate(90deg);
    flex-shrink: 0;
}

.headshot {
    position: absolute;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transform: rotate(-90deg);
}