#aboutme img{
    object-fit: cover;
    width: 80%;
    margin-top: 15px;
    margin-bottom: 15px;

    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.35);

    user-select: none; /* Prevent text from being highlighted. */
    pointer-events: none; /* Prevent logo from being dragged. */
}

#aboutme p {
    font-size: 28px;
    color: var(--text-primary-color);

    line-height: 1.6;

    padding: 10px;

    width: 80%;

    text-align: left;
}

/* Cal Poly Pomona */
#aboutme .cpp{
    color: #ffb500;
}

#aboutme .cpp::after {
    background-color: #00843d;
}

/* Itch.io */
#aboutme .itch{
    color: #ff1d4e;
}

#aboutme .itch::after {
    background-color: #ffffff;
}

/* Link */
#aboutme .link{
    text-decoration: none;

    white-space: nowrap; 

    -webkit-user-drag: none; /* Prevent link from being dragged. */
    position: relative; /* Required for the pseudo-element */
}

/* Link Animation */
#aboutme .link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px; /* Thickness of the underline */
    opacity: 0;

    z-index: 10; /* Ensure the underline is above the text */

    transform: scaleX(0); /* Start with no width */
    transform-origin: bottom left;
    
    transition: transform 0.3s ease, opacity 0.3s linear; /* Smooth transition */
}

#aboutme .link:hover::after {
    opacity: 1;
    transform: scaleX(1); /* Scale to full width */
    transform-origin: bottom left;
}

/* Media Query for Larger Screens */
@media ((min-width: 768px) and (min-aspect-ratio: 7/10)) {
    #aboutme img{
        width: 60%;
        max-width: 1000px;
    }

    #aboutme p {
        font-size: 22px;

        padding: 10px;

        width: 60%;
        max-width: 1000px;

        line-height: 1.8;
    }
}