.site-title {
    font-family: var(--sans-serif);
    font-size: clamp(1.5rem, 6vw, var(--h3));
    text-wrap: balance;
    font-weight: bold;
    margin-block-start: 0;
}

.site-title > * {
  font-family: inherit;
}

@media (max-width: 375px) {
    .profile-pic-closeup {
        display: none;
    }
}

.site-title > .u-url {
    text-decoration: none;
}

@keyframes animate-site-title {
    0% {
        transform-origin: top left;
        transform: rotate(0deg);
    }

    100% {
        transform-origin: top left;
        transform: rotate(0deg);
    }
}

/* Source: https://codepen.io/nodws/pen/WNjXbr */
@keyframes blink {
    78% {
        color: inherit;
        text-shadow: inherit;
    }

    79% {
        color: #333;
    }

    80% {

        text-shadow: none;
    }

    81% {
        color: inherit;
        text-shadow: inherit;
    }

    82% {
        color: #333;
        text-shadow: none;
    }

    83% {
        color: inherit;
        text-shadow: inherit;
    }

    92% {
        color: #333;
        text-shadow: none;
    }

    92.5% {
        color: inherit;
        text-shadow: inherit;
    }
}

.site-title-blinker {
    display: inline-block;
    background-color: black;
    color: white;
    padding: 0 8px;
    margin-block-start: 0;

    text-decoration: none;

    animation-name: animate-site-title;
    animation-delay: 2s;
    animation-duration: 200ms;
    animation-fill-mode: forwards;

    text-shadow: 0 -40px 100px, 0 0 1em #f44, 0 0 0.5em #f44;
}

.site-title-blinker .blinketh-the-first {
    animation: blink linear infinite 2s;
}

.site-title-blinker .blinketh-the-second {
    animation: blink linear infinite 3s;
}