/* --------------------------------- *
 * é‡è®¾æ ·å¼
 * --------------------------------- */
/*body {*/
/*    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;*/
/*    font-size: 14px;*/
/*    line-height: 1.7;*/
/*    background-color: #fff;*/
/*    color: #4d5259;*/
/*}*/

/*p {*/
/*    display: block;*/
/*    margin-block-start: 1em;*/
/*    margin-block-end: 1em;*/
/*    margin-inline-start: 0px;*/
/*    margin-inline-end: 0px;*/
/*}*/

/*a {*/
/*    color: #4d5259;*/
/*    text-decoration: none;*/
/*    -webkit-transition: color 0.5s, background-color 0.5s;*/
/*    -o-transition: color 0.5s, background-color 0.5s;*/
/*    transition: color 0.5s, background-color 0.5s;*/
/*}*/

/*a:hover,*/
/*a:active,*/
/*a:focus {*/
/*    outline: none;*/
/*    text-decoration: none;*/
/*}*/

/*i[class*='mdi'] {*/
/*    vertical-align: middle;*/
/*}*/

/*.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {*/
/*    line-height: 1.7;*/
/*}*/

/*.form-control {*/
/*    font-size: 14px;*/
/*    -webkit-border-radius: 2px;*/
/*    -o-border-radius: 2px;*/
/*    border-radius: 2px;*/
/*}*/

/*.btn {*/
/*    -webkit-border-radius: 2px;*/
/*    -o-border-radius: 2px;*/
/*    border-radius: 2px;*/
/*}*/
/*.btn-round {*/
/*    border-radius: 30px;*/
/*}*/

/*hr {*/
/*    -moz-border-bottom-colors: none;*/
/*    -moz-border-image: none;*/
/*    -moz-border-left-colors: none;*/
/*    -moz-border-right-colors: none;*/
/*    -moz-border-top-colors: none;*/
/*    border-color: rgba(0,0,0,.12);*/
/*    border-top: 1px solid #eee;*/
/*    margin-left: 20px!important;*/
/*    margin-right: 20px!important;*/
/*    margin-bottom: 1px;*/
/*    display: block;*/
/*    -webkit-box-flex: 1;*/
/*    -ms-flex: 1 1 0px;*/
/*    flex: 1 1 0px;*/
/*    max-width: 100%;*/
/*    height: 0;*/
/*    max-height: 0;*/
/*    border: solid;*/
/*    border-width: thin 0 0;*/
/*    -webkit-transition: inherit;*/
/*    transition: inherit;*/
/*}*/


/*.badge {*/
/*    -webkit-border-radius: 2px;*/
/*    -o-border-radius: 2px;*/
/*    border-radius: 2px;*/
/*    font-weight: normal;*/
/*    margin: 5px 10px 5px 0;*/
/*    padding: 5px 8px 5px 10px;*/
/*}*/

/*.page-link {*/
/*    color: #8b95a5;*/
/*    border-color: #ebebeb;*/
/*    padding: 0 8px;*/
/*    margin: 0 3px;*/
/*    min-width: 31px;*/
/*    max-height: 31px;*/
/*    line-height: 29px;*/
/*    text-align: center;*/
/*    -webkit-border-radius: 2px;*/
/*    -o-border-radius: 2px;*/
/*    border-radius: 2px;*/
/*}*/

/*.page-item:first-child .page-link,*/
/*.page-item:last-child .page-link {*/
/*    -webkit-border-radius: 2px;*/
/*    -o-border-radius: 2px;*/
/*    border-radius: 2px;*/
/*}*/

/*.page-link:hover,*/
/*.page-link:focus {*/
/*    color: #4d5259*/
/*}*/

/* é‡ç½®æ ·å¼ */


/*!*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*!*/
/*::-webkit-scrollbar*/
/*{*/
/*    width: 4px;*/
/*    height: 4px;*/
/*    background-color: #F5F5F5;*/
/*}*/

/*!*定义滚动条轨道 内阴影+圆角*!*/
/*::-webkit-scrollbar-track*/
/*{*/
/*    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3);*/
/*    border-radius: 10px;*/
/*    background-color: #FFF;*/
/*}*/

/*!*定义滑块 内阴影+圆角*!*/
/*::-webkit-scrollbar-thumb*/
/*{*/
/*    border-radius: 10px;*/
/*    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.3);*/
/*    background-color: #AAA;*/
/*}*/



/* --------------------------------- *
 * åšå®¢æ ·å¼
 * --------------------------------- */

/* --------------------------------- *
 * 左侧
 * --------------------------------- */
.lyear-header {
    position: relative;
    height: 300px;
    background-repeat: no-repeat;
    background-color: #3d3d3d;
    background-size: cover;
    background-position: center center;
    color: #fff
}

.full-header {
    height: 100vh;
}

.lyear-header-container {
    height: 80px;
}

.lyear-header .navbar {
    z-index: 12;
}

/* 遮罩 */
.lyear-mask {
    display: block;
    max-width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, .25)
}

/* 滚动条 */
.nicescroll-cursors {
    background-color: rgba(0, 0, 0, .125) !important;
    border: none !important;
}

/* logo */
.lyear-blogger {
    position: relative;
    font-weight: normal;
    font-size: 1.25rem;
    color: #fff;
    z-index: 11;
    align-self: center;
    margin: auto 80px;
}

.back-to-top{
    position: fixed;
    bottom: 30px;
    right: 30px;
}

.avatar {
    display: inline-block !important;
    width: 64px;
    height: 64px;
    line-height: 64px;
    text-align: center;
    vertical-align: middle;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.avatar-48 {
    width: 48px;
    height: 48px;
    line-height: 48px;
}

.author-info {
    text-align: start;
    margin: auto 1rem;
}

.motto {
    margin: 10rem auto;
}

.motto-title {
    margin: 5rem auto;
}

.motto-text {
    padding: 0 4rem;
    margin-bottom: 0.6rem;
    line-height: 1 !important;
}
.motto-author {
    color: snow;
    float: right;
    margin-top: 3rem;
}

/* 左括号 */
.bracket-left {
    text-align: start;
    left: 0;
    top: -2.5rem;
}

/* 右括号 */
.bracket-right {
    text-align: end;
    right: 0;
}

.cover {
    transition: 1s ease-out;
}

.cover:hover {
    transform: scale3d(1.1,1.1,1);
}

.down {
    position: absolute;
    bottom: 8rem;
    margin: 0 auto;
    left: 50%;
    margin-left: -20px;
    z-index: 10;
}

.bounce-enter-active {
    animation: bounce-in 5s 3s infinite;
}

/*.bounce-leave-active {*/
/*  animation: bounce-in 4s 2s reverse;*/
/*}*/
@keyframes bounce-in {
    0% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    80% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(0);
    }
}

/** 友链页面 **/
.friend-top-color {
    height: 8rem;
}
.friend-avatar {
    margin-top: -32px;
}
.friend-foot-color {
    display: block;
    width: 100%;
    background-color: #fef8f4;
}

.lyear-blogger a {
    color: #fff
}

/* 导航切换 */
.lyear-header .navbar-toggler {
    position: relative;
    -webkit-opacity: .8;
    -moz-opacity: .8;
    opacity: .8;
    border: none;
    padding: 0 .5rem
}

.lyear-hamburger {
    padding: 15px;
    display: inline-block;
    cursor: pointer;
    background-color: transparent;
    border: 0;
    margin: 0;
}

.lyear-hamburger .hamburger-inner,
.lyear-hamburger .hamburger-inner::before,
.lyear-hamburger .hamburger-inner::after {
    width: 22px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

.lyear-hamburger .hamburger-inner::before,
.lyear-hamburger .hamburger-inner::after {
    content: "";
    display: block;
}

.lyear-hamburger .hamburger-inner {
    top: 8px;
    left: 12px;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.lyear-hamburger .hamburger-inner::before {
    top: 7px;
    transition: opacity 0.15s 0.4s ease;
}

.lyear-hamburger .hamburger-inner::after {
    top: 14px;
    transition: -webkit-transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.lyear-hamburger.is-active .hamburger-inner {
    transform: translate3d(0, 8px, 0) rotate(135deg);
}

.lyear-hamburger.is-active .hamburger-inner::before {
    transition-delay: 0s;
    opacity: 0;
}

.lyear-hamburger.is-active .hamburger-inner::after {
    transform: translate3d(0, -15px, 0) rotate(-270deg);
}

/* 文字说明 */
.profile-section {
    max-width: 328px;
}

.lyear-sentence {
    line-height: 2;
}

/* å¯¼èˆªæ ç›® */
.lyear-header .nav-link {
    /*color: rgba(255, 255, 255, .8);*/
    color: #33cabb ;
}

.lyear-header .nav-link:hover {
    color: rgba(255, 255, 255, 1);
    
}

/* 搜索框 */
.lyear-search-form .form-control {
    border-radius: 100px;
    background-color: rgba(255, 255, 255, 0.125);
    border-color: rgba(255, 255, 255, .125);
    color: #fff;
}

/* --------------------------------- *
 * 右侧
 * --------------------------------- */
.lyear-wrapper {
    padding: 1.5rem 3rem 0;
    height: 100%;
}

/* æ–‡ç« åˆ—è¡¨ */
.lyear-arc {
    margin: 0 0 45px;
}

.arc-header {
    margin: 0 0 30px;
}

.arc-title {
    font-size: 20px;
    margin: 0 0 10px;
}

.arc-meta {
    list-style: none;
    padding: 0;
    margin: 0;
    opacity: .7;
}

.arc-meta > li {
    display: inline-block;
    margin-right: 30px;
}

.arc-preview {
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
    margin: 0 0 25px;
}

.blog-card-container {
    border-radius: 0.5rem;
    overflow: hidden;
}

.arc-preview:hover {
    opacity: .7;
}

/* ä¾§è¾¹æ  */
.lyear-sidebar {
    padding-left: 30px;
}

.widget {
    margin: 0 0 40px;
}

.lyear-sidebar .widget:last-child {
    border: 0;
    padding: 0;
}

.widget-title {
    position: relative;
    margin: 0 0 25px;
    font-weight: 700;
    text-transform: uppercase;
}

.widget-title:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    border-bottom: 1px solid #eee;
}

.widget-title:after {
    content: "";
    display: block;
    width: 35px;
    z-index: 1;
    position: relative;
    margin: 15px auto 25px 0px;
    border-bottom: 1px solid #007bff;
}

.widget ul,
.widget ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget ul li,
.widget ol li {
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.widget ul li:last-child,
.widget ol li:last-child {
    border: 0;
}

.widget-hot-posts ul li {
    border-bottom: 1px solid rgba(238, 238, 238, .7);
    margin-bottom: 15px;
    padding-bottom: 15px;
}

.widget-hot-posts ul li span {
    display: block;
    margin-top: 5px;
    opacity: .7;
}

/* æ–‡ç« ç®€ä»‹ */
.arc-synopsis p {
    margin: 0 0 20px;
    line-height: 1.7;
}

/* æ–‡ç« è¯¦ç»† */
.lyear-arc-detail {
    font-size: 16px;
}

.lyear-arc-detail h1,
.lyear-arc-detail h2,
.lyear-arc-detail h3,
.lyear-arc-detail h4,
.lyear-arc-detail h5,
.lyear-arc-detail h6 {
    margin: 30px 0 20px;
}

.lyear-arc-detail h1:first-child,
.lyear-arc-detail h2:first-child,
.lyear-arc-detail h3:first-child,
.lyear-arc-detail h4:first-child,
.lyear-arc-detail h5:first-child,
.lyear-arc-detail h6:first-child {
    margin-top: 0;
}

.lyear-arc-detail p,
.lyear-arc-detail ul,
.lyear-arc-detail ol {
    /*margin: 0 0 20px;*/
    margin: 0px;
    line-height: 1.7;
}

.lyear-arc-detail blockquote {
    font-size: 16px;
    position: relative;
    padding: 20px 20px 20px 40px;
    margin-bottom: 20px;
}

/*.lyear-arc-detail blockquote:before,*/
/*.lyear-arc-detail .blockquote:before {*/
/*    content: "\F756";*/
/*    position: absolute;*/
/*    top: 0px;*/
/*    left: 10px;*/
/*    color: #cdced0;*/
/*    font-family: Material Design Icons;*/
/*    font-size: 100px;*/
/*    font-weight: 100;*/
/*    line-height: .5;*/
/*    opacity: 0.1;*/
/*}*/

/*.lyear-arc-detail blockquote:after {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 5px;*/
/*    height: 100%;*/
/*    background: #dee2e6;*/
/*    content: "";*/
/*}*/

/* 评论 */
.lyear-comment-title {
    padding-top: 20px;
    margin-bottom: 20px;
    border-top: 1px solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5;
}

.lyear-comment,
.lyear-comment .media {
    margin-top: 50px;
}

.lyear-comment img {
    width: 60px;
}


.lyear-comment .media-heading {
    font-size: 14px;
    font-weight: 700;
    margin-top: 0px;
    margin-bottom: .25rem;
    line-height: 1.7;
}

.lyear-comment .media-body p.post-date {
    display: flex;
    justify-content: end;
    margin-bottom: 20px;
    font-size: 12px;
}

.lyear-comment .media_action .text-custom {
    font-size: 12px;
}

.comment-children {
    list-style: none;
}

.media-list .comment-respond {
    padding-left: 40px;
}

.cancel-comment-reply {
    display: none;
    cursor: pointer;
    padding-left: 10px;
    font-weight: normal;
}

.footer-link {
    color: #868e96;
    text-decoration: none;
    -webkit-transition: color 0.5s, background-color 0.5s;
    -o-transition: color 0.5s, background-color 0.5s;
    transition: color 0.5s, background-color 0.5s;
}

.footer-link:hover,
.footer-link:focus,
.footer-link:active {
    color: #007bff;
    text-decoration: none;
    outline: none
}


.btn-like {
    position: relative;
    text-align: end;
    height: 64px;
    width: 64px;
    border-radius: 50%;
    right: -20rem;
    bottom: 50px;
    background-color: #f5f5f5;
    -webkit-box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%);
    box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%);
    will-change: box-shadow;
}

.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

/* --------------------------------- *
 * 夜间模式
 * --------------------------------- */

body[data-theme='dark'] a:hover,
a:focus,
a:active {
    color: #33cabb !important;
    text-decoration: none;
    outline: none
}
/*body[data-theme='dark'] .navbar-brand a{*/
/*    color: #FFFFFF!important;*/
/*}*/
/*body[data-theme='dark'] .nav-link {*/
/*    color: #FFFFFF!important;*/
/*}*/
[data-theme='dark'] footer {
    color: #8c909a!important;
    background-color: #222437!important;
}
[data-theme='dark'] .lyear-wrapper {
    background-color: #1c1e2f!important;
}

[data-theme='dark'] blockquote {
    background-color: #222437!important;
}
[data-theme='dark'] h1 {
    color: #f8f9fa!important;
}
[data-theme='dark'] h2 {
    color: #f8f9fa!important;
}
[data-theme='dark'] h3 {
    color: #f8f9fa!important;
}
[data-theme='dark'] h3.me {
    color: #212529!important;
}
[data-theme='dark'] h4 {
    color: #f8f9fa!important;
}
[data-theme='dark'] h5 {
    color: #f8f9fa!important;
}
[data-theme='dark'] h6 {
    color: #f8f9fa!important;
}
[data-theme='dark'] p {
    color: #aabac9!important;
}
/*[data-theme='dark'] span {*/
/*    color: #dee2e6!important;*/
/*}*/
[data-theme='dark'] th {
    color: #aabac9!important;
}
[data-theme='dark'] td {
    color: #8c909a!important;
}

[data-theme='dark'] .friend-foot-color {
    color: #8c909a!important;
    background-color: #222437!important;
}
[data-theme='dark'] .friend-top-color {
    color: #8c909a!important;
    background-color: #1c1e2f!important;
}
[data-theme='dark'] .avatar  {
    border: #fffffc solid 1px;
}

[data-theme='dark'] .windows  {
    background-color: #1c1e2f!important;
}
[data-theme='dark'] .body::after  {
    background-color: #222437!important;
}
[data-theme='dark'] .autograph  {
    color: grey;
    z-index: 10;
}
[data-theme='dark'] .hljs  {
    color: #e4e7ea;
    background: rgb(48, 50, 67);
}

/* --------------------------------- *
 * 响应式处理
 * --------------------------------- */
@media only screen and (max-width: 991px) {
    .lyear-header .lyear-blogger {
        width: 100%;
        position: absolute;
        left: 0;
        top: 1.2rem;
    }
}

@media only screen and (max-width: 992px) {
    .lyear-header {
        position: relative;
        width: inherit;
        /*height: auto;*/
    }

    .lyear-header .navbar {
        padding: 1rem;
    }

    .lyear-wrapper {
        margin-left: 0px;
    }

    .profile-section {
        max-width: 100%;
    }
}

@media only screen and (max-width: 1200px) {
    .lyear-sidebar {
        padding-left: 0px;
        margin-top: 1.5rem;
    }
}

/* 响应式布局 */
@media (max-width: 767px) {
/* col-xs */
    .lyear-wrapper {
        padding: 0;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
/* col-sm */
}

@media (min-width: 992px) and (max-width: 1199px) {
/* col-md */
}

@media (min-width: 1200px) {
/* col-lg */
}

/* 切换夜间模式 */
#dayNight {
    cursor: pointer;
}

#dayNightSwitch {
    align-self: center;
    opacity: 0.65;
}

#dayNightSwitch .onOff {
    background: #324164;
    width: 65px;
    height: 25px;
    border-radius: 25px;
    box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.2),
    0px 5px 10px rgba(0, 0, 0, 0.1);
    border: 2px solid #1e2d50;
    overflow: hidden;
    position: relative;
}

#dayNightSwitch .onOff * {
    transition: all 0.4s ease;
}

#dayNightSwitch .onOff.daySwitch {
    border: 2px solid #52a6bf;
}

#dayNightSwitch .onOff.daySwitch .sky {
    width: 65px;
    height: 25px;
    border-radius: 25px;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(0px, 0px);
    animation: none !important;
}

#dayNightSwitch .onOff.daySwitch .sunMoon {
    background: #ffdf61;
    border: 2px solid #d9b31c;
    left: calc(100% - 23px);
}

#dayNightSwitch .onOff.daySwitch .sunMoon .crater {
    transform: scale(0) !important;
}

#dayNightSwitch .onOff.daySwitch .sunMoon .cloud {
    opacity: 1;
    transform: translatex(0px);
    transition-delay: 0.2s;
    animation: cloudAnim 2.5s linear infinite;
}

#dayNightSwitch .onOff .sunMoon {
    background: #f0e1a5;
    height: 16px;
    width: 16px;
    border-radius: 100%;
    border: 2px solid #ccc091;
    position: absolute;
    left: 3px;
    top: 2.5px;
}

#dayNightSwitch .onOff .sunMoon .crater {
    background: #ccc091;
    width: 5px;
    height: 5px;
    border-radius: 13px;
    position: absolute;
    left: 50%;
    top: 20%;
}

#dayNightSwitch .onOff .sunMoon .crater.crater1 {
    left: 30%;
    top: 45%;
    transform: scale(0.5);
}

#dayNightSwitch .onOff .sunMoon .crater.crater2 {
    left: 55%;
    top: 60%;
    transform: scale(0.7);
}

#dayNightSwitch .onOff .sunMoon .cloud {
    background: white;
    border-radius: 3px;
    position: absolute;
    opacity: 0;
    transform: translatex(-20px);
    transition-delay: 0s;
}

#dayNightSwitch .onOff .sunMoon .cloud.part1 {
    width: 20px;
    height: 2px;
    left: -12px;
    top: calc(50% - 1.5px);
}

#dayNightSwitch .onOff .sunMoon .cloud.part1:before {
    content: '';
    background: white;
    border-radius: 3px;
    position: absolute;
    width: 3px;
    height: 3px;
    left: 40%;
    top: -100%;
}

#dayNightSwitch .onOff .sunMoon .cloud.part1:after {
    content: '';
    background: white;
    border-radius: 3px;
    position: absolute;
    width: 15px;
    height: 2px;
    left: 20%;
    top: -200%;
}

#dayNightSwitch .onOff .sunMoon .cloud.part2 {
    width: 3px;
    height: 3px;
    left: -1px;
    top: calc(50% + 0.3px);
}

#dayNightSwitch .onOff .sunMoon .cloud.part2:before {
    content: '';
    background: white;
    border-radius: 3px;
    position: absolute;
    width: 18px;
    height: 2px;
    left: -8px;
    top: 100%;
}

#dayNightSwitch .onOff .star {
    background: #5ebedb;
    width: 5px;
    height: 5px;
    border-radius: 5px;
    position: absolute;
    left: 50%;
    top: 10%;
    transform: translate(20px, 5px);
}

#dayNightSwitch .onOff .star.star1 {
    transform: translate(10px, 15px) scale(0.3);
    animation: starAnim1 3s -2.4s linear infinite;
}

#dayNightSwitch .onOff .star.star2 {
    transform: translate(15px, -7px) scale(0.6);
    animation: starAnim2 3s -1.1s linear infinite;
}

#dayNightSwitch .onOff .star.star3 {
    transform: translate(35px, -12px) scale(0.9);
    animation: starAnim3 3s -1.5s linear infinite;
}

#dayNightSwitch .onOff .star.star4 {
    transform: translate(30px, 12px) scale(0.4);
    animation: starAnim4 3s -1.9s linear infinite;
}

#dayNightSwitch .onOff .star.star5 {
    transform: translate(0px, 0px) scale(0.6);
    animation: starAnim5 3s -2.8s linear infinite;
}

#dayNightSwitch .onOff .star.sky {
    animation: skyAnim 3s -0.4s linear infinite;
}

@keyframes starAnim1 {
    0% {
        transform: translate(5px, 30px) scale(0.3);
    }
    20% {
        transform: translate(8px, 17px) scale(0.3);
    }
    50% {
        transform: translate(10px, 0px) scale(0.3);
    }
    80% {
        transform: translate(8px, -17px) scale(0.3);
    }
    100% {
        transform: translate(5px, -30px) scale(0.3);
    }
}

@keyframes starAnim2 {
    0% {
        transform: translate(10px, 30px) scale(0.6);
    }
    20% {
        transform: translate(13px, 17px) scale(0.6);
    }
    50% {
        transform: translate(15px, 0px) scale(0.6);
    }
    80% {
        transform: translate(13px, -17px) scale(0.6);
    }
    100% {
        transform: translate(10px, -30px) scale(0.6);
    }
}

@keyframes starAnim3 {
    0% {
        transform: translate(30px, 30px) scale(0.9);
    }
    20% {
        transform: translate(33px, 17px) scale(0.9);
    }
    50% {
        transform: translate(35px, 0px) scale(0.9);
    }
    80% {
        transform: translate(33px, -17px) scale(0.9);
    }
    100% {
        transform: translate(30px, -30px) scale(0.9);
    }
}

@keyframes starAnim4 {
    0% {
        transform: translate(25px, 30px) scale(0.4);
    }
    20% {
        transform: translate(28px, 17px) scale(0.4);
    }
    50% {
        transform: translate(30px, 0px) scale(0.4);
    }
    80% {
        transform: translate(28px, -17px) scale(0.4);
    }
    100% {
        transform: translate(25px, -30px) scale(0.4);
    }
}

@keyframes starAnim5 {
    0% {
        transform: translate(0px, 30px) scale(0.6);
    }
    20% {
        transform: translate(3px, 17px) scale(0.6);
    }
    50% {
        transform: translate(5px, 0px) scale(0.6);
    }
    80% {
        transform: translate(3px, -17px) scale(0.6);
    }
    100% {
        transform: translate(0px, -30px) scale(0.6);
    }
}

@keyframes skyAnim {
    0% {
        transform: translate(15px, 30px) scale(1);
    }
    20% {
        transform: translate(18px, 17px) scale(1);
    }
    50% {
        transform: translate(20px, 0px) scale(1);
    }
    80% {
        transform: translate(18px, -17px) scale(1);
    }
    100% {
        transform: translate(15px, -30px) scale(1);
    }
}

@keyframes cloudAnim {
    0% {
        transform: translatex(0px);
    }
    14% {
        transform: translatex(5px);
    }
    56% {
        transform: translatex(-10px);
    }
    100% {
        transform: translatex(0px);
    }
}