index.css

.glowing-border {
  border-bottom: 3px solid cyan;
  
}


.codeBlock {
  margin-top: 4px;
  margin-bottom: 4px;
  word-break: break-word;
  background-color: #1e1e1e;
  padding: 10px;
  font-size:13px;
}
html {
  font-family: 'Montserrat', sans-serif !important;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden],
template {
  display: none;
}
a {
  background-color: transparent;
}
a:active,
a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
mark {
  background: #ff0;
  color: #000;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
  border: 0;
  border-radius: 1px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
pre {
  overflow: auto;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}
button {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input {
  line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  padding: 0;
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-collapse: collapse;
  width: 100%;
}
table th {
  background-color: #030303;
}
table td,
table th {
  text-align: justify;
  padding: 4px 8px;
  border: 1px solid #000000;
}
td,
th {
  padding: 0;
}
* {
  box-sizing: border-box;
  outline: none;
  margin: 0;
  padding: 0;
}
html {
  color: #ffffff;
  width: 100%;
  height: 100%;
  padding-top: 54px;
  font-size: 16px;
  line-height: 1.5rem;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-rendering: optimizelegibility;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  background-color: #000;
}
body.modal-active {
  overflow: hidden;
}
@media (max-width: 680px) {
  body.modal-active {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}
body.z_menu-open .menu-phone {
  transform: translate3d(-20px, 0, 0);
}
.z-depth-nav,
.l_header,
#u-search .modal .modal-header {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.24), 0 3px 6px 0 rgba(0, 0, 0, 0.1);
}
.z-depth-nav-raised,
#u-search .modal .modal-header:hover {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1),
    0 8px 16px 0 rgba(0, 0, 0, 0.1), 0 16px 32px 0 rgba(0, 0, 0, 0.1);
}
.z-depth-main,
.l_main .post,
.l_side section {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.z-depth-main-raised {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1),
    0 8px 16px 0 rgba(0, 0, 0, 0.1), 0 16px 32px 0 rgba(0, 0, 0, 0.1);
}
.z-depth-0 {
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.07);
}
.z-depth-1 {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.z-depth-1-half {
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.4), 0 0 8px 0 rgba(0, 0, 0, 0.2);
}
.z-depth-2 {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1);
}
.z-depth-3 {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.12), 0 8px 25px 0 rgba(0, 0, 0, 0.1);
}
.z-depth-4 {
  box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.11),
    0 12px 22px 0 rgba(0, 0, 0, 0.11);
}
.z-depth-5 {
  box-shadow: 0 12px 12px 0 rgba(0, 0, 0, 0.1),
    0 20px 33px 0 rgba(0, 0, 0, 0.11);
}
.z-depth-0 {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
}
.hoverable {
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  box-shadow: 0;
}
.hoverable:hover {
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
::-moz-selection {
  background: rgba(255, 255, 255, 0.1);
}
::selection {
  background: rgba(255, 255, 255, 0.1);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  -webkit-font-feature-settings: "dlig" 1, "liga" 1, "lnum" 1, "kern" 1;
  -moz-font-feature-settings: "dlig" 1, "liga" 1, "lnum" 1, "kern" 1;
  -o-font-feature-settings: "dlig" 1, "liga" 1, "lnum" 1, "kern" 1;
  text-rendering: geometricPrecision;
  margin: 0 0 0.4em 0;
}
h1 {
  font-size: 24px;
}
h2 {
  font-size: 22.4px;
}
h3 {
  font-size: 19.2px;
}
h4 {
  font-size: 17.6px;
}
h5 {
  font-size: 16px;
}
h6 {
  font-size: 14px;
}
a {
  color: #444444;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
}
a:hover {
  text-decoration: none;
}
pre {
  tab-size: 4;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  -webkit-tab-size: 4;
}
img {
  max-width: 100%;
}
.clearfix {
  zoom: 1;
}
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.container.clearfix {
  display: flex;
}
@media (max-width: 768px) {
  .container.clearfix {
    display: inherit;
  }
}
.hidden {
  text-indent: -9999px;
  visibility: hidden;
  display: none;
}
.inner {
  position: relative;
  width: 80%;
  max-width: 710px;
  margin: 0 auto;
}
.vertical {
  display: table-cell;
  vertical-align: middle;
}
.right {
  float: right;
}
.left {
  float: left;
}
.disable-trans {
  -moz-transition: none !important;
  -webkit-transition: none !important;
  transition: none !important;
}
.txt-ellipsis,
.l_side section .content ul > li a .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
ul,
ol {
  padding-left: 0;
}
li {
  list-style: none;
}
.mark {
  position: relative;
}
.mark a {
  color: #444444;
  display: inline-block;
  padding: 0 8px;
  border-left: 4px solid transparent;
  background: transparent;
  border-radius: 4px;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
}
.mark a:hover {
  background: rgba(34, 35, 38, 0.1);
  border-left: 4px solid #222326;
  padding: 8px;
}
.mark a:active {
  border-left: 8px solid #222326;
}
ul.h-list {
  display: flex;
  align-items: center;
  height: 100%;
}
ul.h-list > li {
  height: 100%;
  justify-content: center;
}
#loading-bar-wrapper {
  position: fixed;
  top: 52px;
  left: 0;
  width: 100%;
  z-index: 99999;
}
#loading-bar {
  position: fixed;
  width: 0;
  height: 2px;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  background-color: rgba(255, 255, 255, 0.5);
}
#loading-bar.pure {
  background-color: rgba(34, 35, 38, 0.5);
}
.container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.container--flex {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
.l_body {
  position: relative;
  padding: 40px 20px 20px;
}
@media (max-width: 580px) {
  .l_body {
    padding: 20px 0 20px;
    border-radius: 0;
  }
}
.l_body .s-top {
  transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -webkit-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  z-index: 9;
  position: fixed;
  width: 48px;
  height: 48px;
  line-height: 48px;
  border-radius: 100%;
  bottom: 40px;
  right: 40px;
  transform: translateY(100px) scale(0);
  transform-origin: bottom;
  color: #ffffff;
}
@media (max-width: 768px) {
  .l_body .s-top {
    right: 20px;
  }
}
.l_body .s-top.show {
  transform: translateY(0) scale(1);
}
.l_body .s-top.show.hl {
  background: #222326;
  color: white;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
@media (min-width: 768px) {
  .l_body .s-top:hover {
    transform: scale(1.2);
    border-radius: 25%;
    background: #222326;
    color: white;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1),
      0 8px 16px 0 rgba(0, 0, 0, 0.1), 0 16px 32px 0 rgba(0, 0, 0, 0.1);
  }
  .l_body .s-top:hover.hl {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1),
      0 8px 16px 0 rgba(0, 0, 0, 0.1), 0 16px 32px 0 rgba(0, 0, 0, 0.1);
  }
}
.l_header {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  font-size: 16px;
  line-height: 54px;
  height: 54px;
  overflow: hidden;
  padding: 0 20px;
  background: #000;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
}
.l_header .wrapper {
  padding: auto 20px;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
}
.l_header .wrapper.sub {
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transform: translateY(-54px);
}
@media (max-width: 580px) {
  .l_header .wrapper.sub .logo {
    transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -webkit-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    padding-left: 20px;
    padding-right: 0;
    font-size: 16px;
  }
}
.l_header .nav--main,
.l_header .nav-sub {
  height: 54px;
}
.l_header,
.l_header a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 54px;
  line-height: 54px;
  color: #fff;
}
.l_header .logo {
  padding: 0 20px;
  line-height: 54px;
  font-size: 19.2px;
  
  letter-spacing: 0;
}
@media (max-width: 580px) {
  .l_header .logo {
    flex: auto;
  }
}
.l_header .logo.img {
  padding: 0 20px 0 0;
}
.l_header .logo img {
  padding: 0;
  height: 100%;
}
.l_header .nav-sub .logo {
  font-size: 16px;
  
}
@media (max-width: 580px) {
  .l_header .nav-sub .logo {
    letter-spacing: -0.5px;
    padding-top: 1px;
  }
}
.l_header .menu {
  position: relative;
  flex: 1 0 auto;
  height: 54px;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  margin: 0 20px;
}
.l_header .menu ul > li > a {
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  display: block;
  font-size: 16px;
  color: #fff;
  padding: 0 8px;
}
.l_header .menu ul > li > a:hover {
  color: #fff;
  border-bottom: 2px solid #090c0e;
  background: rgba(9, 12, 14, 0.1);
}
.l_header .menu ul > li > a:active,
.l_header .menu ul > li > a.active {
  color: #fff;
  border-bottom: 2px solid #090c0e;
}
@media (max-width: 580px) {
  .l_header .menu {
    display: none;
  }

}

.l_header .switcher {
  display: none;
  font-size: 16px;
  line-height: 54px;
}
.l_header .switcher > li {
  height: 34px;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  margin: 2px;
}
@media (max-width: 580px) {
  .l_header .switcher > li {
    width: 34px;
    height: 34px;
  }
}
.l_header .switcher > li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  border-radius: 100px;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
}
.l_header .switcher > li a:hover {
  background: rgba(9, 12, 14, 0.3);
}
@media (max-width: 580px) {
  .l_header .switcher > li a {
    width: 34px;
    height: 34px;
  }
}
@media (max-width: 580px) {
  .l_header .switcher {
    display: flex;
    padding-left: 10px;
    padding-right: 14px;
  }
}
.l_header .nav-sub .switcher {
  display: flex;
}
.l_header .m_search {
  position: relative;
  height: 34px;
  width: 285px;
  line-height: 34px;
  margin-top: 10px;
  margin-bottom: 10px;
  vertical-align: middle;
}
@media (max-width: 1024px) {
  .l_header .m_search {
    width: 240px;
  }
}
.l_header .m_search .form {
  position: relative;
  display: block;
  width: 100%;
}
.l_header .m_search .icon,
.l_header .m_search .input {
  transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -webkit-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
}
.l_header .m_search .icon {
  position: absolute;
  display: block;
  height: 34px;
  width: 34px;
  line-height: 34px;
  top: 0;
  left: 10px;
  font-size: 16px;
}
.l_header .m_search .input {
  display: block;
  font-size: 16px;
  margin: 0;
  width: 100%;
  color: rgba(136, 255, 255, 0.6);
  padding-left: 34px;
  height: 34px;
  line-height: 34px;
  border: none;
  border-radius: 4px;
  background: rgba(9, 12, 14, 0.15);
  box-sizing: border-box;
  -webkit-appearance: none;
  box-shadow: none;
  border: 1px solid transparent;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
}
@media (max-width: 580px) {
  .l_header .m_search .input {
    padding-left: 34px;
  }
}
.l_header .m_search .input ~ .icon {
  color: rgba(136, 255, 255, 0.6);
}
.l_header .m_search .input::-webkit-input-placeholder {
  color: rgba(136, 255, 255, 0.6);
}
.l_header .m_search .input:-moz-placeholder {
  color: rgba(136, 255, 255, 0.6);
}
.l_header .m_search .input::-moz-placeholder {
  color: rgba(136, 255, 255, 0.6);
}
.l_header .m_search .input:-ms-input-placeholder {
  color: rgba(136, 255, 255, 0.6);
}
.l_header .m_search .input:hover {
  border: 1px solid rgba(136, 255, 255, 0.6);
}
.l_header .m_search .input:focus {
  color: #88ffff;
  border: 1px solid rgba(136, 255, 255, 0.6);
}
.l_header .m_search .input:focus ~ .icon {
  color: #88ffff;
}
.l_header.pure {
  background: #090c0e;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.l_header.pure,
.l_header.pure a {
  color: #222326;
}
.l_header.pure .menu ul > li > a {
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  color: rgba(255, 255, 255, 0.7);
}
.l_header.pure .menu ul > li > a.current {
  border-bottom: 2px solid rgba(34, 35, 38, 0.8);
}
.l_header.pure .menu ul > li > a:hover {
  color: #222326;
  border-bottom: 2px solid #222326;
  background: rgba(34, 35, 38, 0.1);
}
.l_header.pure .menu ul > li > a:active,
.l_header.pure .menu ul > li > a.active {
  color: #222326;
  border-bottom: 2px solid #222326;
}
.l_header.pure .switcher > li a:hover {
  background: rgba(34, 35, 38, 0.15);
}
.l_header.pure .m_search .input {
  color: rgba(34, 35, 38, 0.6);
  background: #000000;
}
.l_header.pure .m_search .input ~ .icon {
  color: rgba(34, 35, 38, 0.6);
}
.l_header.pure .m_search .input::-webkit-input-placeholder {
  color: rgba(34, 35, 38, 0.6);
}
.l_header.pure .m_search .input:-moz-placeholder {
  color: rgba(34, 35, 38, 0.6);
}
.l_header.pure .m_search .input::-moz-placeholder {
  color: rgba(34, 35, 38, 0.6);
}
.l_header.pure .m_search .input:-ms-input-placeholder {
  color: rgba(34, 35, 38, 0.6);
}
.l_header.pure .m_search .input:hover {
  border: 1px dashed rgba(34, 35, 38, 0.6);
}
.l_header.pure .m_search .input:focus {
  color: #222326;
  background: rgba(34, 35, 38, 0.15);
  border: 1px solid rgba(34, 35, 38, 0.6);
}
.l_header.pure .m_search .input:focus ~ .icon {
  color: #222326;
}
@media (max-width: 580px) {
  .l_header {
    padding: 0;
  }
  .l_header .m_search {
    width: 0;
    overflow: hidden;
    position: absolute;
    transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -webkit-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    margin: 0 10px;
  }
  .l_header.z_search-open .logo {
    opacity: 0;
  }
  .l_header.z_search-open .m_search {
    width: 70%;
  }
}
.menu-phone {
  position: fixed;
  top: 74px;
  right: 0;
  z-index: 10000;
  line-height: 40px;
  background: white;
  border-right: 0;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1),
    0 8px 16px 0 rgba(0, 0, 0, 0.1), 0 16px 32px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  display: none;
  transform-origin: right top;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
}
.menu-phone .header {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background-color: rgba(53, 53, 53, 0.9);
  color: #88ffff;
  font-size: 16px;
  line-height: 1.8em;
  padding: 8px 26px;
}
.menu-phone:hover {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1),
    0 8px 16px 0 rgba(0, 0, 0, 0.1), 0 16px 32px 0 rgba(0, 0, 0, 0.1);
}
.menu-phone:active {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.menu-phone nav {
  padding: 10px 0;
}
.menu-phone nav .nav {
  height: 36px;
  line-height: 36px;
  position: relative;
  display: block;
  color: #444444;
  padding: 2px 20px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.menu-phone nav .nav:hover,
.menu-phone nav .nav.active {
  border-left: 4px solid #222326;
  background: rgba(34, 35, 38, 0.1);
}
.l_main {
  width: calc(100% - 1 * 285px);
  padding-right: 20px;
  float: left;
}
@media (max-width: 1024px) {
  .l_main {
    width: calc(100% - 1 * 240px);
  }
}
@media (max-width: 768px) {
  .l_main {
    width: 100%;
  }
}
.l_main .post-list {
  position: relative;
  margin: 0px auto;
  column-gap: 0;
  margin: -10px;
}
@media (max-width: 580px) {
  .l_main .post-list {
    margin: 0;
  }
}
.l_main ul.popular-posts h3 {
  padding: 0;
  margin: 0;
  font-size: 16px;
}
.l_main #comments {
  position: relative;
}
@media (max-width: 580px) {
}
.l_main #comments #valine_container p {
  line-height: 1.7;
}
.l_main #comments #valine_container .info {
  display: none;
}
.l_main #comments #valine_container .vwrap {
  border-radius: 8px;
  border-style: dashed;
  border: 1px dashed rgba(255, 255, 255, 0.3);
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
}
.l_main #comments #valine_container .vwrap:hover {
  border: 1px dashed #222326;
}
.l_main #comments #valine_container .vwrap .vheader .vinput {
  border-radius: 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
}
.l_main #comments #valine_container .vwrap .vheader .vinput:hover {
  border-bottom: 1px dashed #222326;
}
.l_main #comments #valine_container .vwrap .vheader .vinput:focus {
  border-bottom: 1px solid #222326;
}
.l_main #comments #valine_container .vwrap .vedit .vctrl span {
  color: #222326;
  padding: 0;
  margin: 10px;
}
.l_main #comments #valine_container button {
  border: none;
  padding-left: 2.4em;
  padding-right: 2.4em;
  font-weight: bold;
  background-color: #222326;
  color: white;
  border-radius: 4px;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
}
.l_main #comments #valine_container button:hover {
  background: #0a0a0b;
}
.l_main #comments #valine_container blockquote {
  padding: 20px;
  border-left: 4px solid #222326;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
}
.l_main #comments #valine_container blockquote p {
  text-align: left;
  word-wrap: normal;
  margin: 0;
  font-size: 14px;
  line-height: 21px;
}
.l_main #comments #valine_container pre code {
  border: none;
}
.l_main #comments #valine_container code {
  font-size: 12.8px;
  color: rgba(255, 255, 255, 0.9);
}
.l_main #comments #valine_container a,
.l_main #comments #valine_container .vemoji-btn,
.l_main #comments #valine_container .vpreview-btn {
  color: #88ffff;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
}
.l_main #comments #valine_container a:hover,
.l_main #comments #valine_container .vemoji-btn:hover,
.l_main #comments #valine_container .vpreview-btn:hover {
  color: #88ffff;
  text-decoration: underline;
}
.l_main #comments #valine_container a:active,
.l_main #comments #valine_container .vemoji-btn:active,
.l_main #comments #valine_container .vpreview-btn:active {
  color: #08ffff;
}
.l_main #comments #valine_container .vhead span.vnick {
  color: rgba(255, 255, 255, 0.9);
}
.l_main #comments #valine_container .vhead a.vnick {
  color: #ff9800;
  font-weight: bold;
}
.l_main #comments #valine_container .vhead a.vnick:hover {
  color: #88ffff;
  text-decoration: underline;
}
.l_main #comments #valine_container .vhead .vsys {
  margin: 2px;
  padding: 1px 8px;
  background-color: rgba(255, 255, 255, 0.1);
}
.l_main #comments #valine_container .vcard .vquote {
  border-left: none;
}
.l_main #comments #valine_container .vcard .vh {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}
.l_main #comments #valine_container .vmeta .vat {
  font-weight: bold;
  color: #222326;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
}
.l_main #comments #valine_container .vmeta .vat:hover {
  color: #88ffff;
  text-decoration: underline;
}
.l_main #comments #valine_container .vmeta .vat:active {
  color: #08ffff;
}
.l_main #comments #valine_container .vinput {
  color: #ffffff;
}
.l_main #comments #valine_container p {
  color: #ffffff;
}
.l_main #comments .vemojis {
  justify-content: space-between;
}
.l_main #comments .vemojis i {
  width: auto;
  height: 36px;
  padding: 0;
  margin: 8px 8px 0 8px;
}
.l_main #comments .vemojis i .emoji {
  height: 24px;
  margin-top: 6px;
  background: transparent;
}
.l_main #comments p .emoji {
  display: inline;
  height: 28px;
  background: transparent;
}
.l_main .post-wrapper {
  column-break-inside: avoid;
  break-inside: avoid-column;
}
.l_main .post-wrapper {
  padding: 10px;
}
.l_main .post-wrapper .post {
  padding: 30px 20px;
}
.l_main .post-wrapper .post .meta {
  margin-bottom: 20px;
}
.l_main .post-wrapper .post .meta .title {
  font-size: 22.4px;
}
.l_main .post-wrapper .post .full-width {
  margin-left: -20px;
  margin-right: -20px;
  padding-left: 20px;
  padding-right: 20px;
  width: calc(100% + 2 * 20px);
}
.l_main .post-wrapper .post .auto-padding {
  padding-left: 20px;
  padding-right: 20px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  overflow: auto;
}
.l_main .post-wrapper .post .highlight {
  margin-left: 0;
  margin-right: 0;
  width: calc(100% - 0 * 20px);
}
@media (max-width: 580px) {
  .l_main .post-wrapper .post .highlight {
    margin-left: 0;
    margin-right: 0;
    width: calc(100% - 0 * 20px);
  }
  .l_main .post-wrapper .post .auto-padding {
    padding-left: 20px;
    padding-right: 20px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}
.l_main .post-wrapper .tags {
  margin-bottom: -30px;
}
@media (max-width: 580px) {
  .l_main .post-wrapper {
    padding: 0 0 20px 0;
  }
}
.l_main .post {
  position: relative;
  margin: 0 auto;
  padding: 40px 30px;
  background: #000;
  border-radius: 8px;
  border: 3px solid cyan;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
}
.l_main .post h1 {
  font-weight: normal;
  font-size: 28.8px;
  line-height: 1.7;
  color: #ffffff;
}
.l_main .post:hover {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1),
    0 8px 16px 0 rgba(0, 0, 0, 0.1), 0 16px 32px 0 rgba(0, 0, 0, 0.1);
}
.l_main .post:active {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
@media (max-width: 580px) {
  .l_main .post {
    border-radius: 0;
  }
  .l_main .post:hover {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  }
}
.l_main .post .tags a {
  color: rgba(255, 255, 255, 0.7);
}
.l_main .post .meta {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13.3px;
}
.l_main .post .meta#header-meta {
  margin-top: 0;
  margin-bottom: 20px;
}
.l_main .post .meta#footer-meta {
  margin-top: 40px;
  margin-bottom: 10px;
}
.l_main .post .meta .aplayer,
.l_main .post .meta .thumbnail {
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  width: 65px;
  height: 65px;
  border-radius: 100%;
  float: right;
  margin: 4px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.l_main .post .meta .aplayer:hover,
.l_main .post .meta .thumbnail:hover {
  border-radius: 25%;
  transform: scale(1.1);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1),
    0 8px 16px 0 rgba(0, 0, 0, 0.1), 0 16px 32px 0 rgba(0, 0, 0, 0.1);
}
@media (max-width: 580px) {
  .l_main .post .meta .aplayer:hover,
  .l_main .post .meta .thumbnail:hover {
    border-radius: 100%;
    transform: scale(1);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  }
}
.l_main .post .meta .thumbnail {
  width: auto;
  border-radius: 4px;
  box-shadow: none;
}
.l_main .post .meta .thumbnail:hover {
  border-radius: 4px;
  transform: scale(1.1) rotate(4deg);
  box-shadow: none;
}
.l_main .post .meta .title {
  text-align: left;
  font-size: 28.8px;
  margin: 0;
}
@media (max-width: 580px) {
  .l_main .post .meta .title {
    font-size: 22.4px;
  }
}
.l_main .post .meta .title a {
  display: inline;
  line-height: 1.7;
  font-weight: normal;
  color: #ffffff;
  text-decoration: none;
  font-size: 28.8px;
}
@media (max-width: 580px) {
  .l_main .post .meta .title a {
    font-size: 22.4px;
  }
}
.l_main .post .meta .new-meta-box {
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.l_main .post .meta .new-meta-box .new-meta-item {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 24px;
  display: flex;
  align-items: center;
  padding: 2px;
  margin: 4px 8px 4px 0;
  border-radius: 4px;
}
.l_main .post .meta .new-meta-box .new-meta-item .notlink {
  cursor: default;
}
.l_main .post .meta .new-meta-box .new-meta-item .notlink:hover {
  color: rgba(255, 255, 255, 0.7);
}
.l_main .post .meta .new-meta-box .new-meta-item:last-child {
  margin-right: 0;
}
.l_main .post .meta .new-meta-box .new-meta-item img,
.l_main .post .meta .new-meta-box .new-meta-item i {
  border-radius: 100%;
  display: inline;
  width: 20px;
}
.l_main .post .meta .new-meta-box .new-meta-item img {
  width: 14px;
}
.l_main .post .meta .new-meta-box .new-meta-item i {
  margin-right: 2px;
}
.l_main .post .meta .new-meta-box .new-meta-item p,
.l_main .post .meta .new-meta-box .new-meta-item a {
  color: rgba(255, 255, 255, 0.7);
  padding-left: 0;
  padding-right: 4px;
}
.l_main .post .meta .new-meta-box .new-meta-item a:hover {
  color: #88ffff;
  text-decoration: none;
}
.l_main .post .meta .new-meta-box .share-body {
  height: 22px;
  display: flex;
}
.l_main .post .meta .new-meta-box .share-body a {
  padding: 0;
  margin-right: 4px;
}
.l_main .post .meta .new-meta-box .share-body a img {
  height: 22px;
  width: auto;
  background: transparent;
}
.l_main .post .full-width,
.l_main .post .highlight {
  margin-left: 0;
  margin-right: 0;
  width: calc(100% - 0 * 20px);
}
.l_main .post img {
  display: block;
  max-width: 100%;
  border-radius: 4px;
  background: none;
}
.l_main .post span img {
  display: inline-block;
}
@media (max-width: 768px) {
  .l_main {
    padding-right: 0;
  }
  .l_main .post {
    padding: 30px 20px;
  }
  .l_main .post .meta {
    margin-bottom: 20px;
  }
  .l_main .post .meta .title {
    font-size: 22.4px;
  }
  .l_main .post .full-width {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    width: calc(100% + 2 * 20px);
  }
  .l_main .post .auto-padding {
    padding-left: 20px;
    padding-right: 20px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    overflow: auto;
  }
  .l_main .post .highlight {
    margin-left: 0;
    margin-right: 0;
    width: calc(100% - 0 * 20px);
  }
}
@media (max-width: 768px) and (max-width: 580px) {
  .l_main {
    width: 100%;
  }
}
@media (max-width: 768px) and (max-width: 580px) {
  .l_main .post .highlight {
    margin-left: 0;
    margin-right: 0;
    width: calc(100% - 0 * 20px);
  }
  .l_main .post .auto-padding {
    padding-left: 20px;
    padding-right: 20px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}
.l_main .prev-next {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}
.l_main .prev-next .prev {
  text-align: left;
  border-top-right-radius: 32px;
  border-bottom-right-radius: 32px;
}
.l_main .prev-next .next {
  text-align: right;
  border-top-left-radius: 32px;
  border-bottom-left-radius: 32px;
}
.l_main .prev-next p {
  margin: 20px;
}
.l_main .prev-next a {
  color: rgba(136, 255, 255, 0.9);
}
.l_main .prev-next section {
  color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 8px;
}
.l_main .prev-next section:hover {
  color: #000;
}
@media (max-width: 580px) {
  .l_main .prev-next section {
    border-radius: 0;
  }
}
.l_side {
  width: 285px;
  float: right;
  position: relative;
  display: flex;
  flex-direction: column;
}
@media (max-width: 1024px) {
  .l_side {
    width: 240px;
  }
}
@media (max-width: 768px) {
  .l_side {
    margin: 20px 0 0;
    width: 100%;
  }
}
.l_side .toc-wrapper {
  z-index: 1;
  overflow: hidden;
  border-radius: 8px;
  position: sticky;
  top: 74px;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
}
.l_side .toc-wrapper header {
  position: sticky;
  width: 100%;
  top: 0;
}
.l_side .toc-wrapper .content {
  padding: 10px 0;
  max-height: 500px;
  overflow: auto;
}
.l_side .toc-wrapper .content.pure {
  padding-top: 0;
}
.l_side .toc-wrapper .content a {
  border-left: 4px solid transparent;
}
.l_side .toc-wrapper .content a:hover {
  color: #fff;
  border-left: 4px solid #222326;
}
.l_side .toc-wrapper .content a:active {
  border-left: 8px solid #222326;
}
.l_side .toc-wrapper .content a.active {
  color: #fff;
  border-left: 4px solid #222326;
  background: rgba(34, 35, 38, 0.1);
}
.l_side .toc-wrapper.active {
  position: fixed;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1),
    0 8px 16px 0 rgba(0, 0, 0, 0.1), 0 16px 32px 0 rgba(0, 0, 0, 0.1);
}
.l_side .toc-wrapper.active header .s-toc {
  transform: rotate(30deg);
}
@media (max-width: 580px) {
  .l_side .toc-wrapper {
    position: fixed;
    max-height: 1000px;
    top: 54px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1),
      0 8px 16px 0 rgba(0, 0, 0, 0.1), 0 16px 32px 0 rgba(0, 0, 0, 0.1);
    visibility: hidden;
    transform: scale(0, 0);
    transform-origin: right top;
  }
  .l_side .toc-wrapper .rightBtn {
    display: none;
  }
  .l_side .toc-wrapper.active {
    visibility: visible;
    transform: scale(1, 1);
  }
}
.l_side .toc-wrapper a {
  padding-left: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  display: inline-block;
}
.l_side .toc-wrapper ol .toc-item.toc-level-1 .toc-child a {
  padding-left: 16px;
  font-weight: normal;
}
.l_side .toc-wrapper ol .toc-item.toc-level-2 .toc-child a {
  padding-left: 32px;
  font-weight: normal;
}
.l_side .toc-wrapper ol .toc-item.toc-level-3 .toc-child a {
  padding-left: 48px;
  font-weight: normal;
}
.l_side .toc-wrapper ol .toc-item.toc-level-4 .toc-child a {
  padding-left: 64px;
  font-weight: normal;
}
.l_side .toc-wrapper ol li {
  width: auto;
  text-align: left;
}
.l_side .toc-wrapper ol li a {
  padding: 0 10px 0 15px;
  font-weight: bold;
  width: 100%;
}
.l_side .toc-wrapper:empty {
  display: none;
}
.l_side section {
  z-index: 0;
  margin-top: 20px;
  font-size: 16px;
  border-radius: 8px;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  width: 285px;
  max-height: calc(100% - 54px - 4 * 20px);
}
.l_side section:first-child {
  margin-top: 0;
}
.l_side section:hover {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1),
    0 8px 16px 0 rgba(0, 0, 0, 0.1), 0 16px 32px 0 rgba(0, 0, 0, 0.1);
}
.l_side section:active {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
@media (max-width: 1024px) {
  .l_side section {
    width: 240px;
  }
}
@media (max-width: 768px) {
  .l_side section {
    width: 100%;
  }
}
@media (max-width: 580px) {
  .l_side section {
    width: calc(100% - 2 * 20px);
    margin: 20px 20px 0 20px;
  }
}
.l_side section header {
  display: flex;
  justify-content: space-between;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background-color: #4c495d;
  color: #fff;
  font-weight: bold;
  line-height: 1.5em;
  padding: 8px 20px;
}
.l_side section header .rightBtn {
  color: #88ffff;
}
.l_side section header .rightBtn:hover {
  color: #08ffff;
}
.l_side section header .rightBtn:hover.rotate90 {
  transform: rotate(90deg);
}
.l_side section header.pure {
  background-color: #090c0e;
  color: #222326;
  padding-top: 14px;
  padding-bottom: 14px;
}
.l_side section header.pure .rightBtn {
  color: #222326;
}
.l_side section header.pure .rightBtn:hover {
  color: #08ffff;
}
.l_side section .content {
  text-align: justify;
  padding: 10px;
  max-height: calc(100% - 54px - 12.5 * 20px);
}
.l_side section .content ul > li a {
  color: rgba(255, 255, 255, 0.8);
  padding: 0 20px;
  line-height: 36px;
  display: flex;
  justify-content: space-between;
  align-content: center;
  border-left: 2px solid transparent;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
}
.l_side section .content ul > li a .name {
  flex: auto;
  color: rgba(255, 255, 255, 0.8);
}
.l_side section .content ul > li a .badge {
  flex: none;
  font-weight: normal;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}
.l_side section .content ul > li a:hover {
  border-left: 4px solid #222326;
  background: rgba(34, 35, 38, 0.1);
}
.l_side section .content ul > li a:active {
  border-left: 8px solid #222326;
}
.l_side section .content ul > li a.child {
  padding-left: 40px;
}
.l_side section.author {
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
}
.l_side section.author .content {
  padding: 0;
}
.l_side section.author .content div.avatar {
  display: flex;
  justify-content: center;
}
.l_side section.author .content img {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  width: 285px;
  height: 285px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
@media (max-width: 1024px) {
  .l_side section.author .content img {
    width: 240px;
    height: 240px;
  }
}
@media (max-width: 768px) {
  .l_side section.author .content img {
    width: 96px;
    height: 96px;
    border-radius: 100%;
    margin-top: 10px;
    padding: 10px;
  }
}
.l_side section.author .content h2 {
  text-align: center;
  font-weight: bold;
  margin: 10px;
}
@media (max-width: 768px) {
  .l_side section.author .content h2 {
    margin: 10px;
  }
}
.l_side section.author .content p {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin: 10px 10px 0 10px;
  empty-cells: hide;
}
.l_side section.author .content .social-wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 4px 10px;
}
.l_side section.author .content .social-wrapper a {
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
}
.l_side section.author .content .social-wrapper a:hover {
  color: #88ffff;
  text-decoration: none;
}
.l_side section.author .content .social-wrapper a.social {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  margin: auto;
  border-radius: 100px;
}
.l_side section.author .content .social-wrapper a.social:hover {
  background: rgba(136, 255, 255, 0.1);
  color: #88ffff;
}
@media (max-width: 768px) {
  .l_side section.author .content .social-wrapper {
    justify-content: center;
  }
}
@media (max-width: 768px) {
  .l_side section.author {
    box-shadow: none;
    margin-top: 40px;
  }
}
.l_side section.plain .content {
  font-size: 14px;
  font-weight: bold;
  word-break: break-all;
  padding: 10px 20px;
  line-height: 22px;
}
.l_side section.plain .content.pure {
  padding: 0 20px 20px 20px;
}
.l_side section.plain .content a {
  color: #88ffff;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
}
.l_side section.plain .content a:hover {
  color: #88ffff;
  text-decoration: underline;
}
.l_side section.plain .content a:active {
  color: #08ffff;
}
.l_side section.list .content {
  padding: 10px 0;
}
.l_side section.list .content.pure {
  padding-top: 0;
}
.l_side section.list .content a {
  font-size: 14px;
  font-weight: bold;
}
.l_side section.list .content a:hover {
  text-decoration: none;
}
.l_side section.list .content a i {
  color: rgba(255, 255, 255, 0.7);
  line-height: 36px;
  margin-right: 3px;
}
.l_side section.list .content a img {
  display: inline;
  vertical-align: middle;
  height: 18px;
  width: 18px;
  margin-bottom: 4px;
}
.l_side section.list .content a img#round {
  border-radius: 100%;
}
.l_side section.category .content {
  padding: 10px 0;
  font-size: 14px;
  font-weight: bold;
}
.l_side section.category .content.pure {
  padding-top: 0;
}
.l_side section.tagcloud .content {
  text-align: justify;
  padding: 10px 20px;
}
.l_side section.tagcloud .content.pure {
  padding: 0 20px 20px 20px;
}
.l_side section.tagcloud .content a {
  display: inline-block;
  transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -webkit-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  line-height: 1.6em;
}
.l_side section.tagcloud .content a:hover {
  color: #88ffff !important;
  text-decoration: underline;
}
.l_side section.music header.pure {
  padding-bottom: 5px;
}
.l_side section.music .content {
  padding: 14px;
  padding-top: 10px;
}
.l_side section.music .content.pure {
  padding-top: 5px;
}
.l_side section.music .content .aplayer {
  border-radius: 4px;
  color: #666;
}
.l_side section.related_posts .content {
  padding: 10px 0;
  font-size: 14px;
  font-weight: bold;
}
.l_side section.related_posts .content.pure {
  padding-top: 0;
}
.l_side section.related_posts .content h3 {
  font-size: 14px;
  font-weight: bold;
  margin: 0;
}
.l_side section.related_posts .content h3 a {
  line-height: inherit;
  padding-top: 4px;
  padding-bottom: 4px;
}
#archive-page {
  margin-bottom: 40px;
}
#archive-page .archive {
  position: relative;
}
#archive-page .archive .archive-year {
  font-size: 16px;
  margin-top: 4em;
  margin-bottom: 1em;
}
#archive-page .archive .archive-year:first-child {
  margin-top: 0em;
  padding-top: 0;
}
#archive-page .archive .archive-year h2 {
  margin-top: 1em;
}
#archive-page .archive .archive-year a {
  color: #ffffff;
  text-decoration: none;
}
#archive-page .archive .archive-post a {
  width: 100%;
  display: inline-flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
}
#archive-page .archive .archive-post a.child {
  padding-left: 40px;
}
#archive-page .archive .archive-post time {
  color: #ffffff;
  flex: none;
  font-size: 14px;
  padding: 0.5em 0.5em 0.5em 3em;
}
@media (max-width: 580px) {
  #archive-page .archive .archive-post time {
    padding: 0.5em 0.5em 0.5em 0;
  }
}
#archive-page .archive .archive-post .title {
  flex: auto;
  padding: 0.5em;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}
#archive-page .archive .archive-post .title i.music {
  color: #222326;
}
.article {
  color: #ffffff;
  font-size: 16px;
  line-height: 1.7;
  word-break: normal;
  word-wrap: normal;
}
.article img {
  position: relative;
  margin: 0 auto;
  background: white;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
}
@media (max-width: 580px) {
  .article img {
    box-shadow: none;
  }
}
.article span img {
  display: inline;
  margin: auto;
}
.article p.small-img img,
.article div.small-img img {
  width: auto;
  max-width: 100%;
  margin: 0;
  box-shadow: none;
}
.article p {
  margin-top: 0.5em;
  margin-bottom: 1em;
  text-align: justify;
  max-width: 100%;
  overflow: auto;
}
.article p strong {
  color: #ffffff;
  padding-left: 2px;
  padding-right: 2px;
}
.article p .mjx-math {
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
  border-radius: 4px;
}
.article ul,
.article ol {
  font-size: 15.2px;
  list-style: initial;
  padding-left: 10px;
  margin-left: 10px;
  margin-bottom: 1em;
}
.article ul > li {
  list-style: initial;
}
.article ol > li {
  margin-left: 10px;
  list-style: decimal;
}
.article a {
  color: #88ffff;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
}
.article a:before {
  display: none;
}
.article a:hover {
  color: #88ffff;
  text-decoration: underline;
}
.article a:active {
  color: #08ffff;
}
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
  position: relative;
  font-weight: normal;
  margin-top: 1.5em;
  margin-bottom: 1em;
}
.article h1.title,
.article h2.title,
.article h3.title,
.article h4.title,
.article h5.title,
.article h6.title {
  left: 0;
}
.article h1.title:before,
.article h2.title:before,
.article h3.title:before,
.article h4.title:before,
.article h5.title:before,
.article h6.title:before {
  content: none;
}
.article h1,
.article h2 {
  font-weight: 600;
  margin-top: 2em;
}
.article h3:first-child,
.article h4:first-child,
.article h5:first-child,
.article h6:first-child {
  margin-top: 0;
  padding-top: 0;
}
.article h1 {
  font-size: 24px;
}
.article h2 {
  font-size: 22.4px;
  text-align: left;
}
.article h3 {
  font-size: 19.2px;
  color: #ccc;
  text-align: left;
}
.article h4 {
  font-weight: bold;
  font-size: 17.6px;
}
.article h5 {
  font-weight: bold;
  color: #ffffff;
  font-size: 16px;
}
.article h6 {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
}
.article .subtitle h6 {
  color: rgba(255, 255, 255, 0.9);
}
.article figure figcaption span {
  display: inline-block;
  margin-right: 5px;
}
.article blockquote {
  position: relative;
  width: 100%;
  font-size: 14px;
  background: rgba(34, 35, 38, 0.1);
  margin: 1em 0;
  padding: 20px;
  border-left: 4px solid #222326;
  border-radius: 4px;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
}
.article blockquote p {
  text-align: left;
  word-wrap: normal;
  margin: 0;
  font-size: 14px;
  line-height: 21px;
}
.article blockquote footer strong {
  margin-right: 7px;
}
.article blockquote.pullquote.right {
  border-left: none;
  border-right: 4px solid #222326;
}
.article blockquote.pullquote.right p {
  text-align: right;
}
.article pre {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #ffffff;
}
.article code {
  padding: 3px 3px 0px 3px;
  margin: 0px 2px;
  vertical-align: center;
  border-radius: 2px;
  border: 1px solid rgba(34, 35, 38, 0.5);
  font-size: 12.8px;
  color: #fc3469;
  background: rgba(34, 35, 38, 0.1);
}
@media (max-width: 580px) {
  .article code {
    font-size: 12.16px;
  }
}
.article .readmore {
  font-size: 0.8em;
  letter-spacing: 0.1em;
  margin-top: 20px;
}
.article .readmore a {
  text-decoration: none;
  border: 3px solid cyan;

  display: inline-block;
  vertical-align: middle;
  line-height: 2rem;
  font-weight: bold;
  background-color: #222326;
  padding: 0.2em 2.4em;
  color: white;
  border-radius: 4px;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
}
.article .readmore a:hover {
  background: #0a0a0b;
}
.article .tags {
  position: relative;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 14px;
  line-height: 1.7;
  margin-top: 20px;
  background: rgba(0, 0, 0, 0.5);
  word-spacing: 10px;
}
.article .tags a {
  color: #ffffff;
  position: relative;
  display: inline-block;
  word-spacing: 0;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
}
.article .tags a:hover {
  color: #88ffff;
  background: transparent;
  text-decoration: none;
}
.article table:not(".highlight table") {
  width: 100%;
}
.article table:not(".highlight table") td,
.article table:not(".highlight table") th {
  padding: 12px 24px;
}
@media (max-width: 580px) {
  .article ul,
  .article ol {
    font-size: 15.2px;
  }
  .article figure {
    font-size: 13px;
    line-height: 1.6em;
  }
}
.article .prev-next {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-content: flex-start;
}
.article .prev-next section {
  width: 100%;
  padding: 10px;
  color: rgba(255, 255, 255, 0.7);
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
}
.article .prev-next section p {
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}
.article .prev-next section h4 {
  margin-top: 10px;
  margin-bottom: 10px;
  position: relative;
  font-weight: bold;
  font-size: 16px;
}
@media (max-width: 580px) {
  .article .prev-next section h4 {
    letter-spacing: -1px;
  }
}
.article .prev-next section h6 {
  margin: 0;
  word-spacing: normal;
}
.article .prev-next section .tags {
  background: transparent;
  padding: 0;
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 12.6px;
  word-spacing: 4px;
}
.article .prev-next section:first-child {
  margin-left: 0;
  margin-right: 0;
}
.article .prev-next .prev {
  text-align: left;
  margin-left: 0;
  margin-right: 10px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.article .prev-next .next {
  text-align: right;
  margin-left: 10px;
  margin-right: 0;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.highlight {
  position: relative;
  width: 100%;
  margin-top: 1em;
  margin-bottom: 1.2em;
  overflow: auto;
  display: block;
  background: #262626;
  font-size: 13.3px;
  line-height: 1.7;
  border-radius: 4px;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
}
.highlight figcaption {
  padding: 5px 10px;
  background-color: #1e1e1e;
}
.highlight table td,
.highlight table th {
  padding: 0;
}
.highlight .gutter {
  width: 24px;
  padding: 0 12px;
  text-align: right;
  border-width: 0;
  margin-left: 0;
  background-color: #1e1e1e;
}
.highlight .gutter pre {
  color: rgba(255, 255, 255, 0.8);
}
.highlight .code {
  padding: 20px;
  vertical-align: top;
  border: 0 solid #000;
}
.highlight .code:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 11.2px;
  padding: 4px 8px 0;
  line-height: 1.7;
}
.highlight.html .code:before {
  content: "HTML";
}
.highlight.js .code:before {
  content: "JS";
}
.highlight.bash .code:before {
  content: "BASH";
}
.highlight.shell .code:before {
  content: "SHELL";
}
.highlight.css .code:before {
  content: "CSS";
}
.highlight.less .code:before {
  content: "LESS";
}
.highlight.swift .code:before {
  content: "SWIFT";
}
.highlight.objc .code:before {
  content: "OBJECTIVE-C";
}
.highlight.c .code:before {
  content: "C";
}
.highlight.java .code:before {
  content: "JAVA";
}
.highlight.python .code:before {
  content: "PYTHON";
}
.highlight.plain .code:before {
  content: "";
}
.highlight::-webkit-scrollbar {
  height: 4px;
  width: 4px;
}
.highlight::-webkit-scrollbar-track-piece {
  background: transparent;
}
.highlight::-webkit-scrollbar-thumb {
  background: #191919;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
}
.highlight::-webkit-scrollbar-thumb:hover {
  background: #070707;
}
@media (max-width: 580px) {
  .article .highlight {
    font-size: 12.635px;
  }
}
.art-item-footer {
  height: 40px;
  line-height: 1.7;
  font-size: 14px;
}
.art-item-footer .art-item-left,
.art-item-footer .art-item-right {
  width: 50%;
  height: 40px;
  line-height: 40px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.art-item-footer .art-item-left {
  float: left;
  text-align: left;
}
.art-item-footer .art-item-right {
  float: right;
  text-align: right;
}
@media (max-width: 580px) {
  .art-item-footer {
    font-size: 12.635px;
  }
}
pre .marked {
  background-color: rgba(255, 189, 43, 0.2);
  border-radius: 2px;
  border: 1px solid rgba(255, 189, 43, 0.4);
}
pre .comment,
pre .title {
  color: rgba(255, 255, 255, 0.6);
}
pre .keyword,
pre .javascript .function,
pre .attr {
  color: #9c27b0;
}
pre .type,
pre .built_in,
pre .tag .name {
  color: #e96900;
}
pre .variable,
pre .attribute,
pre .regexp,
pre .ruby .constant,
pre .xml .tag .title,
pre .xml .pi,
pre .xml .doctype,
pre .html .doctype,
pre .css .id,
pre .css .class,
pre .css .pseudo {
  color: #fd8607;
}
pre .number,
pre .preprocessor,
pre .literal,
pre .params,
pre .constant {
  color: #fd8607;
}
pre .class,
pre .ruby .class .title,
pre .css .rules .attribute {
  color: #ffcc66;
}
pre .string,
pre .value,
pre .inheritance,
pre .header,
pre .ruby .symbol,
pre .xml .cdata {
  color: #4caf50;
}
pre .css .hexcolor {
  color: #66cccc;
}
pre .function,
pre .python .decorator,
pre .python .title,
pre .ruby .function .title,
pre .ruby .title .keyword,
pre .perl .sub,
pre .javascript .title,
pre .coffeescript .title {
  color: #6699cc;
}
.html .tag .name {
  color: #ee2b29;
}
#page-nav {
  position: relative;
  width: 100%;
  padding: 20px 0px;
}
#page-nav .page-number,
#page-nav .space {
  display: none;
}
#page-nav .next,
#page-nav .prev {
  font-size: 0.8125em;
  font-weight: normal;
  color: #aaa;
  border-radius: 2px;
}
#page-nav .next:hover,
#page-nav .prev:hover {
  color: #444444;
}
#page-nav .next span,
#page-nav .prev span {
  line-height: 20px;
  vertical-align: middle;
}
#page-nav .next span.icon,
#page-nav .prev span.icon {
  position: relative;
  top: 1px;
}
#page-nav .next {
  float: right;
  padding: 0 7px 2px 10px;
}
#page-nav .prev {
  float: left;
  padding: 0 10px 2px 7px;
}
#u-search {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 60px 20px;
  z-index: 999999;
}
@media (max-width: 680px) {
  #u-search {
    padding: 0px;
  }
}
#u-search .modal {
  position: fixed;
  height: 80%;
  width: 100%;
  max-width: 640px;
  left: 50%;
  top: 0;
  margin: 64px 0 0 -320px;
  background: #fff;
  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);
  z-index: 3;
  border-radius: 8px;
}
@media (max-width: 680px) {
  #u-search .modal {
    box-shadow: none;
    max-width: none;
    top: 0;
    left: 0;
    margin: 0;
    height: 100%;
    border-radius: 0;
  }
}
#u-search .modal .modal-ajax-content {
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
}
#u-search .modal .modal-ajax-content.loaded {
  opacity: 1;
  visibility: visible;
}
#u-search .modal .modal-header {
  position: relative;
  width: 100%;
  height: 54px;
  background-color: #353535;
  z-index: 3;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
}
@media (max-width: 680px) {
  #u-search .modal .modal-header {
    padding: 0px;
    border-radius: 0;
  }
}
#u-search .modal .modal-header .btn-close {
  display: block;
  position: absolute;
  width: 55px;
  height: 54px;
  top: 0;
  right: 0;
  color: #88ffff;
  cursor: pointer;
  text-align: center;
  line-height: 54px;
  vertical-align: middle;
  font-size: 1.3em;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  z-index: 2;
}
#u-search .modal .modal-header .btn-close:hover {
  transform: rotate(90deg);
}
#u-search .modal .modal-header .modal-loading {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: transparent;
  z-index: 1;
}
#u-search .modal .modal-header .modal-loading .modal-loading-bar {
  display: block;
  position: relative;
  width: 0%;
  height: 100%;
  background: #fff;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
}
#u-search .modal .modal-header #u-search-modal-form {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
}
#u-search .modal .modal-header #u-search-modal-form #u-search-modal-input {
  width: 100%;
  padding: 0px 50px;
  height: 54px;
  font-size: 16px;
  line-height: 1.7;
  vertical-align: middle;
  color: #88ffff;
  border: none;
  background: transparent;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  font-weight: thin;
  appearance: none;
  box-shadow: none;
}
#u-search
  .modal
  .modal-header
  #u-search-modal-form
  #u-search-modal-input:focus {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
#u-search .modal .modal-header #u-search-modal-btn-submit {
  position: absolute;
  top: 0;
  left: 0;
  padding-left: 5px;
  padding-top: 2px;
  background: transparent;
  border: none;
  width: 50px;
  height: 54px;
  vertical-align: middle;
  font-size: 1.3em;
  color: #88ffff;
  z-index: 2;
}
#u-search .modal .modal-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  padding: 0px 15px;
  background: #fff;
  border-top: 1px solid #ddd;
}
#u-search .modal .modal-footer .logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 0;
}
#u-search .modal .modal-footer .logo a {
  display: inline-block;
}
#u-search .modal .modal-footer .logo.google img {
  height: 24px;
  margin-top: 13px;
}
#u-search .modal .modal-footer .logo.baidu img {
  height: 22px;
  margin-top: 14px;
}
#u-search .modal .modal-footer .logo img {
  position: relative;
  display: inline-block;
  width: auto;
  height: 18px;
  margin-top: 16px;
}
#u-search .modal .modal-footer .modal-error {
  position: relative;
  float: left;
  vertical-align: middle;
  line-height: 50px;
  font-size: 13px;
  z-index: 1;
}
#u-search .modal .modal-footer .modal-metadata {
  position: relative;
  float: left;
  vertical-align: middle;
  line-height: 50px;
  font-size: 13px;
  z-index: 1;
}
#u-search .modal .modal-footer .nav {
  position: relative;
  display: block;
  float: right;
  vertical-align: middle;
  font-size: 13px;
  font-weight: 500;
  line-height: 50px;
  color: #828282;
  cursor: pointer;
  z-index: 1;
}
#u-search .modal .modal-footer .nav:hover {
  color: #444444;
}
#u-search .modal .modal-footer .nav.btn-next {
  margin-left: 10px;
}
#u-search .modal .modal-footer .nav .icon {
  font-size: 12px;
}
#u-search .modal .modal-body {
  background-color: #090c0e;
  position: absolute;
  padding: 64px 50px 80px 50px;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 680px) {
  #u-search .modal .modal-body {
    padding: 60px 20px 80px 20px;
  }
}
#u-search .modal .modal-body .modal-results {
  list-style: none;
}
#u-search .modal .modal-body .modal-results li {
  border-bottom: 1px solid #e6e8ea;
}
#u-search .modal .modal-body .modal-results li:last-child {
  border-bottom: none;
}
#u-search .modal .modal-body .modal-results .result {
  position: relative;
  display: block;
  padding: 15px 30px 15px 0px;
  text-decoration: none;
}
#u-search .modal .modal-body .modal-results .result:hover .title {
  color: #88ffff;
}
#u-search .modal .modal-body .modal-results .result .title {
  display: inline-block;
  max-width: 100%;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 1px;
  margin-bottom: 2px;
  line-height: 1.7;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}
#u-search .modal .modal-body .modal-results .result .digest {
  display: block;
  white-space: pre-wrap;
  overflow: scroll;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 1.7;
  color: #fff;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
}
#u-search .modal .modal-body .modal-results .result .icon {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -4px;
  font-size: 11px;
  color: #828282;
}
#u-search .modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
}
#footer {
  position: relative;
  padding: 40px 10px 120px 10px;
  width: 100%;
  color: rgba(255, 255, 255, 0.5);
  margin: 0px auto;
  font-size: 14px;
  overflow: hidden;
  text-align: center;
}
#footer .licenses {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: underline;
}
#footer .codename {
  text-decoration: underline;
}
#footer .social-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
#footer a {
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
}
#footer a:hover {
  color: #88ffff;
}
#footer a.social {
  position: relative;
  display: inline-block;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  margin: 4px;
  border-radius: 100px;
}
#footer a.social:hover {
  background: rgba(34, 35, 38, 0.1);
  color: #222326;
}
.article.typo.l_friends .friends-group h2 {
  font-size: 19.2px;
}
.article.typo.l_friends .friends-group .friend-content {
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
  border-radius: 8px;
}
.article.typo.l_friends .friends-group .friend-content .friend-card {
  display: flex;
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1),
    0 4px 8px 0 rgba(0, 0, 0, 0.1);
  background: #eee;
  margin: 10px;
  color: rgba(255, 255, 255, 0.8);
  justify-content: flex-start;
  align-content: flex-start;
  flex-direction: column;
  width: calc(100% / 3 - 20px);
}
@media (max-width: 1024px) {
  .article.typo.l_friends .friends-group .friend-content .friend-card {
    width: calc(100% / 3 - 20px);
  }
}
@media (max-width: 768px) {
  .article.typo.l_friends .friends-group .friend-content .friend-card {
    width: calc(100% / 2 - 20px);
  }
}
@media (max-width: 580px) {
  .article.typo.l_friends .friends-group .friend-content .friend-card {
    width: 100%;
    margin: 0 5px;
    border-radius: 0;
    flex-direction: row;
  }
  .article.typo.l_friends
    .friends-group
    .friend-content
    .friend-card:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  .article.typo.l_friends
    .friends-group
    .friend-content
    .friend-card:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }
}
.article.typo.l_friends .friends-group .friend-content .friend-card:hover {
  text-decoration: none;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1),
    0 8px 16px 0 rgba(0, 0, 0, 0.1), 0 16px 32px 0 rgba(0, 0, 0, 0.1),
    0 32px 64px 0 rgba(0, 0, 0, 0.1);
  transform: scale(1.05);
  border-radius: 8px;
}
@media (max-width: 580px) {
  .article.typo.l_friends .friends-group .friend-content .friend-card:hover {
    transform: scale(1.02);
    margin: 10px 0;
  }
}
.article.typo.l_friends
  .friends-group
  .friend-content
  .friend-card:hover
  .friend-left
  .avatar {
  transform: scale(1.1) rotate(12deg);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1),
    0 8px 16px 0 rgba(0, 0, 0, 0.1), 0 16px 32px 0 rgba(0, 0, 0, 0.1);
}
.article.typo.l_friends
  .friends-group
  .friend-content
  .friend-card
  .friend-left {
  align-self: center;
}
.article.typo.l_friends
  .friends-group
  .friend-content
  .friend-card
  .friend-left
  .avatar {
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
  margin: 20px 10px 10px 10px;
  border-radius: 100%;
  border: 1px solid white;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
@media (max-width: 580px) {
  .article.typo.l_friends
    .friends-group
    .friend-content
    .friend-card
    .friend-left
    .avatar {
    margin: 20px;
  }
}
.article.typo.l_friends
  .friends-group
  .friend-content
  .friend-card
  .friend-right {
  flex: 1;
  margin: 0 10px 10px 10px;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.article.typo.l_friends
  .friends-group
  .friend-content
  .friend-card
  .friend-right
  p {
  text-align: center;
}
@media (max-width: 580px) {
  .article.typo.l_friends
    .friends-group
    .friend-content
    .friend-card
    .friend-right {
    margin: 20px 20px 20px 0;
    text-align: left;
  }
  .article.typo.l_friends
    .friends-group
    .friend-content
    .friend-card
    .friend-right
    p {
    text-align: left;
  }
}
.article.typo.l_friends
  .friends-group
  .friend-content
  .friend-card
  .friend-right
  .friend-tags-wrapper {
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  margin-left: -2px;
  word-break: break-all;
  margin-bottom: 10px;
}
@media (max-width: 580px) {
  .article.typo.l_friends
    .friends-group
    .friend-content
    .friend-card
    .friend-right
    .friend-tags-wrapper {
    margin-bottom: 0;
  }
}
.article.typo.l_friends
  .friends-group
  .friend-content
  .friend-card
  .friend-right
  p {
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.article.typo.l_friends
  .friends-group
  .friend-content
  .friend-card
  .friend-right
  p.friend-name {
  font-size: 16px;
  font-weight: bold;
  padding-top: 4px;
}
.article.typo.l_friends
  .friends-group
  .friend-content
  .friend-card
  .friend-right
  p.tags {
  font-size: 11.9px;
  display: inline;
  background: none;
  word-wrap: break-word;
  padding-right: 4px;
}