/* Here is your custom css styles. */

/* hexo-filter-github-emojis */
.github-emoji{
    height: 2em;
    width: 2em;
    display: inline-block !important;
    position: relative;
    margin: 0 3px !important;
    padding: 0;
}
.github-emoji:hover{
    animation: emoji-face 5s infinite ease-in-out;
}
@keyframes emoji-face {
    2% {
        transform: translate(0, 1.5px) rotate(1.5deg);
    }
    4% {
        transform: translate(0, -1.5px) rotate(-0.5deg);
    }
    6% {
        transform: translate(0, 1.5px) rotate(-1.5deg);
    }
    8% {
        transform: translate(0, -1.5px) rotate(-1.5deg);
    }
    10% {
        transform: translate(0, 2.5px) rotate(1.5deg);
    }
    12% {
        transform: translate(0, -0.5px) rotate(1.5deg);
    }
    14% {
        transform: translate(0, -1.5px) rotate(1.5deg);
    }
    16% {
        transform: translate(0, -0.5px) rotate(-1.5deg);
    }
    18% {
        transform: translate(0, 0.5px) rotate(-1.5deg);
    }
    20% {
        transform: translate(0, -1.5px) rotate(2.5deg);
    }
    22% {
        transform: translate(0, 0.5px) rotate(-1.5deg);
    }
    24% {
        transform: translate(0, 1.5px) rotate(1.5deg);
    }
    26% {
        transform: translate(0, 0.5px) rotate(0.5deg);
    }
    28% {
        transform: translate(0, 0.5px) rotate(1.5deg);
    }
}

/* Homepage cards share each row's height while keeping every tag visible. */
#articles.article-grid .article-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 21px;
    padding: 0 0.75rem;
}
#articles.article-grid .article-row::after { display: none; }
#articles.article-grid .article-row > .article {
    display: flex;
    float: none;
    width: auto;
    min-width: 0;
    margin-left: 0;
    padding: 0;
}
#articles.article-grid .article > .card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    margin: 0;
}
#articles.article-grid .card > a { flex-shrink: 0; }
#articles.article-grid .article-content { flex: 1; }
#articles.article-grid .article-tags {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-content: flex-start;
    gap: 4px 6px;
}
#articles.article-grid .article-tags a { min-width: 0; max-width: 100%; }
#articles.article-grid .article-tags .chip {
    max-width: 100%;
    height: auto;
    min-height: 22px;
    margin: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}
@media only screen and (min-width: 601px) {
    #articles.article-grid .article-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media only screen and (min-width: 993px) {
    #articles.article-grid .article-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}