site/_includes/styles/pages/admins.css

/* ╭─────────────────────────────────────╮
/  │            _           _            │
/  │   __ _  __| |_ __ ___ (_)_ __  ___  │
/  │  / _` |/ _` | '_ ` _ \| | '_ \/ __| │
/  │ | (_| | (_| | | | | | | | | | \__ \ │
/  │  \__,_|\__,_|_| |_| |_|_|_| |_|___/ │
/  ╰─────────────────────────────────────╯
/  admins - styling the admin cards on the admins page (admin.md) */

#admins section .card {
    overflow: hidden;
    position: relative;

    h4, p {
        z-index: 100;
    }

    .sona {
        bottom: -3rem;
        max-width: 20rem;
        opacity: .5;
        position: absolute;
        right: -.5rem;
        transform: rotate(16deg) scaleX(-1);
        transition: 0.2s;

        &:hover {
            opacity: 1;
            transition: 0.2s;
        }
    }

    &.sneexy {
        --accent: #65ff88;
    }

    &.senil {
        --accent: #008E54;

        .button-container .button:hover {
            color: white !important;
        }

        .sona {
            bottom: -9rem;
        }
    }

    &.unnick {
        --accent: #0094FF;

        .button-container .button:hover {
            color: white !important;
        }

        .sona {
            bottom: -2rem;
        }
    }

    &.melontini {
        --accent: #e05188;

        .button-container .button:hover {
            color: white !important;
        }
    }

    @media screen and (max-width: 835px) {
        &:has(.sona) {
            padding-bottom: 5rem;

            .sona {
                pointer-events: none !important;
            }
        }
    }

    @media screen and (max-width: 375px) {
        &:has(.sona) {
            padding-bottom: 0rem !important;

            .sona {
                display: none !important;
            }
        }
    }
}