/*==============================首页广告去除==============================*/
#aswift_1_host {
  display: none;
}
/*==============================首页一级标题==============================*/
  #Header1_HeaderTitle {
    
        color: #6bd2d896;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 13rem;
        height: 3rem;
        background-size: 300% 300%;
        backdrop-filter: blur(1rem);
        border-radius: 5rem;
        transition: 0.5s;
        animation: gradient_301 5s ease infinite;
        border: double 4px transparent;
        background-image: linear-gradient(#212121, #212121), linear-gradient(137.48deg, #ffdb3b 10%, #FE53BB 45%, #8F51EA 67%, #0044ff 87%);
        background-origin: border-box;
        background-clip: content-box, border-box;
    }
 #Header1_HeaderTitle:hover #container-stars {
        z-index: 1;
        background-color: #212121;
    }

    #Header1_HeaderTitle:hover {
        transform: scale(1.1)
    }

    #Header1_HeaderTitle:active {
        border: double 4px #FE53BB;
        background-origin: border-box;
        background-clip: content-box, border-box;
        animation: none;
    }

    #Header1_HeaderTitle:active .circle {
        background: #FE53BB;
    }

  /*以下是对星空的设置*/
 #container-stars {
        position: fixed;
        z-index: -1;
        width: 100%;
        height: 100%;
        overflow: hidden;
        transition: 0.5s;
        backdrop-filter: blur(1rem);
        border-radius: 5rem;
    }

    #glow {
        position: absolute;
        display: flex;
        width: 12rem;
    }

    .circle {
        width: 100%;
        height: 30px;
        filter: blur(2rem);
        animation: pulse_3011 4s infinite;
        z-index: -1;
    }

    .circle:nth-of-type(1) {
        background: rgba(254, 83, 186, 0.636);
    }

    .circle:nth-of-type(2) {
        background: rgba(142, 81, 234, 0.704);
    }

    #stars {
        position: relative;
        background: transparent;
        width: 200rem;
        height: 200rem;
    }


    #stars::after {
        content: "";
        position: absolute;
        top: -10rem;
        left: -100rem;
        width: 100%;
        height: 100%;
        animation: animStarRotate 90s linear infinite;
    }
    #stars::after {
        background-image: radial-gradient(#ffffff 1px, transparent 1%);
        background-size: 50px 50px;
    }

    #stars::before {
        content: "";
        position: absolute;
        top: 0;
        left: -50%;
        width: 170%;
        height: 500%;
        animation: animStar 60s linear infinite;
    }

    #stars::before {
        background-image: radial-gradient(#ffffff 1px, transparent 1%);
        background-size: 50px 50px;
        opacity: 0.5;
    }

    @keyframes animStar {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(-135rem);
        }
    }

    @keyframes animStarRotate {
        from {
            transform: rotate(360deg);
        }

        to {
            transform: rotate(0);
        }
    }

    @keyframes gradient_301 {
        0% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }
    }
@keyframes pulse_3011 {
        0% {
            transform: scale(0.75);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
        }

        70% {
            transform: scale(1);
            box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
        }

        100% {
            transform: scale(0.75);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        }
    
    }
/*==============================首页一级标题==============================*/

/*==============================评论猫咪样式调整==============================*/
.comment_textarea {
    padding: 8px 14px;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #ddd;
    width: 971px;
    /* max-width: 100%; */
    border-radius: 3px;
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    margin-bottom: -57px;
}
/*==============================评论猫咪样式调整==============================*/

/*==============================消除博文中的块==============================*/
pre.prettyprint code {
    font-family: "Courier New",sans-serif !important;
    font-size: 12px !important;
    line-height: 20px;
    background-color: #f5f5f5 !important;
    border: 1px solid #ccc !important;
    padding: 0 5px !important;
    border-radius: 3px !important;
    line-height: 1.8;
    margin: 1px 5px;
    vertical-align: middle;
    display: none;
    overflow-x: auto;
}
/*==============================消除博文中的块==============================*/

/*==============================背景==============================*/
/*https://images.cnblogs.com/cnblogs_com/zhangzhixi/1828288/o_210101094110demo01.jpg*/
/*210101094424demo02.jpg*/
body{
    background: rgba(12, 100, 129, 1) url('https://images.cnblogs.com/cnblogs_com/zhangzhixi/1828288/o_210214120106test1.jpg') fixed no-repeat;
    background-position: 50% 5%;
    background-size: cover;
}

h2 {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.5;
    margin: 10px 0;
    background: #03e6c7;
    border-radius: 10px;
    width: 1310px;
}
#cnblogs_post_body h2 {
    font-size: 25px;
    font-weight: bold;
    line-height: 1.5;
    margin: 10px 0;
}

h3 {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5;
    margin: 10px 0;
    background: #20b94f;
    border-radius: 20px;
    width: 1200px;
}
#cnblogs_post_body h3 {
    font-size: 16px;
    font-weight: bold;
    line-height: 2.0;
    margin: 10px 0;
    transform: translate(2px,0px);
}
h4 {
    background: #87ff7985;
    line-height: 1.6;
    color: #333;
    border-radius: 10px;
    width: 800px;
    height: 25px;
font-size: 15px;
}

#cnblogs_post_body h4 {
font-size: 15px;
    background: #87ff7985;
    line-height: 1.6;
    color: #333;
    border-radius: 5px;
    width: 1000px;
    height: 25px;
    transform: translate(10px,0px);
}

/*引用*/
.postBody blockquote {
    background: #87ff7985;
    line-height: 0.6;
    color: #333;
    border-radius: 10px;
    width: 800px;
    height: 25px;
}

.postBody li, .postCon li {
    list-style-type: disc;
    margin-bottom: 1em;
    color: #4b00fb;
}
/*==================================================*/
#home {
    margin: 0 auto;
    /**width: 97%;**//*原始65*/
    min-width: 980px;/*页面顶部的宽度*/
    background-color: rgba(245, 245, 245, -0.3);
    padding: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}

#blogTitle {
    height: 100px;  /*高度*/
    clear: both;
    background-color: rgba(240,255,255,0);  //博客标题的背景
}
#blogTitle h1 {
    font-size: 36px;
    font-weight: bold;
    line-height: 1.8em;/*原始 1.6em*/
    margin-top: 10px;/*原始 15px */
    color: #FF1493;
}
/*小标题文字设置*/
#blogTitle h2 {
    font-weight: normal;
    font-size: 18px;
    line-height: 1.8;
    color: #ffb57c;
    font-weight: bold;
    text-align: right;
    float: right;
    background: none;
}


#navigator {
    background: #d56e6e; //标题栏下的颜色
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    clear: both;
    border-radius: 10px;
}
#navList a:link, #navList a:visited, #navList a:active{
    color: #FFFFFF;
    font-size: 18px;
    font-weight: bold;
}
.blogStats{
    color: #eee;
}
.postTitle {
    border-left: 8px solid rgba(132,112,255, 0);
    margin-left: 10px;
    margin-bottom: 10px;
    font-size: 20px;
    float: right;
    width: 100%;
    clear: both;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    color:     #FF6A6A;
    transition: all 0.4s linear 0s;
}
.postTitle a:hover {
    margin-left: 30px;
    color: #EE6363;
    text-decoration: none;
}
.postCon {
    float: right;
    line-height: 1.5em;
    width: 100%;
    clear: both;
    padding: 10px 0;
}

.day .postTitle a {
    padding-left: 10px;
}
.day {
    background: rgba(255, 255, 255, 0.5);
}


.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory,
.catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView,
.catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar
{
    background: rgba(255, 255, 255, 0.5);
    margin-bottom: 35px;
    word-wrap: break-word;
}

.CalTitle{
    background: rgba(255, 255, 255, 0);
}
.catListTitle{
    background-color: #d56e6e; //栏目的条纹颜色
}

#topics{
    background: rgba(255, 255, 255, 0.5);
}

.c_ad_block{
    display: none;
}

#tbCommentBody{
    width: 100%;
    height: 200px;
    background: rgba(255, 255, 255, 0.5);
}

#q{background: rgba(255, 255, 255, 0);}

.CalNextPrev{background: rgba(255, 255, 255, 0);}

.cnblogs_code{
    background: rgba(255, 255, 255, 0);
}

.cnblogs_code div{
    background: rgba(255, 255, 255, 0);
}

.cnblogs_code_toolbar{
    background: rgba(255, 255, 255, 0);
}
#main{min-width: 640px;}
.entrylist{
    background: rgba(255, 255, 255, 0.5);
}
#ad_t2 {
    margin-top: 5px;
    line-height: 1.8;
    display: none;
}
/*去除评论区的回到前面，刷新评论*/
#comment_nav {
    padding-top: 10px;
    display:none;
}

/*去除广告*/
div[id^="ad_"] {
    display: none;
}
div[class^="c_ad"] {
    display: none;
}
div[id^="under_post"] {
    display: none;
}
/*=========================评论区图片样式=======================================*/
/*评论区*/
#commentform_title, .feedback_area_title {font: normal normal 16px/35px"Microsoft YaHei";margin: 10px 0 30px;border-bottom: 2px solid #ccc;background-image: none;padding: 0;border-bottom: 0;}
#commentform_title:after, .feedback_area_title:after {content: '';display: block;width: 100%;text-align: center;position: relative;bottom: 16px;left: 110px;border-bottom: 1px dashed #e9e9e9;}
#tbCommentAuthor {padding-left: 10px;color: #555;border: 1px solid #ddd;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;width: 320px;height: 20px;background: #fff;}
.commentbox_title {width: 100%;}
div.commentform p{margin-bottom: 20px}
textarea#tbCommentBody {width: calc(100% - 20px);border-radius: 10px;outline: 0;padding: 10px;height: 200px;position: relative;background: #fff url(https://images.cnblogs.com/cnblogs_com/elkyo/1566714/o_comment-bg.png);background-size: contain;background-repeat: no-repeat;background-position: right;resize: vertical;}
/*评论列表*/
.feedbackItem {margin-top: 30px;}
.feedbackListSubtitle {clear: both;color: #a8a8a8;padding: 8px 5px;}
.feedbackManage {width: 200px;text-align: right;float: right;}
.feedbackListSubtitle a:link, .feedbackListSubtitle a:visited, .feedbackListSubtitle a:active {color: #777;font-weight: 450;}
.louzhu {background: transparent url(/images/icoLouZhu.gif) no-repeat scroll right top;padding-right: 16px;}
.feedbackCon {border-bottom: 1px solid #EEE;padding: 10px 20px 10px 5px;min-height: 35px;_height: 35px;margin-bottom: 1em;line-height: 1.5;}
.comment-avatar {width: 48px;height: 48px;border: 1px solid #dcd6b3;padding: 3px;border-radius: 50%;-webkit-transition: all .6s ease-out;-moz-transition: all .5s ease-out;-ms-transition: all .5s ease-out;-o-transition: all .5s ease-out;transition: all .5s ease-out;}
.blog_comment_body {display: inline-block;width: 70%;margin-left: 15px;vertical-align: initial!important;font-family: Lato, Helvetica, Arial, sans-serif;}
.comment_vote {padding-right: 10px;}
.comment_vote a {color: #999;}
.blog_comment_body a {color: #2daebf;}
.comment-avatar:hover {transform: rotateZ(360deg);}
#comment_nav{padding-top: 10px;}
.blog_comment_body img {max-width: 100px;}
/*提交评论*/
.comment_btn {width: 180px;height: 38px;padding: 8px 20px;text-align: center;font-size: 14px;color: #fff;border: 0;background: #7396a7 !important;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;-webkit-transition: all .4s ease;-moz-transition: all .4s ease;-o-transition: all .4s ease;-ms-transition: all .4s ease;transition: all .4s ease;cursor: pointer;display: inline-block;vertical-align: middle;outline: 0;text-decoration: none;}
.comment_btn:hover {background: #8cb7cc!important;}
p#commentbox_opt {text-align: center;}
/*=========================评论区图片样式=======================================*/

/*=========================评论按钮=======================================*/
#btn_comment_submit {
  border: none;
  height: 48px;
  width: 120px;
  border-radius: 71px
}/*评论按钮*/
.comment_btn {
  font-family: 'Microsoft Yahei';
  border: none;
  height: 48px;
  width: 120px;
  font-size: 18px;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  display: inline-block;
  background: #159B76;
  color: #fff;
}
#btn_comment_submit:hover {
  background: #159B76;
}
/*=========================评论按钮=======================================*/

/*=========================评论列表=======================================*/
.feedback_area_title {
    padding: 3px;
    font-size: 25px;
    font-weight: bold;
    color: #dca01f;
}
.feedbackListSubtitle {
  font-size: 12px;
  color: #888;
}
.feedbackListSubtitle a {
  color: #888;
}
.comment_quote {
  background: #FCFAAC;
  padding: 15px;
  border: 1px solid #CCC;
}
/*设置了发表评论四个字不显示*/
#commentform_title {
  color: #159B76;
  background-image: none;
  background-repeat: no-repeat;
  margin-bottom: 10px;
  padding: 10px 20px 10px 10px;
  font-size: 24px;
  font-weight: bold;
  border-bottom: solid 6px #159B76;
    display: none;
}/*评论框*/
#comment_form {
  margin: 10px 0;
  padding: 0;
}
.commentform {
  margin: 10px 0;
  padding: 10px 20px;
  background: #fff;
}/*评论输入域*/
#tbCommentBody {
  font-family: 'MIcrosoft Yahei';
  margin-top: 10px;
  width: 940px;
  max-width: 940px;
  min-width: 940px;
  background: white;
  color: #333;
  border: 2px solid #fff;
  box-shadow: inset 0 0 8px #aaa;
  padding: 10px;
  height: 120px;
  font-size: 14px;
  min-height: 120px;
}/*评论条目*/
.feedbackItem {
    font-size: 14px;
    line-height: 8px;
    margin: 10px 0;
    padding: 20px;
    background: #f5f6f0;
    box-shadow: 0 0 5px #aaa;
    border-radius: 40px;
}
.feedbackListSubtitle {
  font-weight: normal;
}
/*==============================================================*/
/*清除最底下的标识*/
#footer {
    text-align: center;
    min-height: 15px;
    _height: 15px;
    border-top: 1px solid #000;
    margin-top: 10px;
    padding-top: 10px;
    margin-bottom: 10px;
    display: none;
}
/*去除评论的退出按钮*/
#commentbox_opt a {
    padding-left: 10px;
    border: none;
    height: 48px;
    width: 120px;
    display: none;
}
/*提交按钮*/
}

#btn_comment_submit {
    width: 1536px;
    height: 48px;
    border-radius: 33px;
}
.c_ad_block, .under-post-card {
    margin-top: 10px;
    line-height: 1.5;
    display: none;
}
#cnblogs_ch {
    margin-top: 5px;
    line-height: 1.8;
    display: none;
}
/*======================页面定制CSS：牛顿摆========================================*/
.newtons-cradle {
    left: 110px;
    bottom: -120px;
 --uib-size: 50px;
 --uib-speed: 1.2s;
 --uib-color: #474554;
 position: relative;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 width: var(--uib-size);
 height: var(--uib-size);
}

.newtons-cradle__dot {
 position: relative;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 height: 100%;
 width: 25%;
 -webkit-transform-origin: center top;
     -ms-transform-origin: center top;
         transform-origin: center top;
}

.newtons-cradle__dot::after {
 content: '';
 display: block;
 width: 100%;
 height: 25%;
 border-radius: 50%;
 background-color: var(--uib-color);
}

.newtons-cradle__dot:first-child {
 -webkit-animation: swing var(--uib-speed) linear infinite;
         animation: swing var(--uib-speed) linear infinite;
}

.newtons-cradle__dot:last-child {
 -webkit-animation: swing2 var(--uib-speed) linear infinite;
         animation: swing2 var(--uib-speed) linear infinite;
}

@-webkit-keyframes swing {
 0% {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
 }

 25% {
  -webkit-transform: rotate(70deg);
          transform: rotate(70deg);
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
 }

 50% {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
 }
}

@keyframes swing {
 0% {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
 }

 25% {
  -webkit-transform: rotate(70deg);
          transform: rotate(70deg);
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
 }

 50% {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
 }
}

@-webkit-keyframes swing2 {
 0% {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
 }

 50% {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
 }

 75% {
  -webkit-transform: rotate(-70deg);
          transform: rotate(-70deg);
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
 }
}

@keyframes swing2 {
 0% {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
 }

 50% {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
 }

 75% {
  -webkit-transform: rotate(-70deg);
          transform: rotate(-70deg);
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
 }
}
/*======================页面定制CSS：小松鼠========================================*/

.wheel-and-hamster {
  --dur: 1s;
  position: relative;
  width: 12em;
  height: 12em;
  font-size: 14px;
  left: 1422px;
  bottom: -165px;
}


.wheel,
.hamster,
.hamster div,
.spoke {
  position: absolute;
}

.wheel,
.spoke {
  border-radius: 50%;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.wheel {
  background: radial-gradient(100% 100% at center,hsla(0,0%,60%,0) 47.8%,hsl(0,0%,60%) 48%);
  z-index: 2;
}

.hamster {
  -webkit-animation: hamster var(--dur) ease-in-out infinite;
          animation: hamster var(--dur) ease-in-out infinite;
  top: 50%;
  left: calc(50% - 3.5em);
  width: 7em;
  height: 3.75em;
  -webkit-transform: rotate(4deg) translate(-0.8em,1.85em);
      -ms-transform: rotate(4deg) translate(-0.8em,1.85em);
          transform: rotate(4deg) translate(-0.8em,1.85em);
  -webkit-transform-origin: 50% 0;
      -ms-transform-origin: 50% 0;
          transform-origin: 50% 0;
  z-index: 1;
}

.hamster__head {
  -webkit-animation: hamsterHead var(--dur) ease-in-out infinite;
          animation: hamsterHead var(--dur) ease-in-out infinite;
  background: hsl(30,90%,55%);
  border-radius: 70% 30% 0 100% / 40% 25% 25% 60%;
  -webkit-box-shadow: 0 -0.25em 0 hsl(30,90%,80%) inset,
		0.75em -1.55em 0 hsl(30,90%,90%) inset;
          box-shadow: 0 -0.25em 0 hsl(30,90%,80%) inset,
		0.75em -1.55em 0 hsl(30,90%,90%) inset;
  top: 0;
  left: -2em;
  width: 2.75em;
  height: 2.5em;
  -webkit-transform-origin: 100% 50%;
      -ms-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
}

.hamster__ear {
  -webkit-animation: hamsterEar var(--dur) ease-in-out infinite;
          animation: hamsterEar var(--dur) ease-in-out infinite;
  background: hsl(0,90%,85%);
  border-radius: 50%;
  -webkit-box-shadow: -0.25em 0 hsl(30,90%,55%) inset;
          box-shadow: -0.25em 0 hsl(30,90%,55%) inset;
  top: -0.25em;
  right: -0.25em;
  width: 0.75em;
  height: 0.75em;
  -webkit-transform-origin: 50% 75%;
      -ms-transform-origin: 50% 75%;
          transform-origin: 50% 75%;
}

.hamster__eye {
  -webkit-animation: hamsterEye var(--dur) linear infinite;
          animation: hamsterEye var(--dur) linear infinite;
  background-color: hsl(0,0%,0%);
  border-radius: 50%;
  top: 0.375em;
  left: 1.25em;
  width: 0.5em;
  height: 0.5em;
}

.hamster__nose {
  background: hsl(0,90%,75%);
  border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%;
  top: 0.75em;
  left: 0;
  width: 0.2em;
  height: 0.25em;
}

.hamster__body {
  -webkit-animation: hamsterBody var(--dur) ease-in-out infinite;
          animation: hamsterBody var(--dur) ease-in-out infinite;
  background: hsl(30,90%,90%);
  border-radius: 50% 30% 50% 30% / 15% 60% 40% 40%;
  -webkit-box-shadow: 0.1em 0.75em 0 hsl(30,90%,55%) inset,
		0.15em -0.5em 0 hsl(30,90%,80%) inset;
          box-shadow: 0.1em 0.75em 0 hsl(30,90%,55%) inset,
		0.15em -0.5em 0 hsl(30,90%,80%) inset;
  top: 0.25em;
  left: 2em;
  width: 4.5em;
  height: 3em;
  -webkit-transform-origin: 17% 50%;
      -ms-transform-origin: 17% 50%;
          transform-origin: 17% 50%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.hamster__limb--fr,
.hamster__limb--fl {
  -webkit-clip-path: polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%);
          clip-path: polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%);
  top: 2em;
  left: 0.5em;
  width: 1em;
  height: 1.5em;
  -webkit-transform-origin: 50% 0;
      -ms-transform-origin: 50% 0;
          transform-origin: 50% 0;
}

.hamster__limb--fr {
  -webkit-animation: hamsterFRLimb var(--dur) linear infinite;
          animation: hamsterFRLimb var(--dur) linear infinite;
  background: -webkit-gradient(linear,left top, left bottom,color-stop(80%, hsl(30,90%,80%)),color-stop(80%, hsl(0,90%,75%)));
  background: linear-gradient(hsl(30,90%,80%) 80%,hsl(0,90%,75%) 80%);
  -webkit-transform: rotate(15deg) translateZ(-1px);
          transform: rotate(15deg) translateZ(-1px);
}

.hamster__limb--fl {
  -webkit-animation: hamsterFLLimb var(--dur) linear infinite;
          animation: hamsterFLLimb var(--dur) linear infinite;
  background: -webkit-gradient(linear,left top, left bottom,color-stop(80%, hsl(30,90%,90%)),color-stop(80%, hsl(0,90%,85%)));
  background: linear-gradient(hsl(30,90%,90%) 80%,hsl(0,90%,85%) 80%);
  -webkit-transform: rotate(15deg);
      -ms-transform: rotate(15deg);
          transform: rotate(15deg);
}

.hamster__limb--br,
.hamster__limb--bl {
  border-radius: 0.75em 0.75em 0 0;
  -webkit-clip-path: polygon(0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%);
          clip-path: polygon(0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%);
  top: 1em;
  left: 2.8em;
  width: 1.5em;
  height: 2.5em;
  -webkit-transform-origin: 50% 30%;
      -ms-transform-origin: 50% 30%;
          transform-origin: 50% 30%;
}

.hamster__limb--br {
  -webkit-animation: hamsterBRLimb var(--dur) linear infinite;
          animation: hamsterBRLimb var(--dur) linear infinite;
  background: -webkit-gradient(linear,left top, left bottom,color-stop(90%, hsl(30,90%,80%)),color-stop(90%, hsl(0,90%,75%)));
  background: linear-gradient(hsl(30,90%,80%) 90%,hsl(0,90%,75%) 90%);
  -webkit-transform: rotate(-25deg) translateZ(-1px);
          transform: rotate(-25deg) translateZ(-1px);
}

.hamster__limb--bl {
  -webkit-animation: hamsterBLLimb var(--dur) linear infinite;
          animation: hamsterBLLimb var(--dur) linear infinite;
  background: -webkit-gradient(linear,left top, left bottom,color-stop(90%, hsl(30,90%,90%)),color-stop(90%, hsl(0,90%,85%)));
  background: linear-gradient(hsl(30,90%,90%) 90%,hsl(0,90%,85%) 90%);
  -webkit-transform: rotate(-25deg);
      -ms-transform: rotate(-25deg);
          transform: rotate(-25deg);
}

.hamster__tail {
  -webkit-animation: hamsterTail var(--dur) linear infinite;
          animation: hamsterTail var(--dur) linear infinite;
  background: hsl(0,90%,85%);
  border-radius: 0.25em 50% 50% 0.25em;
  -webkit-box-shadow: 0 -0.2em 0 hsl(0,90%,75%) inset;
          box-shadow: 0 -0.2em 0 hsl(0,90%,75%) inset;
  top: 1.5em;
  right: -0.5em;
  width: 1em;
  height: 0.5em;
  -webkit-transform: rotate(30deg) translateZ(-1px);
          transform: rotate(30deg) translateZ(-1px);
  -webkit-transform-origin: 0.25em 0.25em;
      -ms-transform-origin: 0.25em 0.25em;
          transform-origin: 0.25em 0.25em;
}

.spoke {
  -webkit-animation: spoke var(--dur) linear infinite;
          animation: spoke var(--dur) linear infinite;
  background: radial-gradient(100% 100% at center,hsl(0,0%,60%) 4.8%,hsla(0,0%,60%,0) 5%),
		-webkit-gradient(linear,left top, left bottom,color-stop(46.9%, hsla(0,0%,55%,0)),color-stop(47%, hsl(0,0%,65%)),color-stop(53%, hsla(0,0%,65%,0))) 50% 50% / 99% 99% no-repeat;
  background: radial-gradient(100% 100% at center,hsl(0,0%,60%) 4.8%,hsla(0,0%,60%,0) 5%),
		linear-gradient(hsla(0,0%,55%,0) 46.9%,hsl(0,0%,65%) 47% 52.9%,hsla(0,0%,65%,0) 53%) 50% 50% / 99% 99% no-repeat;
}

/* Animations */
@-webkit-keyframes hamster {
  from, to {
    -webkit-transform: rotate(4deg) translate(-0.8em,1.85em);
            transform: rotate(4deg) translate(-0.8em,1.85em);
  }

  50% {
    -webkit-transform: rotate(0) translate(-0.8em,1.85em);
            transform: rotate(0) translate(-0.8em,1.85em);
  }
}
@keyframes hamster {
  from, to {
    -webkit-transform: rotate(4deg) translate(-0.8em,1.85em);
            transform: rotate(4deg) translate(-0.8em,1.85em);
  }

  50% {
    -webkit-transform: rotate(0) translate(-0.8em,1.85em);
            transform: rotate(0) translate(-0.8em,1.85em);
  }
}

@-webkit-keyframes hamsterHead {
  from, 25%, 50%, 75%, to {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    -webkit-transform: rotate(8deg);
            transform: rotate(8deg);
  }
}

@keyframes hamsterHead {
  from, 25%, 50%, 75%, to {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    -webkit-transform: rotate(8deg);
            transform: rotate(8deg);
  }
}

@-webkit-keyframes hamsterEye {
  from, 90%, to {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }

  95% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
}

@keyframes hamsterEye {
  from, 90%, to {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }

  95% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
}

@-webkit-keyframes hamsterEar {
  from, 25%, 50%, 75%, to {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    -webkit-transform: rotate(12deg);
            transform: rotate(12deg);
  }
}

@keyframes hamsterEar {
  from, 25%, 50%, 75%, to {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    -webkit-transform: rotate(12deg);
            transform: rotate(12deg);
  }
}

@-webkit-keyframes hamsterBody {
  from, 25%, 50%, 75%, to {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
}

@keyframes hamsterBody {
  from, 25%, 50%, 75%, to {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
}

@-webkit-keyframes hamsterFRLimb {
  from, 25%, 50%, 75%, to {
    -webkit-transform: rotate(50deg) translateZ(-1px);
            transform: rotate(50deg) translateZ(-1px);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    -webkit-transform: rotate(-30deg) translateZ(-1px);
            transform: rotate(-30deg) translateZ(-1px);
  }
}

@keyframes hamsterFRLimb {
  from, 25%, 50%, 75%, to {
    -webkit-transform: rotate(50deg) translateZ(-1px);
            transform: rotate(50deg) translateZ(-1px);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    -webkit-transform: rotate(-30deg) translateZ(-1px);
            transform: rotate(-30deg) translateZ(-1px);
  }
}

@-webkit-keyframes hamsterFLLimb {
  from, 25%, 50%, 75%, to {
    -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    -webkit-transform: rotate(50deg);
            transform: rotate(50deg);
  }
}

@keyframes hamsterFLLimb {
  from, 25%, 50%, 75%, to {
    -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    -webkit-transform: rotate(50deg);
            transform: rotate(50deg);
  }
}

@-webkit-keyframes hamsterBRLimb {
  from, 25%, 50%, 75%, to {
    -webkit-transform: rotate(-60deg) translateZ(-1px);
            transform: rotate(-60deg) translateZ(-1px);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    -webkit-transform: rotate(20deg) translateZ(-1px);
            transform: rotate(20deg) translateZ(-1px);
  }
}

@keyframes hamsterBRLimb {
  from, 25%, 50%, 75%, to {
    -webkit-transform: rotate(-60deg) translateZ(-1px);
            transform: rotate(-60deg) translateZ(-1px);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    -webkit-transform: rotate(20deg) translateZ(-1px);
            transform: rotate(20deg) translateZ(-1px);
  }
}

@-webkit-keyframes hamsterBLLimb {
  from, 25%, 50%, 75%, to {
    -webkit-transform: rotate(20deg);
            transform: rotate(20deg);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    -webkit-transform: rotate(-60deg);
            transform: rotate(-60deg);
  }
}

@keyframes hamsterBLLimb {
  from, 25%, 50%, 75%, to {
    -webkit-transform: rotate(20deg);
            transform: rotate(20deg);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    -webkit-transform: rotate(-60deg);
            transform: rotate(-60deg);
  }
}

@-webkit-keyframes hamsterTail {
  from, 25%, 50%, 75%, to {
    -webkit-transform: rotate(30deg) translateZ(-1px);
            transform: rotate(30deg) translateZ(-1px);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    -webkit-transform: rotate(10deg) translateZ(-1px);
            transform: rotate(10deg) translateZ(-1px);
  }
}

@keyframes hamsterTail {
  from, 25%, 50%, 75%, to {
    -webkit-transform: rotate(30deg) translateZ(-1px);
            transform: rotate(30deg) translateZ(-1px);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    -webkit-transform: rotate(10deg) translateZ(-1px);
            transform: rotate(10deg) translateZ(-1px);
  }
}

@-webkit-keyframes spoke {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }

  to {
    -webkit-transform: rotate(-1turn);
            transform: rotate(-1turn);
  }
}

@keyframes spoke {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }

  to {
    -webkit-transform: rotate(-1turn);
            transform: rotate(-1turn);
  }
}