.post {
  border-radius: 0.4em;
  padding: 30px 50px;
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 0 20px #ddd;
}
.post > .title {
  font-size: 1.5em;
  font-family: '黑体';
}
.post > .meta {
  color: #bababa;
}
.post > .categories {
  margin: 10px 0;
}
.post > .categories > .separator {
  margin: 0 9px;
  color: #c0c4cc;
}
.post > .categories > .category {
  display: inline-block;
}
.post > .categories > .category > a {
  color: #fa8072;
}
.post > .categories > .category > a:hover {
  color: #5094d5;
}
.post > .tags {
  margin: 10px 0;
}
.post > .tags > a + a {
  margin-left: 26px;
}
.post > .tags > a > .tag {
  position: relative;
  color: #737373;
  background-color: #ccc;
  box-shadow: 0 4px 0 0 #b3b3b3, 4px 4px 0 0 #b3b3b3;
  display: inline-block;
  height: 30px;
  line-height: 0;
  padding: 1rem 2.8rem 1rem 2rem;
  cursor: pointer;
  border-radius: 4px 1px 1px 4px;
  transition: all 0.3s ease;
}
.post > .tags > a > .tag::before {
  content: '';
  position: absolute;
  background-color: #ccc;
  box-shadow: 0 5px 0 0 #b3b3b3;
  width: 22px;
  height: 24px;
  top: 4px;
  right: -11px;
  transform: rotateZ(-45deg);
  transition: all 0.3s ease;
  border-radius: 1px 1px 4px;
}
.post > .tags > a > .tag:hover::before {
  background-color: #d9d9d9;
}
.post > .tags > a > .tag::after {
  content: '';
  position: absolute;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 3px 3px 0 0 #b3b3b3 inset;
  width: 8px;
  height: 8px;
  top: 12px;
  right: 0;
  transition: all 0.3s ease;
}
.post > .tags > a > .tag:active,
.post > .tags > a > .tag:active::before,
.post > .tags > a > .tag:active::after {
  box-shadow: none;
}
.post > .tags > a > .tag:active {
  top: 4px;
}
.post > .tags > a > .tag:hover {
  background-color: #d9d9d9;
  transform: scale(1.04, 1.04);
}
.post > .tags > a > .tag > .index {
  color: #bfbfbf;
  position: absolute;
  top: 0;
  left: 0;
  font: bold 50px/28px 'open sans';
  overflow: hidden;
  height: 30px;
}
.post > .tags > a > .tag .tag-aqua {
  color: #072520;
  background: #28d0b3;
  box-shadow: 0 4px 0 0 #20a58e, 4px 4px 0 0 #20a58e;
}
.post > .tags > a > .tag .tag-aqua::before {
  background: #28d0b3;
  box-shadow: 0 4px 0 0 #20a58e;
}
.post > .tags > a > .tag .tag-aqua:hover::before {
  background: #39d9bd;
}
.post > .tags > a > .tag .tag-aqua::after {
  box-shadow: 3px 3px 0 0 #20a58e inset;
}
.post > .tags > a > .tag .tag-aqua:hover {
  background: #39d9bd;
}
.post > .tags > a > .tag .tag-aqua > .index {
  color: #24bba1;
}
.post > .tags > a > .tag .tag-blue {
  color: #241772;
  background: #5945e8;
  box-shadow: 0 4px 0 0 #331cde, 4px 4px 0 0 #331cde;
}
.post > .tags > a > .tag .tag-blue::before {
  background: #5945e8;
  box-shadow: 0 5px 0 0 #331cde;
}
.post > .tags > a > .tag .tag-blue:hover:before {
  background: #6d5ceb;
}
.post > .tags > a > .tag .tag-blue:after {
  box-shadow: 3px 3px 0 0 #331cde inset;
}
.post > .tags > a > .tag .tag-blue:hover {
  background: #6d5ceb;
}
.post > .tags > a > .tag .tag-blue > .index {
  color: #452ee5;
}
.post > .tags > a > .tag .tag-orange {
  color: #221202;
  background: #e17a0f;
  box-shadow: 0 4px 0 0 #b1600c, 4px 4px 0 0 #b1600c;
}
.post > .tags > a > .tag .tag-orange::before {
  background: #e17a0f;
  box-shadow: 0 5px 0 0 #b1600c;
}
.post > .tags > a > .tag .tag-orange:hover:before {
  background: #f0871a;
}
.post > .tags > a > .tag .tag-orange:after {
  box-shadow: 3px 3px 0 0 #b1600c inset;
}
.post > .tags > a > .tag .tag-orange:hover {
  background: #f0871a;
}
.post > .tags > a > .tag .tag-orange > .index {
  color: #c96d0d;
}
.post > .tags > a > .tag .tag-red {
  color: #290a0a;
  background: #c33;
  box-shadow: 0 4px 0 0 #a32929, 4px 4px 0 0 #a32929;
}
.post > .tags > a > .tag .tag-red::before {
  background: #c33;
  box-shadow: 0 5px 0 0 #a32929;
}
.post > .tags > a > .tag .tag-red:hover:before {
  background: #d14747;
}
.post > .tags > a > .tag .tag-red:after {
  box-shadow: 3px 3px 0 0 #a32929 inset;
}
.post > .tags > a > .tag .tag-red:hover {
  background: #d14747;
}
.post > .tags > a > .tag .tag-red > .index {
  color: #b82e2e;
}
.post > .tags > a > .tag .tag-yellow {
  color: #312b03;
  background: #eed112;
  box-shadow: 0 4px 0 0 #bfa80e, 4px 4px 0 0 #bfa80e;
}
.post > .tags > a > .tag .tag-yellow::before {
  background: #eed112;
  box-shadow: 0 5px 0 0 #bfa80e;
}
.post > .tags > a > .tag .tag-yellow:hover:before {
  background: #f0d62a;
}
.post > .tags > a > .tag .tag-yellow:after {
  box-shadow: 3px 3px 0 0 #bfa80e inset;
}
.post > .tags > a > .tag .tag-yellow:hover {
  background: #f0d62a;
}
.post > .tags > a > .tag .tag-yellow > .index {
  color: #d7bd0f;
}
.post > .content > * {
  font-family: '宋体';
}
.post > .content table {
  width: 100%;
  border: 1px solid #ccc;
  text-align: center;
  margin: 8px 0;
  border-collapse: collapse;
}
.post > .content table thead {
  background-color: #eff3f5;
}
.post > .content table tr:nth-child(even) {
  background-color: #f7f7f7;
}
.post > .content table th,
.post > .content table td {
  border: 1px solid #ccc;
  padding: 10px;
}
.post > .content hr {
  margin: 24px 0;
  border: none;
  border-top: 1px solid #ddd;
}
.post > .content img {
  display: block;
  margin: 10px auto;
  border-radius: 8px;
}
.post > .content ol,
.post > .content ul {
  margin: 20px 0 20px 20px;
}
.post > .content ol > li,
.post > .content ul > li {
  margin: 10px 0 10px 20px;
}
.post > .content blockquote {
  padding: 16px;
  border-left: 8px solid #dddfe4;
  background-color: #eef0f4;
  margin: 1.2em 0;
}
.post > .content p {
  margin: 0.6em 0;
}
.post > .content .highlight .code {
  text-align: left;
}