/* 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);
    }
}

/* 卡片封面图上的白色标题：加文字阴影，浅色封面图也能看清 */
.card .card-image .card-title {
    text-shadow: 0 2px 8px rgba(0, 0, 0, .72), 0 1px 2px rgba(0, 0, 0, .55);
}

/*
  顶部 Logo 的焦点框。
  点过 Logo（或用 Tab 走到它）之后，浏览器会在 <a> 上画一圈默认焦点框——
  在 teal 导航栏上呈现为很显眼的黑框，且不点别处就一直留着。
  这里：鼠标操作不显示焦点框；键盘 Tab 导航时改成柔和的白色圆角描边（保住可访问性）。
*/
header .brand-logo a:focus:not(:focus-visible) {
    outline: none;
}
header .brand-logo a:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .85);
    outline-offset: 2px;
    border-radius: 6px;
}