body{background:#000 url("https://fineui.com/bbs/uc_server/avatar.php?uid=6832&size=big") repeat scroll center top;
font-size:14px;
font-family:微软雅黑,Arial,Helvetica,sans-serif}
#navigator{background:#000 url("https://fineui.com/bbs/uc_server/avatar.php?uid=6832&size=big") repeat scroll center top}
.postTitle{font-size:21px;}
.catListEssay h3, .catListLink h3, .catListNoteBook h3, .catListTag h3, .catListPostCategory h3, .catListPostArchive h3, .catListArticleArchive h3, .catListImageCategory h3, .mySearch h3, .catListComment h3, .catListView h3, .catListFeedback h3, #blog-sidecolumn .catListTitle{background:#1Faeff;color:#fff}
.newsItem .catListTitle{background:#1Faeff;color:#fff}
.catListEssay ul li, .catListLink ul li, .catListNoteBook ul li, .catListTag ul li, .catListPostCategory ul li, .catListPostArchive ul li, .catListArticleArchive ul li, .catListImageCategory ul li, .mySearch ul li, .catListComment ul li, .catListView ul li, .catListFeedback ul li{margin-top:1em;border-bottom:1px solid #1Faeff}
input.btn_my_zzk {font-size: 14px;width: 70px;background: #1Faeff;text-align: center;border: none;color: #fff;font-family: "Microsoft Yahei","Simsun",Arial;}
#navList a{font:21px/3em "微软雅黑"}

        :root {
            --bg1: #F5C023;
            --bg2: #A66528;
        }

        .monkey {
            background-color: var(--bg1);
            margin: auto;
        }

        .monkey * {
            position: absolute;
            /* transition: all 0.3s; */
        }

        .face-1 {
            z-index: 2;
            width: 48vmin;
            height: 42vmin;
            top: 50vmin;
            left: 50vmin;
            transform: translate(-50%, -50%);
            background-color: var(--bg2);
            border-top-left-radius: 89% 100%;
            border-top-right-radius: 90% 100%;
            border-bottom-right-radius: 90% 77%;
            border-bottom-left-radius: 90% 77%;
        }

        .face-2,
        .face-3,
        .face-4 {
            z-index: 2;
            background-color: var(--bg1);
        }

        .face-2,
        .face-3 {
            top: 35vmin;
            left: 35vmin;
            width: 19vmin;
            height: 25vmin;
            border-top-left-radius: 100% 106%;
            border-top-right-radius: 100% 106%;
            border-bottom-right-radius: 90% 77%;
            border-bottom-left-radius: 90% 77%;
            transform: rotate(13deg);
        }

        .face-3 {
            left: 47vmin;
            transform: scaleX(-1) rotate(13deg);
        }

        .face-4 {
            top: 43vmin;
            left: 32vmin;
            width: 37vmin;
            height: 24vmin;
            border-top-left-radius: 100% 106%;
            border-top-right-radius: 100% 106%;
            border-bottom-right-radius: 90% 88%;
            border-bottom-left-radius: 90% 89%;
        }

        .hair-1,
        .hair-2,
        .hair-3,
        .hair-1::after,
        .hair-2::after,
        .hair-3::after {
            z-index: 1;
            background-color: var(--bg2);
            top: 26vmin;
            left: 41vmin;
            width: 3vmin;
            height: 11vmin;
            border-top-left-radius: 100% 106%;
            border-top-right-radius: 100% 106%;
            border-bottom-right-radius: 90% 88%;
            border-bottom-left-radius: 90% 89%;
            transform: rotate(2deg);
            overflow: inherit;
        }

        .hair-1::after,
        .hair-2::after,
        .hair-3::after {
            content: "";
            display: block;
            margin-left: 2vmin;
            transform: rotate(-4deg) translateY(0.5vmin);

        }

        .hair-2 {
            top: 25vmin;
            left: 45vmin;
            transform: rotate(-6deg);
        }

        .hair-2::after::after {
            transform: rotate(-4deg) translateY(0.5vmin);
        }

        .hair-3 {
            top: 24vmin;
            left: 48vmin;
            width: 4vmin;
            height: 11vmin;
            transform: rotate(-6deg);
        }

        .hair-3::after {
            margin-left: 3vmin;
            transform: rotate(-6deg) translateY(0.5vmin);
        }

        /* 嘴 */
        .mouth-left-1,
        .mouth-right-1 {
            --mouth-rotate: -6deg;
            z-index: 2;
            top: 56vmin;
            left: 44.6vmin;
            width: 5vmin;
            height: 2vmin;
            background-color: var(--bg1);
            border: 0.5vmin solid var(--bg2);
            border-top-left-radius: 100% 106%;
            border-top-right-radius: 100% 106%;
            border-bottom-right-radius: 90% 88%;
            border-bottom-left-radius: 90% 89%;
            transform: rotate(var(--mouth-rotate));
            overflow: inherit;
        }

        .mouth-left-1::after,
        .mouth-right-1::after {
            content: "";
            display: block;
            width: 107%;
            height: 100%;
            background-color: var(--bg1);
            margin-top: -0.8vmin;
            margin-left: 0.1vmin;
        }

        .mouth-right-1 {
            left: 50.2vmin;
            transform: scaleX(-1) rotate(var(--mouth-rotate));
        }

        /* 嘴 */

        /* 耳朵 */
        .ear-left-1,
        .ear-right-1 {
            z-index: 1;
            top: 45vmin;
            left: 19vmin;
            width: 10vmin;
            height: 10vmin;
            background-color: var(--bg1);
            border: 1vmin solid var(--bg2);
            border-top-left-radius: 100% 106%;
            border-top-right-radius: 100% 106%;
            border-bottom-right-radius: 90% 88%;
            border-bottom-left-radius: 90% 89%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .ear-right-1 {
            left: 69vmin;
            transform: scaleX(-1);
        }

        .ear-left-1::after,
        .ear-right-1::after {
            content: "";
            display: block;
            width: 60%;
            height: 58%;
            top: 50%;
            left: 50%;
            background-color: var(--bg2);
            border-top-left-radius: 100% 106%;
            border-top-right-radius: 100% 106%;
            border-bottom-right-radius: 90% 88%;
            border-bottom-left-radius: 90% 89%;
        }

        /* 耳朵 */


        /* 眼睛 */
        .eye-left-1,
        .eye-right-1 {
            z-index: 2;
            top: 48vmin;
            left: 34vmin;
            width: 10vmin;
            height: 2vmin;
            background-color: var(--bg2);
            border-radius: 3vmin;
            overflow: inherit;

            transition: transform 0.5s;
        }

        .eye-right-1 {
            left: 57vmin;
        }

        .eye-left-1::before,
        .eye-right-1::before {
            content: "";
            display: block;
            width: 42%;
            height: 92%;
            background-color: var(--bg1);
            border: 0.5vmin solid var(--bg2);
            border-bottom: none;
            margin-top: -10vmin;
            margin-left: 5vmin;
            border-radius: 75% 69% 0 0/150% 142% 0 0;
            transform: rotate(-4deg);
        }

        .eye-right-1::before {
            transform: rotate(4deg);
            margin-left: 0vmin;
        }

        div:hover~.eye-right-1,
        div:hover~.eye-left-1 {
            transform: translateY(-1vmin);
        }

        .eye-right-1::after,
        .eye-left-1::after {
            content: "";
            display: block;
            width: 2vmin;
            height: 2vmin;
            margin-top: 9vmin;
            margin-left: 6vmin;
            border-radius: 50%;
            background-color: var(--bg2);
            transition: opacity 0.5s;
            opacity: 0;
        }

        div:hover~.eye-right-1::after,
        div:hover~.eye-left-1::after {
            opacity: 1;
        }

        /* 眼睛 */

        /* 腮红 */
        .face-6,
        .face-6::before,
        .face-6::after,
        .face-7,
        .face-7::before,
        .face-7::after {
            z-index: 2;
            background-color: var(--bg2);
            top: 50vmin;
            left: 32vmin;
            width: 2.5vmin;
            height: 5vmin;
            border-top-left-radius: 100% 106%;
            border-top-right-radius: 100% 106%;
            border-bottom-right-radius: 100% 95%;
            border-bottom-left-radius: 100% 95%;
            transform: rotate(37deg);
            overflow: inherit;
        }

        .face-6::before,
        .face-6::after,
        .face-7::before,
        .face-7::after {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            background-color: var(--bg2);
        }

        .face-6::before,
        .face-7::before {
            margin-left: 2vmin;
            margin-top: -1.5vmin;
            transform: rotate(20deg);
        }

        .face-6::after,
        .face-7::after {
            margin-left: 4vmin;
            margin-top: -6.5vmin;
            transform: rotate(18deg);
        }

        .face-7 {
            left: 60vmin;
        }

        /* 腮红 */

        /* 动画 */
        .ear {
            animation: ear-animation 3s linear;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-delay: 0.1s;
        }

        @keyframes ear-animation {
            80% {
                margin-top: 0vmin;
            }

            90% {
                margin-top: 0.5vmin;
            }

            100% {
                margin-top: -0.1vmin;
            }
        }

        .hair {
            animation:hair-animation 3s linear;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-delay: 1s;
        }

        @keyframes hair-animation {
            80% {
                transform: rotate(2deg);
            }
            100% {
                transform: rotate(-5deg);
            }
        }