#write {
  /* 书写区左留白和右留白 */
  padding-left: 7ch;
  padding-right: 7ch;
}

/* 1到6级标题字体,粗细,颜色
 * (由于什么颜色的标题好像都还挺好看,这里我设置成了彩虹色,就是会比较占GPU)
 */
 /** 彩虹字在文字过多的情况下很卡,注释掉,此处为标题的彩虹色 **/
/* #cnblogs_post_body h1,
#cnblogs_post_body h2,
#cnblogs_post_body h3,
#cnblogs_post_body h4,
#cnblogs_post_body h5,
#cnblogs_post_body h6,
[mdlike='h1'],
[mdlike='h2'],
[mdlike='h3'],
[mdlike='h4'],
[mdlike='h5'],
[mdlike='h6'] {
  font-weight: bold;

  color: white;

  background-image: linear-gradient(
    
    to right,
    
    orangered,
    orange,
    gold,
    khaki,
    yellow,
    yellowgreen,
    lightgreen,
    springgreen,
    cyan,
    dodgerblue,
    royalblue,
    mediumpurple,
    hotpink,
    lightpink,
    red
  );
  background-size: 100vw;
  -webkit-background-clip: text;
  color: transparent;
  
  animation: sliding 60s linear infinite;
  background-repeat: repeat !important;
} */
/* 彩虹色关键帧 */
/* @keyframes sliding{
  to{
    
    background-position:  200vw;
  }
} */
/* 单位解释:
绝对单位:
px页面按精确像素展示;
相对单位:
rem,相对html总标签下设置字体大小的大小,10rem=10*html字体大小px;
em,相对html元素里设置字体大小的大小(一般为最近一级元素,有些情况下会继承最高那级元素的字体大小),一般默认16px,10em=10*元素字体大小px;
vh,viewpoint height视窗高度,响应式设计,1vw = 1%当前视窗高度;
vw.viewpoint width视窗宽度,同上;
vmin/vmax:vh/vw中较小/较大的;
还有ex,ch好像用的很少,还有浏览器兼容问题 
*/
[mdlike='h1'] > .md-blockmeta,
[mdlike='h2'] > .md-blockmeta,
[mdlike='h3'] > .md-blockmeta,
[mdlike='h4'] > .md-blockmeta,
[mdlike='h5'] > .md-blockmeta,
[mdlike='h6'] > .md-blockmeta {
  color: inherit;
  font-weight: inherit;
  font-style: inherit;
}

#cnblogs_post_body h1:before {
  content: "# ";
}

#cnblogs_post_body h2:before {
  content: "## ";
}

#cnblogs_post_body h3:before,
#cnblogs_post_body h3.md-focus:before {
  content: "### ";
}

#cnblogs_post_body h4:before,
#cnblogs_post_body h4.md-focus:before {
  content: "#### ";
}

#cnblogs_post_body h5:before,
#cnblogs_post_body h5.md-focus:before {
  content: "##### ";
}

#cnblogs_post_body h6:before,
#cnblogs_post_body h6.md-focus:before {
  content: "####### ";
}


/** override the default style for focused headings */
/* 你为什么要重写,靠,我还以为我的修改对这几个没作用 */
/** 彩虹字在文字过多的情况下很卡,注释掉,此处为标题源码显示的彩虹色 **/
/* #cnblogs_post_body h3:before,
#cnblogs_post_body h4:before,
#cnblogs_post_body h5:before,
#cnblogs_post_body h6:before,
#cnblogs_post_body h3.md-focus:before,
#cnblogs_post_body h4.md-focus:before,
#cnblogs_post_body h5.md-focus:before,
#cnblogs_post_body h6.md-focus:before {
  border: inherit;
  border-radius: inherit;
  position: inherit;
  left: initial;
  float: none;
  top: initial;
  font-size: inherit;
  font-family: inherit;
  padding-left: inherit;
  padding-right: inherit;
  vertical-align: inherit;
  font-weight: inherit;
  line-height: inherit;
  background-image: linear-gradient(
    to right,
    red,
    orangered,
    orange,
    gold,
    khaki,
    yellow,
    yellowgreen,
    lightgreen,
    springgreen,
    cyan,
    dodgerblue,
    royalblue,
    mediumpurple,
    hotpink,
    lightpink,
    red
  );
  background-size: 100vw;
  -webkit-background-clip: text;
  animation: sliding 24s linear infinite;
} */





#cnblogs_post_body .md-toc-item {
  position: relative;
}
#cnblogs_post_body .md-toc-inner {
  width: 100%;
  display: inline-block;
}

#write > h1,
#write > [mdlike='h1'] {
  margin-left: -2ch;
}
#write > h2,
#write > [mdlike='h2'] {
  margin-left: -3ch;
}
#write > h3,
#write > [mdlike='h3'] {
  margin-left: -4ch;
}
#write > h4,
#write > [mdlike='h4'] {
  margin-left: -5ch;
}
#write > h5,
#write > [mdlike='h5'] {
  margin-left: -6ch;
}
#write > h6,
#write > [mdlike='h6'] {
  margin-left: -7ch;
}
#write p{
  margin-top: 1rem;
  margin-bottom: 1rem;
}
#write h1,
#write h2,
#write h3,
#write h4,
#write h5,
#write h6,
#write [mdlike='h1'],
#write [mdlike='h2'],
#write [mdlike='h3'],
#write [mdlike='h4'],
#write [mdlike='h5'],
#write [mdlike='h6'] {
  margin-top: 0.83em;
  margin-bottom: 0.83em;
}
@media (min-width: 800px) {
  .pin-outline #write {
    padding-left: 10ch;
    padding-right: 6ch;
  }
  #write {
    padding-left: 12ch;
    padding-right: 12ch;
  }
  #write > h6,
  #write > p [mdlike='h6'] {
    margin-left: -8ch;
  }
}
@media (max-width: 1200px) {
  .pin-outline #write {
    padding-left: 10ch;
    padding-right: 8ch;
  }

  .pin-outline #write > h1,
  .pin-outline #write > h2,
  .pin-outline #write > h3,
  .pin-outline #write > h4,
  .pin-outline #write > h5,
  .pin-outline #write > h6,
  .pin-outline #write > p [mdlike='h1'],
  .pin-outline #write > p [mdlike='h2'],
  .pin-outline #write > p [mdlike='h3'],
  .pin-outline #write > p [mdlike='h4'],
  .pin-outline #write > p [mdlike='h5'],
  .pin-outline #write > p [mdlike='h6'] {
    margin-left: 0;
  }
}

#cnblogs_post_body ul[cid] {
  list-style-type: none;
}
/* 难道是数学公式中的乘法源码追加 */
#cnblogs_post_body ul[cid] li:before {
  content: "*";
  margin-left: -3ch;
  position: absolute;
  color: #006d86;
}
/* 难道是数学公式中的减法源码追加 */
#cnblogs_post_body ul[data-mark="-"] > li:before {
  content: "-";
}
/* 难道是数学公式中的加法源码追加 */
#cnblogs_post_body ul[data-mark="+"] > li:before {
  content: "+";
}
#cnblogs_post_body .task-list > li:before {
  margin-left: -6ch;
}
#cnblogs_post_body ol[cid] {
  counter-reset: item;
  list-style-type: none;
}
/* 难道是数学公式中的小数点源码追加 */
#cnblogs_post_body ol[cid] > li:before {
  content: counter(item) ". ";
  counter-increment: item;
  color: #438600;
  margin-left: -2ch;
  position: absolute;
}
/* 任务框源码追加的样式 */
/* #cnblogs_post_body .task-list-item input:before {
  content: '[ ]';
  display: inline-block;
  margin-left: -2ch;
  width: 4ch;
  position: absolute;
  top: -1px;
  vertical-align: middle;
  text-align: center;
  background-color: white;
  color: #f00058;
} */
#cnblogs_post_body .task-list-item input:before {
  content: '- [ ]';
  display: inline-block;
  margin-left: -4ch;
  width: 4ch;
  position: relative;
  top: -2px;
  vertical-align: middle;
  text-align: center;
  //background-color: white;
  color: #f00058;
}
/* 已完成任务框源码追加 */
//#cnblogs_post_body .task-list-item input:checked:before {
//  content: '[x]';
//}
#cnblogs_post_body .task-list-item input:checked:before {
  content: '- [x]';
  display: inline-block;
  margin-left: -4ch;
  width: 4ch;
  position: relative;
  top: -2px;
  vertical-align: middle;
  text-align: center;
  //background-color: white;
  color: #f00058;
}
/* 这个主题自带了已完成任务文本加删除线 */
#cnblogs_post_body .task-list-item input:checked ~ * {
  text-decoration: line-through;
}
/* 块引用 */
#cnblogs_post_body blockquote {
  background-color: rgba(128, 128, 128, 0.05) !important;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  padding: 0 20px !important;
  border-left: 8px solid #06a8f8 !important;
}
#cnblogs_post_body hr {
  position: relative;
  height: 20px;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  border: 0;
  margin-bottom: 20px;
}
/* 不知道什么的源码追加 */
#cnblogs_post_body hr:after {
  content: "--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------";
  position: absolute;
  top: 0;
  left: 0;
  font-size: 14px;
  line-height: 20px;
  width: 100%;
  word-wrap: break-word;
}
/**
 * Code Fences
 * 代码围栏
 */
#cnblogs_post_body .md-fences:not(.md-fences-with-lineon) .cm-s-inner {
  padding-left: 8px;
}
#cnblogs_post_body .CodeMirror.cm-s-inner {
  padding-top: 8px;
  border-radius: 3px;
  padding-bottom: 16px;
}
/* 代码块序号区背景和颜色(颜色好像被覆盖了) */
#cnblogs_post_body .CodeMirror-gutters {
  background: #cee1eb;
  color: #537f7e;
  border: none;
}
/* 不知道先改着试试 */
#cnblogs_post_body .cm-s-inner {
  background-color: #263238;
  color: #e9eded;
}
/* 代码块序号区,序号,颜色 */
#cnblogs_post_body .CodeMirror.cm-s-inner .CodeMirror-guttermarker,
#cnblogs_post_body .CodeMirror.cm-s-inner .CodeMirror-guttermarker-subtle,
#cnblogs_post_body .CodeMirror.cm-s-inner .CodeMirror-linenumber {
  color: #1b269b;
}
/* 代码区光标样式,白色就挺好,但是加粗到2px吧 */
#cnblogs_post_body .CodeMirror.cm-s-inner .CodeMirror-cursor {
  border-left: 2px solid #f8f8f0;
}
/* 不懂 */
#cnblogs_post_body .CodeMirror.cm-s-inner div.CodeMirror-selected {
  background: rgba(255, 255, 255, 0.15);
}
/* 不懂 */
#cnblogs_post_body .CodeMirror.cm-s-inner .CodeMirror-focused div.CodeMirror-selected {
  background: rgba(255, 255, 255, 0.1);
}
/* 不懂 */
#cnblogs_post_body .CodeMirror.cm-s-inner .CodeMirror-line::selection,
#cnblogs_post_body .CodeMirror.cm-s-inner .CodeMirror-line > span::selection,
#cnblogs_post_body .CodeMirror.cm-s-inner .CodeMirror-line > span > span::selection {
  background: rgba(255, 255, 255, 0.1);
}
/* 不懂 */
#cnblogs_post_body .CodeMirror.cm-s-inner .CodeMirror-line::-moz-selection,
#cnblogs_post_body .CodeMirror.cm-s-inner .CodeMirror-line > span::-moz-selection,
#cnblogs_post_body .CodeMirror.cm-s-inner .CodeMirror-line > span > span::-moz-selection {
  background: rgba(255, 255, 255, 0.1);
}
/* 代码区鼠标选中行背景颜色(代码区默认第一行被选中) */
#cnblogs_post_body .CodeMirror.cm-s-inner .CodeMirror-activeline-background {
  background: rgba(112, 208, 147, 0.53);
}
/* 代码关键词,如for,do */
#cnblogs_post_body .CodeMirror.cm-s-inner .cm-keyword {
  color: #c792ea;
}
/* 代码连接符,如=+-* */
#cnblogs_post_body .CodeMirror.cm-s-inner .cm-operator {
  color: #e9eded;
}
/* 2级变量 */
#cnblogs_post_body .CodeMirror.cm-s-inner .cm-variable-2 {
  color: #80CBC4;
}
/* 3级变量,被覆盖了 */
#cnblogs_post_body .CodeMirror.cm-s-inner .cm-variable-3 {
  color: #82B1FF;
}
/* 命令头,如chmod,echo,set */
#cnblogs_post_body .CodeMirror.cm-s-inner .cm-builtin {
  color: #DECB6B;
}
/* 不知道 */
#cnblogs_post_body .CodeMirror.cm-s-inner .cm-atom {
  color: #F77669;
}
/* 不知道 */
#cnblogs_post_body .CodeMirror.cm-s-inner .cm-number {
  color: #F77669;
}
/* (应该是cmd中,也有可能不止cmd)变量的定义及使用颜色 */
#cnblogs_post_body .CodeMirror.cm-s-inner .cm-def {
  color: #e9eded;
}
/* String字符串 */
#cnblogs_post_body .CodeMirror.cm-s-inner .cm-string {
  color: #C3E88D;
}
/* String-2是什么?不懂 */
#cnblogs_post_body .CodeMirror.cm-s-inner .cm-string-2 {
  color: #80CBC4;
}
/* comment应该就是注释了吧 */
#cnblogs_post_body .CodeMirror.cm-s-inner .cm-comment {
  color: #546E7A;
}
/* 1级变量 */
#cnblogs_post_body .CodeMirror.cm-s-inner .cm-variable {
  color: #82B1FF;
}

/* 转义符吗,不懂 */
#cnblogs_post_body .CodeMirror.cm-s-inner .cm-meta {
  color: #80CBC4;
}
/* 成员变量? */
#cnblogs_post_body .CodeMirror.cm-s-inner .cm-attribute {
  color: #FFCB6B;
}
/* 参数? */
#cnblogs_post_body .CodeMirror.cm-s-inner .cm-property {
  color: #80CBAE;
}
/* 修饰词? */
#cnblogs_post_body .CodeMirror.cm-s-inner .cm-qualifier {
  color: #DECB6B;
}
/* 变量3 */
#cnblogs_post_body .CodeMirror.cm-s-inner .cm-variable-3 {
  color: #DECB6B;
}
/* 标签 */
#cnblogs_post_body .CodeMirror.cm-s-inner .cm-tag {
  color: #ff5370;
}
/* 这两个不是一模一样吗-_-!!! */
/* 不过我不知道干什么的 */
#cnblogs_post_body .CodeMirror.cm-s-inner .cm-header,
#cnblogs_post_body .CodeMirror.cm-s-inner .cm-header {
  color: #b6e6ff;
}
/* 错误格式代码样式,比如cmd中写中文红底白字(我只发现这种情况) */
#cnblogs_post_body .CodeMirror.cm-s-inner .cm-error {
  color: #ffffff;
  background-color: #EC5F67;
}
/* 链接?连接?关联? */
#cnblogs_post_body .CodeMirror.cm-s-inner .cm-link {
  color: #B2B2E0;
}
/* 匹配括号? */
#cnblogs_post_body .cm-s-inner .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: white !important;
}
/**apply to code fences with plan text**/
/* 代码块计划文本 */
#cnblogs_post_body .md-fences {
  background: #263238;
  color: #e9eded;
  border: none;
  overflow-x: visible;
  white-space: pre;
  border-radius: 3px;
  padding-top: 4px;
  padding-bottom: 4px;
}
/* typora里的代码块 */
#cnblogs_post_body .md-fences .CodeMirror.cm-s-inner:before {
  content: "``` " attr(lang);
}
#cnblogs_post_body .md-fences .CodeMirror-scroll:after {
  content: " ";
}
#cnblogs_post_body .md-fences .CodeMirror.cm-s-inner:after {
  content: "```";
  bottom: 0;
  z-index: 99;
}
#cnblogs_post_body .md-fences .code-tooltip {
  background-color: #263238;
}

/** TOC目录 **/
#cnblogs_post_body .toc:before {
  content: "[TOC]" attr(lang);
}

/** 加粗文字 **/
#cnblogs_post_body p strong:before {
  content: "**" attr(lang);
}
#cnblogs_post_body p strong:after {
  content: "**" attr(lang);
}

/** 加斜文字 **/
#cnblogs_post_body p em:before {
  content: "_" attr(lang);
}
#cnblogs_post_body p em:after {
  content: "_" attr(lang);
}

/** 高亮文字 **/
#cnblogs_post_body p mark:before {
  content: "==" attr(lang);
}
#cnblogs_post_body p mark:after {
  content: "==" attr(lang);
}

/* 博客园里的代码引用,得放在代码块之前,不然会覆盖代码块的样式 */
#cnblogs_post_body code:before {
  content: "`" attr(lang);
}
#cnblogs_post_body code:after {
  content: "`";
}

/* 博客园里的代码块 */
/** bash **/
#cnblogs_post_body pre .language-bash:before {
  content: "```bash " attr(lang);
}
/** sh **/
#cnblogs_post_body pre .language-sh:before {
  content: "```sh " attr(lang);
}
/** shell **/
#cnblogs_post_body pre .language-shell:before {
  content: "```bash " attr(lang);
}
/** cmd **/
#cnblogs_post_body pre .language-cmd:before {
  content: "```cmd " attr(lang);
}
/** bat **/
#cnblogs_post_body pre .language-bat:before {
  content: "```bat " attr(lang);
}
/** sql **/
#cnblogs_post_body pre .language-sql:before {
  content: "```sql " attr(lang);
}
/** html,不知道为什么cnblogs会给html代码块加上xml的语言标识,所以这里加important **/
#cnblogs_post_body pre .language-html:before {
  content: "```html " attr(lang) !important;
}
/** css **/
#cnblogs_post_body pre .language-css:before {
  content: "```css " attr(lang);
}
/** js **/
#cnblogs_post_body pre .language-js:before {
  content: "```js " attr(lang);
}
/** javascript **/
#cnblogs_post_body pre .language-javascript:before {
  content: "```javascript " attr(lang);
}
/** java **/
#cnblogs_post_body pre .language-java:before {
  content: "```java " attr(lang);
}
/** c **/
#cnblogs_post_body pre .language-c:before {
  content: "```c " attr(lang);
}
/** c# **/
#cnblogs_post_body pre .language-c#:before {
  content: "```c# " attr(lang);
}
/** kotlin **/
#cnblogs_post_body pre .language-kotlin:before {
  content: "```kotlin " attr(lang);
}
/** xml **/
#cnblogs_post_body pre .language-xml:before {
  content: "```xml " attr(lang);
}
/** yaml **/
#cnblogs_post_body pre .language-yaml:before {
  content: "```yaml " attr(lang);
}
/** class或者id统一匹配,^=为以什么开头,$=为以什么结尾,*=为包含指定字符 **/
#cnblogs_post_body pre [class^="language-"]:after {
  content: "```";
  //bottom: 0;
  //z-index: 99;
}

/** 数字排序就不加了,反正数字已经很明显了 **/

/** 无序排序,marker内容替换 **/
/*一级 */
#cnblogs_post_body  ul li::marker {
  content: "- ●";
}
/*二级 */
#cnblogs_post_body  ul li ul li::marker {
  content: "- ○";
}
/*三级 */
#cnblogs_post_body  ul li ul li ul li::marker {
  content: "- ◆";
}
/*四级 */
#cnblogs_post_body  ul li ul li ul li ul li::marker {
  content: "- ◈";
}
/*五级 */
#cnblogs_post_body  ul li ul li ul li ul li ul li::marker {
  content: "- ◇";
}

/** 目录中原有样式会错乱,所以重写一下目录里的无序排序 **/
/*一级 */
#cnblogs_post_body .toc ul li::marker {
  content: "# ";
  color: #005DAD;
}
/*二级 */
#cnblogs_post_body .toc ul li ul li::marker {
  content: "## ";
  color: #005DAD;
}
/*三级 */
#cnblogs_post_body .toc ul li ul li ul li::marker {
  content: "### ";
  color: #005DAD;
}
/*四级 */
#cnblogs_post_body .toc ul li ul li ul li ul li::marker {
  content: "#### ";
  color: #005DAD;
}
/*五级 */
#cnblogs_post_body .toc ul li ul li ul li ul li ul li::marker {
  content: "##### ";
  color: #005DAD;
}



/* css中没有父级选择器,放弃给指定代码块加上指定代码类型标识 */
/*
#cnblogs_post_body pre #language-shell > #cnblogs_post_body pre:before {
  content: "```shell"
}
*/

/**
 * Inline Elements
 */
 /**
#cnblogs_post_body code {
  color: #949415;
  font-size: 0.9em;
}
**/
#cnblogs_post_body mark {
  background: bisque;
}
#cnblogs_post_body strong {
  color: #b5302e;
}
#cnblogs_post_body em {
  color: #400469;
}
#cnblogs_post_body a {
  color: #005dad;
}
#cnblogs_post_body #write a:hover {
  background-color: #2a6496;
  color: white;
  text-decoration: none;
}
#cnblogs_post_body .md-meta,
#cnblogs_post_body .md-content {
  display: inline;
}

/*
 * 大纲-悬浮时背景样式
 */
#cnblogs_post_body .outline-item:hover {
  background-color: rgb(220, 220, 220,1.0);
  color: #cee1eb;
  border-color: rgb(220, 220, 220,1.0);
}

#cnblogs_post_body .html-for-mac #typora-sidebar {
  border-right: none;
}

#cnblogs_post_body content {
  background: var(--bg-color);
}

#cnblogs_post_body .sidebar-footer {
  background: var(--side-bar-bg-color);
  border-top: 1px #555 solid;
}

#cnblogs_post_body .file-list-item,
#cnblogs_post_body .sidebar-tabs {
  border-top: none;
  border-bottom: none;
}

#cnblogs_post_body .file-node-content:hover {
  color: white;
}

#cnblogs_post_body .md-task-list-item>input {
  margin-top: calc(1rem - 12px);
}


/**自定义图片背景**/

body {

}
.day,#leftcontent{

}

/**新春灯笼**/
  :root {
    --lantern-bg: rgba(255, 0, 0, .8);
    --lantern-text-color: #ffc14e;
    --lantern-line-color: #ffa500;
  }
  .lantern-box-left {
    position: fixed;
    top: -10px;
    left: 100px;
    max-width: 200px;
    z-index: 1999;
  }
  .lantern-box1 {
    top: -20px;
    left: 180px;
  }
  .lantern-box2 {
    top: 0px;
    left: 260px;
  }
  .lantern-box3 {
    top: -10px;
    left: 340px;
  }
  .lantern-box-right {
    position: fixed;
    top: -10px;
    right: 100px;
    max-width: 200px;
    z-index: 1999;
  }
  .lantern-box4 {
    top: -20px;
    right: 180px;
  }
  .lantern-box5 {
    top: 0px;
    right: 260px;
  }
  .lantern-box6 {
    top: -10px;
    right: 340px;
  }

  .lantern-box1 .lantern,
  .lantern-box3 .lantern,
  .lantern-box4 .lantern,
  .lantern-box6 .lantern{
    -webkit-animation: swing 5s infinite ease-in-out;
    animation: swing 5s infinite ease-in-out;
    box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
  }

  .lantern {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: var(--lantern-bg);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 3s infinite ease-in-out;
    animation: swing 3s infinite ease-in-out;
    box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
  }

  .lantern-main {
    width: 95px;
    height: 90px;
    margin: 12px 8px 8px 10px;
    border-radius: 50% 50%;
    border: 2px solid var(--lantern-line-color);
  }

  .lantern-rect {
    width: 45px;
    height: 90px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.1);
    margin: -4px 8px 8px 26px;
    border-radius: 50% 50%;
    border: 2px solid var(--lantern-line-color);
  }

  .lantern-line {
    position: absolute;
    top: -60px;
    left: 60px;
    width: 2px;
    height: 60px;
    background: var(--lantern-line-color);
  }

  .lantern-tassel-top {
    position: relative;
    width: 5px;
    height: 20px;
    margin: -5px 0 0 59px;
    -webkit-animation: swing 4s infinite ease-in-out;
    -webkit-transform-origin: 50% -45px;
    background: var(--lantern-line-color);
    border-radius: 0 0 5px 5px;
  }

  .lantern-tassel-middle {
    position: absolute;
    top: 14px;
    left: -2px;
    width: 10px;
    height: 10px;
    background: #dc8f03;
    border-radius: 50%;
  }

  .lantern-tassel-bottom {
    position: absolute;
    top: 18px;
    left: -2px;
    width: 10px;
    height: 35px;
    background: var(--lantern-line-color);
    border-radius: 0 0 0 5px;
  }

  .lantern:before {
    position: absolute;
    top: -7px;
    left: 29px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    z-index: 1999;
    border-radius: 5px 5px 0 0;
    border: solid 1px #dc8f03;
    background: var(--lantern-line-color);
    background: linear-gradient(to right, #ffa500, #ffc14e, #ffa500, #ffc14e, #ffa500);
  }

  .lantern:after {
    position: absolute;
    bottom: -7px;
    left: 10px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    margin-left: 20px;
    border-radius: 0 0 5px 5px;
    border: solid 1px #dc8f03;
    background: var(--lantern-line-color);
    background: linear-gradient(to right, #ffa500, #ffc14e, #ffa500, #ffc14e, #ffa500);
  }

  .lantern-text {
    font-family: 华文行楷, 楷体, Arial, Lucida Grande, Tahoma, sans-serif;
    font-size: 2.8rem;
    color: var(--lantern-text-color);
    font-weight: bold;
    line-height: 90px;
    text-align: center;
  }

  .night .lantern-text,
  .night .lantern-box {
    background: transparent !important;
  }

  @keyframes swing {
    0% {
      transform: rotate(-10deg)
    }

    50% {
      transform: rotate(10deg)
    }

    100% {
      transform: rotate(-10deg)
    }
  }

  @-moz-keyframes swing {
    0% {
      -moz-transform: rotate(-10deg)
    }

    50% {
      -moz-transform: rotate(10deg)
    }

    100% {
      -moz-transform: rotate(-10deg)
    }
  }

  @-webkit-keyframes swing {
    0% {
      -webkit-transform: rotate(-10deg)
    }

    50% {
      -webkit-transform: rotate(10deg)
    }

    100% {
      -webkit-transform: rotate(-10deg)
    }
  }