/* Source Han Serif SC */
@import url('https://cdn.jsdelivr.net/npm/cn-fontsource-source-han-serif-sc-vf/font.css');
/* Source Han Sans SC */
@import url('https://cdn.jsdelivr.net/npm/cn-fontsource-source-han-sans-sc-vf/font.css');
/* Courier Prime */
@import url('https://cdn.jsdelivr.net/npm/@fontsource/courier-prime@latest/index.css');

@media (prefers-color-scheme: dark) {
    body {
        background-color: #111;
        color: #eee;
    }

    a {
        color: #aef;
    }

    a:hover {
        color: #fcf
    }

    .english_name {
        color: #aaa;
    }

    .english_name:hover {
        color: #fff;
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
    }

    .chenx_icon {
        box-shadow: 0 0.5px 4px rgba(255, 255, 255, 0.2);
    }

    .chenx_icon:hover {
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
    }
}

@media (prefers-color-scheme: light) {
    body {
        background-color: white;
        color: black;
    }

    a {
        color: #04a;
    }

    a:hover {
        color: #61d
    }

    .english_name {
        color: #555;
    }

    .english_name:hover {
        color: #333;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    }

    .chenx_icon {
        box-shadow: 0 0.5px 3px rgba(0, 0, 0, 0.2);
    }

    .chenx_icon:hover {
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    }
}

html {
    font-size: medium;
    font-weight: 300;
    font-family: 'Courier Prime', 'Courier New', 'LXGW WenKai', SimSun;
    line-height: 1.5;
}

body {
    margin: 10px auto;
    padding: 20px;
    max-width: 650px;
}

header {
    font-size: 0.8em;
}

div {
    margin: 10px;
}

h1 {
    font-size: 2em;
    font-weight: bold;
    font-family: 'Source Han Sans SC VF', SimHei;
}

h2 {
    font-family: 'Source Han Sans SC VF', SimHei;
}

.english_name {
    display: inline-block;
    font-weight: bolder;
    font-family: 'Source Han Serif SC VF', SimSun;
    transition: all .3s ease-in-out;
}

.english_name:hover {
    transform: translateY(-1px);
}

@keyframes wave-animation {
    0% {
        transform: rotate(0deg);
    }

    30% {
        transform: rotate(-10deg);
    }

    70% {
        transform: rotate(12deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.wave {
    display: inline-block;
    transform-origin: 70% 70%;
    animation: wave-animation 0.5s;
}

.wave:hover {
    animation: none;
}

.wave:not(:hover) {
    animation: wave-animation 0.5s;
}

footer {
    font-size: 0.7em;
    text-align: center;
}

td {
    vertical-align: top;
    padding-right: 8px;
}

a {
    text-decoration: none;
    transition: all .2s ease-in-out;
}

.chenx_icon {
    width: 40px;
    height: 40px;
    translate: 0 5px;
    border-radius: 50%;
    vertical-align: baseline;
    transition: all .3s ease-in-out;
}

.chenx_icon:hover {
    transform: translateY(-1px);
}


@keyframes typing {
  from { width: 0; }
  to { width: 13.2em; }
}

@keyframes blink-caret {
  from, to { box-shadow: 1px 0 0 0 transparent; }
  50% { box-shadow: 1px 0 0 0; }
}

.typing {
    display: inline-flex;
    width: 13.2em;
    white-space: nowrap;
    border-right: 2px solid transparent;
    animation: typing 2.2s steps(22, end), blink-caret .75s step-end 4;
    overflow: hidden;
}

.typing:hover {
    animation: none;
}

.typing:not(hover) {
    animation: typing 2.2s steps(22, end), blink-caret .75s step-end 4;
}

@keyframes shake-animation {
    0% {
        transform: translateX(0px);
    }

    20% {
        transform: translateX(-2px);
    }

    40% {
        transform: translateX(4px);
    }
    
    60% {
        transform: translateX(-4px);
    }
    
    80% {
        transform: translateX(2px);
    }

    100% {
        transform: translateX(0px);
    }
}

.omagari_hare {
    margin-bottom: -12px;
}

.omagari_hare:hover {
    animation: shake-animation 0.5s;
}