@keyframes flash {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.animated-letter {
    position: relative;
}

.letter {
    display: inline-block;
    transition: color 0.5s ease-in-out;
}

.letter::before,
.letter::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.letter::before {
    background-color: rgba(161, 100, 104, 0.5);
    transform: scale(0);
}

.letter::after {
    background-color: rgba(161, 100, 104, 0.5);
    transform: scale(0);
}

.letter:hover::before {
    opacity: 1;
    transform: scale(1);
}

.letter:hover::after {
    opacity: 1;
    transform: scale(1);
}

.animated-letter {
    animation: flash 1.5s infinite;
}


.social-link {
    font-size: 35px;
    text-decoration: none;
}

/* HTML: <div class="loader"></div> */
.loader {
    width: 50px;
    padding: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #adb5bd;
    --_m:
        conic-gradient(#0000 10%, #000),
        linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
    mask: var(--_m);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    animation: l3 1s infinite linear;
}

@keyframes l3 {
    to {
        transform: rotate(1turn)
    }
}