@keyframes clock {
    from {
        transform: rotate(0) skewY(-50deg);
    }
    to {
        transform: rotate(360deg) skewY(-50deg);
    }
}

[data-contributor="Nathan Mifsud"] {
    --clock-bg: #bcbcf6;
    --clock-hand: #a4a4f4;
}

[data-contributor="Nathan Mifsud"]:hover,
[data-contributor="Nathan Mifsud"]:focus,
[data-contributor="Nathan Mifsud"][data-on="true"] {
    --clock-bg: #ebc960;
    --clock-hand: #ddb028;
}

[data-contributor="Nathan Mifsud"] .type {
    background: var(--clock-bg);
    overflow: hidden;
}

[data-contributor="Nathan Mifsud"] .type:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 50%;
    transform-origin: 0% 100%;
    filter: brightness(0.8);
    background: var(--clock-hand);
    transform: skewY(-50deg);
    animation: clock steps(9) infinite 13500ms;
}

[data-contributor="Nathan Mifsud"] .type span {
    position: relative;
    color: black;
}

[data-contributor="Nathan Mifsud"] .type span:not([lang="mt"]) {
    font-size: 0.8125em;
}