@charset "UTF-8";
/* Background */
.bg {
  color: #abb2bf;
  background-color: #282c34; }

/* PreWrapper */
.chroma {
  color: #abb2bf;
  background-color: #282c34; }

/* Other */
/* Error */
/* CodeLine */
/* LineLink */
.chroma .lnlinks {
  outline: none;
  text-decoration: none;
  color: inherit; }

/* LineTableTD */
.chroma .lntd {
  vertical-align: top;
  padding: 0;
  margin: 0;
  border: 0; }

/* LineTable */
.chroma .lntable {
  border-spacing: 0;
  padding: 0;
  margin: 0;
  border: 0; }

/* LineHighlight */
.chroma .hl {
  background-color: #3d4148; }

/* LineNumbersTable */
.chroma .lnt {
  white-space: pre;
  -webkit-user-select: none;
  user-select: none;
  margin-right: 0.4em;
  padding: 0 0.4em 0 0.4em;
  color: #55595f; }

/* LineNumbers */
.chroma .ln {
  white-space: pre;
  -webkit-user-select: none;
  user-select: none;
  margin-right: 0.4em;
  padding: 0 0.4em 0 0.4em;
  color: #55595f; }

/* Line */
.chroma .line {
  display: flex; }

/* Keyword */
.chroma .k {
  color: #c678dd; }

/* KeywordConstant */
.chroma .kc {
  color: #e5c07b; }

/* KeywordDeclaration */
.chroma .kd {
  color: #c678dd; }

/* KeywordNamespace */
.chroma .kn {
  color: #c678dd; }

/* KeywordPseudo */
.chroma .kp {
  color: #c678dd; }

/* KeywordReserved */
.chroma .kr {
  color: #c678dd; }

/* KeywordType */
.chroma .kt {
  color: #e5c07b; }

/* Name */
.chroma .n {
  color: #e06c75; }

/* NameAttribute */
.chroma .na {
  color: #e06c75; }

/* NameBuiltin */
.chroma .nb {
  color: #e5c07b; }

/* NameBuiltinPseudo */
.chroma .bp {
  color: #e06c75; }

/* NameClass */
.chroma .nc {
  color: #e5c07b; }

/* NameConstant */
.chroma .no {
  color: #e06c75; }

/* NameDecorator */
.chroma .nd {
  color: #61afef; }

/* NameEntity */
.chroma .ni {
  color: #e06c75; }

/* NameException */
.chroma .ne {
  color: #e06c75; }

/* NameFunction */
.chroma .nf {
  color: #61afef;
  font-weight: bold; }

/* NameFunctionMagic */
.chroma .fm {
  color: #56b6c2;
  font-weight: bold; }

/* NameLabel */
.chroma .nl {
  color: #e06c75; }

/* NameNamespace */
.chroma .nn {
  color: #e06c75; }

/* NameOther */
.chroma .nx {
  color: #e06c75; }

/* NameProperty */
.chroma .py {
  color: #e06c75; }

/* NameTag */
.chroma .nt {
  color: #e06c75; }

/* NameVariable */
.chroma .nv {
  color: #e06c75; }

/* NameVariableClass */
.chroma .vc {
  color: #e06c75; }

/* NameVariableGlobal */
.chroma .vg {
  color: #e06c75; }

/* NameVariableInstance */
.chroma .vi {
  color: #e06c75; }

/* NameVariableMagic */
.chroma .vm {
  color: #e06c75; }

/* Literal */
/* LiteralDate */
/* LiteralString */
.chroma .s {
  color: #98c379; }

/* LiteralStringAffix */
.chroma .sa {
  color: #98c379; }

/* LiteralStringBacktick */
.chroma .sb {
  color: #98c379; }

/* LiteralStringChar */
.chroma .sc {
  color: #98c379; }

/* LiteralStringDelimiter */
.chroma .dl {
  color: #98c379; }

/* LiteralStringDoc */
.chroma .sd {
  color: #98c379; }

/* LiteralStringDouble */
.chroma .s2 {
  color: #98c379; }

/* LiteralStringEscape */
.chroma .se {
  color: #98c379; }

/* LiteralStringHeredoc */
.chroma .sh {
  color: #98c379; }

/* LiteralStringInterpol */
.chroma .si {
  color: #98c379; }

/* LiteralStringOther */
.chroma .sx {
  color: #98c379; }

/* LiteralStringRegex */
.chroma .sr {
  color: #98c379; }

/* LiteralStringSingle */
.chroma .s1 {
  color: #98c379; }

/* LiteralStringSymbol */
.chroma .ss {
  color: #98c379; }

/* LiteralNumber */
.chroma .m {
  color: #d19a66; }

/* LiteralNumberBin */
.chroma .mb {
  color: #d19a66; }

/* LiteralNumberFloat */
.chroma .mf {
  color: #d19a66; }

/* LiteralNumberHex */
.chroma .mh {
  color: #d19a66; }

/* LiteralNumberInteger */
.chroma .mi {
  color: #d19a66; }

/* LiteralNumberIntegerLong */
.chroma .il {
  color: #d19a66; }

/* LiteralNumberOct */
.chroma .mo {
  color: #d19a66; }

/* Operator */
.chroma .o {
  color: #56b6c2; }

/* OperatorWord */
.chroma .ow {
  color: #56b6c2; }

/* Punctuation */
/* Comment */
.chroma .c {
  color: #7f848e; }

/* CommentHashbang */
.chroma .ch {
  color: #7f848e; }

/* CommentMultiline */
.chroma .cm {
  color: #7f848e; }

/* CommentSingle */
.chroma .c1 {
  color: #7f848e; }

/* CommentSpecial */
.chroma .cs {
  color: #7f848e; }

/* CommentPreproc */
.chroma .cp {
  color: #7f848e; }

/* CommentPreprocFile */
.chroma .cpf {
  color: #7f848e; }

/* Generic */
/* GenericDeleted */
.chroma .gd {
  color: #e06c75; }

/* GenericEmph */
/* GenericError */
/* GenericHeading */
/* GenericInserted */
.chroma .gi {
  color: #98c379;
  font-weight: bold; }

/* GenericOutput */
/* GenericPrompt */
/* GenericStrong */
/* GenericSubheading */
/* GenericTraceback */
/* GenericUnderline */
/* TextWhitespace */
/* Idea from coder-coder that the main scss file should be called boilerplate.scss
 https://coder-coder.com/organizing-your-css/

 Path: assets/scss/boilerplate.scss
 Compare this snippet from assets/scss/utils/_index.scss:
 /*!
*/
/*
  This theme is based on Hugo-Coder by Luiz DeMilon, which is a pretty barebones theme making
  it a great starting point for a theme. I've added some of my own styles to help make it a bit
  more complete.
*/
*,
*:before,
*:after {
  box-sizing: inherit; }

html {
  box-sizing: border-box;
  font-size: 1rem;
  scrollbar-width: none; }

/*
  The body is the main container for the page and should only contain some basic styles.
*/
body {
  color: #e6e6e6;
  background-color: #414141;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, "游ゴシック", "PingFang SC", STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑", SimSun, "宋体", Heiti, "黑体", sans-serif;
  font-weight: 400;
  line-height: 1.25rem;
  overflow: auto !important;
  margin: 0; }
  @media (max-width: 60rem) {
    body {
      font-size: 0.875rem;
      line-height: 1.125rem; } }
iframe[src*="disqus"] {
  color-scheme: light; }

/*
  The wrapper is where all the content of the page should go. It should be centered on the page
  and have a max-width of 920px or 67% of the page: whichever is greater.
*/
.wrapper {
  max-width: 67.5rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #323232; }
  .wrapper .container {
    flex: auto;
    margin: 4.15625rem 1.5rem 0rem 1.5rem; }

#nav {
  position: fixed;
  line-height: 2.5rem;
  top: 0;
  z-index: 10;
  width: 100%;
  max-width: 67.5rem;
  background-color: #323232;
  border-bottom: solid 0.25rem #644bc8; }
  #nav .nav-title {
    letter-spacing: 0.125rem;
    text-transform: uppercase;
    font-family: "K2D";
    font-weight: 800;
    color: #e6e6e6;
    margin-left: 1rem; }
    #nav .nav-title:hover, #nav .nav-title:focus {
      text-decoration: none;
      text-shadow: none; }
  #nav .nav-list {
    float: right;
    list-style: none;
    margin-bottom: 0;
    margin-top: 0; }
    @media (max-width: 60rem) {
      #nav .nav-list {
        position: relative;
        top: 0.375rem;
        right: 0;
        z-index: 5;
        visibility: hidden;
        opacity: 0;
        padding: 0;
        width: 100%;
        background-color: #414141;
        border-top: solid 0.125rem #323232;
        border-bottom: solid 0.125rem #323232;
        transition: opacity 0.25s, max-height 0.15s linear; } }
    #nav .nav-list .nav-item {
      float: left;
      margin: 0;
      position: relative;
      font-family: "K2D";
      font-weight: 600; }
      @media (max-width: 60rem) {
        #nav .nav-list .nav-item {
          float: none !important;
          text-align: center; }
          #nav .nav-list .nav-item a,
          #nav .nav-list .nav-item span {
            line-height: 3.5rem; } }
      #nav .nav-list .nav-item .nav-link {
        display: inline-block;
        border-radius: 0.25rem;
        font-size: 1rem;
        font-family: "K2D";
        font-weight: 600;
        color: #e6e6e6;
        margin-right: 1rem; }
        #nav .nav-list .nav-item .nav-link:hover, #nav .nav-list .nav-item .nav-link:focus, #nav .nav-list .nav-item .nav-link:active {
          color: #a032f0;
          text-decoration: none; }
        @media (max-width: 60rem) {
          #nav .nav-list .nav-item .nav-link {
            margin: 0; } }
    @media (max-width: 60rem) {
      #nav .nav-list .separator {
        display: none; } }
    @media (max-width: 60rem) {
      #nav .nav-list .menu-separator {
        border-top: 0.125rem solid #e6e6e6;
        margin: 0 6rem; }
        #nav .nav-list .menu-separator span {
          display: none; } }
  #nav #menu-toggle {
    display: none; }
    @media (max-width: 60rem) {
      #nav #menu-toggle {
        display: initial;
        position: relative;
        left: -99999px;
        opacity: 0; }
        #nav #menu-toggle:checked + label > i {
          color: #414141; }
        #nav #menu-toggle:checked + label + ul {
          visibility: visible;
          opacity: 50;
          width: 8rem;
          background-color: #414141;
          position: absolute;
          top: 2.5rem;
          transition: all; }
          #nav #menu-toggle:checked + label + ul .nav-link {
            color: #e6e6e6;
            transition: all 0.25s ease-in-out; }
            #nav #menu-toggle:checked + label + ul .nav-link:hover, #nav #menu-toggle:checked + label + ul .nav-link:focus, #nav #menu-toggle:checked + label + ul .nav-link:active {
              color: #a032f0;
              transform: scale(1.1); }
        #nav #menu-toggle:focus-visible + label {
          outline-style: auto; } }
  #nav .menu-button {
    display: none; }
    @media (max-width: 60rem) {
      #nav .menu-button {
        position: relative;
        display: block;
        font-size: 1.5rem;
        font-weight: 400; } }
    #nav .menu-button i:hover, #nav .menu-button i:focus {
      color: #e6e6e6; }
  #nav i {
    color: #e6e6e6;
    cursor: pointer; }
    #nav i:hover, #nav i:focus {
      color: #a032f0; }
  @media (max-width: 60rem) {
    #nav {
      height: 3.5rem; } }
#footer-text {
  width: 100%;
  text-align: center;
  font-size: 1rem;
  line-height: 2.5rem;
  margin: 0 auto;
  border-top: 0.25rem solid #644bc8;
  background-color: #323232; }
  #footer-text a:hover, #footer-text a:focus, #footer-text a:active {
    color: #a032f0;
    text-decoration: none; }

a {
  color: #a032f0;
  font-weight: 600;
  text-decoration: none;
  transition: display 0.25s ease-in-out; }
  a:focus, a:hover, a:active {
    color: #a032f0;
    text-shadow: 0 0 0.5rem #a032f0; }
  a:visited {
    color: #737373; }

i {
  width: 1rem;
  margin: 0 0.5rem; }

p {
  margin: 1.25rem 0;
  text-align: justify;
  justify-self: center;
  hyphens: auto; }
  @media (max-width: 60rem) {
    p {
      margin: 1rem 0; } }
u {
  text-decoration: underline;
  color: #919191;
  font-weight: 600; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, "游ゴシック", "PingFang SC", STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑", SimSun, "宋体", Heiti, "黑体", sans-serif;
  font-weight: 600;
  margin: 1.875rem 0 1.5rem 0; }
  @media (max-width: 60rem) {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin: 1.6875rem 0 1.3125rem 0; } }
  h1:hover .heading-link,
  h2:hover .heading-link,
  h3:hover .heading-link,
  h4:hover .heading-link,
  h5:hover .heading-link,
  h6:hover .heading-link {
    visibility: visible; }
  h1 .heading-link,
  h2 .heading-link,
  h3 .heading-link,
  h4 .heading-link,
  h5 .heading-link,
  h6 .heading-link {
    color: #a032f0;
    visibility: hidden;
    text-decoration: none;
    transition: all 0.25s ease-in; }
    h1 .heading-link:focus, h1 .heading-link:hover, h1 .heading-link:active,
    h2 .heading-link:focus,
    h2 .heading-link:hover,
    h2 .heading-link:active,
    h3 .heading-link:focus,
    h3 .heading-link:hover,
    h3 .heading-link:active,
    h4 .heading-link:focus,
    h4 .heading-link:hover,
    h4 .heading-link:active,
    h5 .heading-link:focus,
    h5 .heading-link:hover,
    h5 .heading-link:active,
    h6 .heading-link:focus,
    h6 .heading-link:hover,
    h6 .heading-link:active {
      text-decoration: none;
      transform: scale(1.05); }
  h1 .title-link,
  h2 .title-link,
  h3 .title-link,
  h4 .title-link,
  h5 .title-link,
  h6 .title-link {
    color: inherit;
    font-weight: inherit;
    text-decoration: none; }

h1 {
  font-size: 2.5rem;
  line-height: 2.25rem; }
  @media (max-width: 60rem) {
    h1 {
      font-size: 1.875rem;
      line-height: 2.125rem; } }
h2 {
  font-size: 2rem;
  line-height: 2rem; }
  @media (max-width: 60rem) {
    h2 {
      font-size: 1.625rem;
      line-height: 1.875rem; } }
h3 {
  font-size: 1.5rem;
  line-height: 1.75rem; }
  @media (max-width: 60rem) {
    h3 {
      font-size: 1.375rem;
      line-height: 1.625rem; } }
h4 {
  font-size: 1.25rem;
  line-height: 1.5rem; }
  @media (max-width: 60rem) {
    h4 {
      font-size: 1.125rem;
      line-height: 1.375rem; } }
h5 {
  font-size: 1.125rem;
  line-height: 1.375rem; }
  @media (max-width: 60rem) {
    h5 {
      font-size: 1rem;
      line-height: 1.25rem; } }
small {
  font-size: 0.75rem;
  line-height: 1rem;
  vertical-align: top; }

h6,
p {
  font-size: 1rem;
  line-height: 1.15; }

b,
strong {
  font-weight: 600; }

.fab {
  font-weight: 400; }

.fas {
  font-weight: 700; }

.float-right {
  float: right; }

.float-left {
  float: left; }

article {
  margin-bottom: 1.5rem; }
  article details summary {
    cursor: pointer; }
  @media (max-width: 60rem) {
    article {
      margin-top: 1rem; } }
.the-end {
  padding: 1.5rem 2rem; }
  .the-end hr {
    border: 0.125rem dashed #644bc8; }

figcaption p {
  text-align: center;
  font-style: italic;
  font-size: 1rem;
  margin: 0; }

h2 {
  color: #91af91;
  text-decoration: overline;
  margin: 3.25rem 0; }

h3,
h4 {
  font-style: oblique;
  margin: 2.625rem 0; }

.internal-link,
.external-link {
  color: #a032f0;
  font-weight: 600;
  transition: all 0.3s ease-in-out; }
  .internal-link:hover, .internal-link:focus,
  .external-link:hover,
  .external-link:focus {
    color: #a032f0;
    text-shadow: 0 0 0.25rem #a032f0; }

.chroma,
code {
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace; }

.highlight .chroma {
  margin: 0;
  padding: 0 1rem;
  border-radius: 0.5rem;
  font-weight: 400;
  overflow-x: auto;
  border-radius: 0.5rem;
  scrollbar-width: none; }
  .highlight .chroma code {
    background-color: transparent;
    color: inherit; }

code {
  border-radius: 0.25rem;
  padding: 0 0.3125rem;
  background-color: #414141;
  color: #c84b64; }

blockquote {
  border-left: 0.1875rem solid #644bc8;
  padding: 0 1.5rem;
  line-height: 1.375rem;
  font-weight: 400;
  font-style: italic;
  margin: 2rem; }
  @media (max-width: 60rem) {
    blockquote {
      margin: 1rem;
      padding: 0 0.75rem; } }
footer {
  text-align: center; }
  footer h3 {
    margin: 2rem 0; }
  footer #post-comments,
  footer #disqus_thread {
    margin: 2.625rem auto; }

header {
  margin: auto;
  text-align: center; }
  header .blog-title {
    font-size: 2.625rem;
    line-height: 2.875rem;
    color: #af91af; }
    @media (max-width: 60rem) {
      header .blog-title {
        font-size: 2.5rem;
        line-height: 2.75rem; } }
  header .post-meta {
    padding: 0 0 3rem 0; }
    header .post-meta .series {
      padding-bottom: 1rem; }
      header .post-meta .series .series-title {
        transition: all 0.25s ease-in-out; }
        header .post-meta .series .series-title:hover, header .post-meta .series .series-title:active {
          font-weight: 700; }
    header .post-meta .date {
      font-weight: 600; }
      header .post-meta .date .posted-on {
        margin-right: 5rem; }
        @media (max-width: 60rem) {
          header .post-meta .date .posted-on {
            margin-right: 1.5rem; } }
  header #TableOfContents {
    text-align: left;
    margin-bottom: 3rem;
    background-color: #414141;
    padding: 0.0625rem 0;
    border-radius: 0.5rem; }
    header #TableOfContents ol {
      list-style: decimal;
      padding: 0 2rem; }
      header #TableOfContents ol li {
        color: #e6e6e6;
        font-weight: 600;
        padding-left: 1rem; }
        header #TableOfContents ol li a {
          color: #e6e6e6;
          transition: all 0.25s ease-in-out;
          font-weight: 600; }
          header #TableOfContents ol li a:hover, header #TableOfContents ol li a:active {
            color: #a032f0;
            font-size: 1.0625rem; }

.left {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 30rem;
  margin: 1rem; }
  .left img {
    width: 60%;
    height: 100%;
    margin-right: 50%; }
  .left figcaption {
    margin-top: 0.25rem; }
    .left figcaption p {
      text-align: left;
      font-size: 0.875rem; }
  @media (max-width: 60rem) {
    .left {
      width: 100%;
      height: 12rem;
      margin: 1rem auto 5rem auto; }
      .left img {
        width: 100%;
        margin-left: 0;
        margin-right: 0; }
      .left figcaption p {
        text-align: right;
        font-size: 0.875rem; } }
.center {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 30rem;
  margin: 1rem auto; }
  .center img {
    width: 60%;
    height: 100%;
    margin-left: 20%;
    margin-right: 20%; }
  .center figcaption {
    margin-top: 0.25rem; }
    .center figcaption p {
      text-align: center;
      font-size: 0.875rem; }
  @media (max-width: 60rem) {
    .center {
      width: 100%;
      height: 12rem;
      float: none;
      margin-bottom: 5rem; }
      .center img {
        width: 100%;
        margin-left: 0;
        margin-right: 0; }
      .center figcaption p {
        text-align: right;
        font-size: 0.875rem; } }
.right {
  display: flex;
  flex-direction: column;
  float: right;
  width: 100%;
  height: 30rem;
  margin: 1rem; }
  .right img {
    width: 60%;
    height: 100%;
    margin-left: 40%; }
  .right figcaption {
    margin-top: 0.25rem; }
    .right figcaption p {
      text-align: right;
      font-size: 0.875rem; }
  @media (max-width: 60rem) {
    .right {
      width: 100%;
      height: 12rem;
      float: none;
      margin: 1rem auto 5rem auto; }
      .right img {
        width: 100%;
        margin-left: 0;
        margin-right: 0; }
      .right figcaption p {
        text-align: right;
        font-size: 0.875rem; } }
.prev-next {
  padding: 3rem 0; }
  .prev-next .prev,
  .prev-next .next {
    width: 6.25rem;
    height: 2rem;
    border: none;
    border-radius: 0.25rem;
    transition: all 0.25s ease-in-out;
    text-decoration: none;
    color: #a032f0;
    background-color: #414141;
    margin: 0.5rem;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 600; }
    .prev-next .prev:hover, .prev-next .prev:focus, .prev-next .prev:active,
    .prev-next .next:hover,
    .prev-next .next:focus,
    .prev-next .next:active {
      cursor: pointer;
      background-color: #a032f0;
      color: #e6e6e6;
      box-shadow: 0 0 0.5rem #a032f0; }
  .prev-next .prev {
    float: right; }
  .prev-next .next {
    float: left; }

table {
  display: table;
  border-collapse: collapse;
  border: 2px solid #737373;
  width: 100%;
  font-size: medium;
  white-space: wrap;
  line-height: 1.15; }
  @media (max-width: 60rem) {
    table {
      width: auto;
      margin-left: auto;
      margin-right: auto;
      display: block;
      overflow-x: auto; } }
  table td,
  table th {
    text-align: left;
    padding: 0.5rem; }
  table th {
    position: sticky;
    top: 2.5625rem;
    background-color: #323232; }
    @media (max-width: 30rem) {
      table th {
        top: 3.25rem;
        position: static; } }
  table td {
    border: 0.125rem solid #737373; }

@use "../util/index" as *;
.tabs {
  display: flex;
  flex-wrap: wrap;
  margin: 2rem 0;
  position: relative; }
  .tabs.tabs-left {
    justify-content: flex-start; }
    .tabs.tabs-left label.tab-label {
      margin-right: 0.5rem; }
    .tabs.tabs-left .tab-content {
      border-radius: 0 0.25rem 0.25rem 0.25rem; }
  .tabs.tabs-right {
    justify-content: flex-end; }
    .tabs.tabs-right label.tab-label {
      margin-left: 0.5rem; }
    .tabs.tabs-right .tab-content {
      border-radius: 0.25rem 0 0.25rem 0.25rem; }
  .tabs input.tab-input {
    display: none; }
  .tabs label.tab-label {
    background-color: #323232;
    border-color: #414141;
    border-radius: 0.25rem 0;
    border-style: solid;
    border-bottom-style: hidden;
    border-width: 1px;
    cursor: pointer;
    display: inline-block;
    order: 1;
    padding: 0.3125rem 0.5rem;
    position: relative;
    top: 0.0625rem;
    user-select: none; }
  .tabs input.tab-input:checked + label.tab-label {
    background-color: #414141; }
  .tabs .tab-content {
    background-color: #414141;
    border-color: #323232;
    border-style: solid;
    border-width: 0.0625rem;
    display: none;
    order: 2;
    padding: 1rem;
    width: 100%; }
  .tabs.tabs-code .tab-content {
    padding: 0.5rem; }
    .tabs.tabs-code .tab-content pre {
      margin: 0; }

.notice {
  border-radius: 0.25rem;
  position: relative;
  margin: 2rem 0;
  padding: 0 0.75rem;
  overflow: auto; }
  .notice .notice-title {
    position: relative;
    font-weight: 700;
    margin: 0 auto;
    padding: 0.25rem 2.875rem;
    border-bottom: 1px solid #414141; }
    .notice .notice-title i {
      position: absolute;
      top: 50%;
      left: 1.5rem;
      transform: translate(-50%, -50%); }
  .notice .notice-content {
    display: block;
    margin: 2rem; }

.notice.note {
  background-color: rgba(125, 90, 195, 0.1); }
  .notice.note .notice-title {
    background-color: rgba(105, 60, 180, 0.1); }
    .notice.note .notice-title i {
      color: #5f37b4; }

.notice.tip {
  background-color: rgba(40, 165, 155, 0.1); }
  .notice.tip .notice-title {
    background-color: rgba(0, 150, 135, 0.1); }
    .notice.tip .notice-title i {
      color: #008c7d; }

.notice.example {
  background-color: rgba(140, 110, 100, 0.1); }
  .notice.example .notice-title {
    background-color: rgba(120, 85, 70, 0.1); }
    .notice.example .notice-title i {
      color: #6e4b41; }

.notice.question {
  background-color: rgba(150, 205, 100, 0.1); }
  .notice.question .notice-title {
    background-color: rgba(140, 195, 75, 0.1); }
    .notice.question .notice-title i {
      color: #7db441; }

.notice.info {
  background-color: rgba(65, 165, 245, 0.1); }
  .notice.info .notice-title {
    background-color: rgba(35, 150, 245, 0.1); }
    .notice.info .notice-title i {
      color: #1e87e6; }

.notice.warning {
  background-color: rgba(255, 200, 40, 0.1); }
  .notice.warning .notice-title {
    background-color: rgba(255, 195, 10, 0.1); }
    .notice.warning .notice-title i {
      color: #ffb400; }

.notice.error {
  background-color: rgba(240, 85, 80, 0.1); }
  .notice.error .notice-title {
    background-color: rgba(245, 65, 55, 0.1); }
    .notice.error .notice-title i {
      color: #e63737; }

.taxonomy-links {
  padding-top: 1rem; }

.tax {
  margin: 1rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: #e6e6e6; }
  .tax .taxes {
    display: inline-block;
    margin: 0;
    padding-left: 1.5rem;
    list-style: square; }
    .tax .taxes .taxing .taxlin:hover, .tax .taxes .taxing .taxlin:focus {
      color: #a032f0; }

.avatar,
.error404,
.construction {
  width: 22.5rem;
  height: 22.5rem;
  margin-bottom: 2rem; }
  @media (max-width: 60rem) {
    .avatar,
    .error404,
    .construction {
      width: 12rem;
      height: 12rem; } }
.featured {
  width: 100%;
  height: 8rem; }
  @media (max-width: 60rem) {
    .featured {
      height: 8rem; } }
.fa-brands {
  color: #5f5f5f; }

.fa-link,
.fa-link-slash {
  font-size: 0.5rem;
  line-height: 0.75rem;
  vertical-align: top;
  margin: 0; }

.fa-file,
.fa-file-text,
.fa-file-pdf-o,
.fa-file-pdf,
.fa-file-word-o,
.fa-file-word,
.fa-file-excel-o,
.fa-file-excel,
.fa-file-powerpoint-o,
.fa-file-powerpoint,
.fa-file-image-o,
.fa-file-image {
  color: violet; }

.fa-calendar {
  color: red; }

.fa-clock-o,
.fa-clock {
  color: orange; }

.fa-tag {
  color: yellow; }

.fa-user {
  color: green; }

.fa-folder,
.fa-folder-open {
  color: blue; }

.fa-folder-open {
  color: indigo; }

.fa-copyright {
  vertical-align: top;
  font-size: 0.75rem;
  line-height: 1rem;
  padding-top: 0.5rem;
  margin: 0; }

.not_found {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  .not_found h1 {
    margin-top: 4rem;
    margin-bottom: 0.5rem;
    font-size: 3rem; }
    @media (max-width: 60rem) {
      .not_found h1 {
        font-size: 2rem; } }
  .not_found h2 {
    margin: 2rem 0;
    font-size: 1.6875rem;
    color: red;
    text-decoration: none; }
  .not_found p {
    text-align: center; }

.about {
  margin: auto;
  text-align: center;
  padding-top: 0;
  position: relative; }
  .about .description {
    font-size: 1.5rem;
    text-decoration: none;
    color: #e6e6e6;
    margin-top: 0; }
    @media (max-width: 60rem) {
      .about .description {
        font-size: 1.25rem; } }
  .about .social-order {
    list-style: none; }
    .about .social-order .socials {
      display: inline-block;
      position: relative; }
      .about .social-order .socials .fa-icon i {
        margin: 0 2rem 0 0;
        font-size: 2rem; }
        .about .social-order .socials .fa-icon i:hover, .about .social-order .socials .fa-icon i:focus, .about .social-order .socials .fa-icon i:active {
          color: #a032f0; }
        @media (max-width: 60rem) {
          .about .social-order .socials .fa-icon i {
            font-size: 1.25rem; } }
      @media (max-width: 60rem) {
        .about .social-order .socials {
          margin: 0.5rem 0; } }
.pagination {
  margin-top: 1.5rem;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, "游ゴシック", "PingFang SC", STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑", SimSun, "宋体", Heiti, "黑体", sans-serif; }
  .pagination li {
    display: inline;
    text-align: center;
    font-weight: 700; }
    .pagination li span {
      margin: 0;
      text-align: center;
      width: 2.1875rem; }
    .pagination li a {
      font-weight: 300; }
      .pagination li a span {
        margin: 0;
        text-align: center;
        width: 2.1875rem; }
  @media (max-width: 60rem) {
    .pagination {
      margin-top: 1rem; } }
.list-title {
  font-size: 2.625rem;
  line-height: 2.875rem;
  color: #c84b64; }
  @media (max-width: 60rem) {
    .list-title {
      font-size: 2.5rem;
      line-height: 2.75rem; } }
.blogging {
  margin: 2rem 0;
  list-style: none;
  padding: 0.75rem 0 0 0;
  border-top: 1px solid #737373;
  overflow-y: auto;
  height: 20rem;
  scrollbar-width: none; }
  @media (max-width: 60rem) {
    .blogging {
      padding: 1.5rem 0 0 0;
      max-height: 16rem; } }
  .blogging li {
    margin-bottom: 0.625rem;
    font-size: 1.125rem; }
    .blogging li .date {
      text-align: left;
      margin-right: 2rem; }
      @media (max-width: 60rem) {
        .blogging li .date {
          display: block;
          text-align: left;
          font-size: 0.875rem; } }
    .blogging li .title {
      float: right;
      color: #e6e6e6;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, "游ゴシック", "PingFang SC", STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑", SimSun, "宋体", Heiti, "黑体", sans-serif;
      font-weight: 600;
      transition: all 0.25s ease-in-out;
      cursor: pointer; }
      .blogging li .title:hover, .blogging li .title:focus {
        color: #a032f0;
        font-size: 1.1875rem;
        font-weight: 700; }
      @media (max-width: 60rem) {
        .blogging li .title {
          font-size: 0.875rem;
          display: block;
          float: left; } }
.taxonomy {
  list-style: none;
  margin: 3rem auto;
  padding: 0;
  text-align: center; }
  .taxonomy li {
    margin-left: 0.625rem;
    display: inline-block;
    position: relative; }
    .taxonomy li button {
      margin-bottom: 1rem;
      font-size: 1.125rem;
      color: #e6e6e6;
      font-weight: 700;
      border: none;
      border-radius: 0.25rem;
      background-color: #414141;
      width: 12rem;
      height: 3rem;
      transition: all 0.25s ease-in-out; }
      .taxonomy li button:hover, .taxonomy li button:focus {
        background-color: #a032f0;
        transform: scale(1.05);
        cursor: pointer; }
        .taxonomy li button:hover a, .taxonomy li button:focus a {
          color: #e6e6e6;
          text-decoration: none; }

@media (max-width: 60rem) {
  ul:not(.pagination, .taxonomy) li {
    display: flex;
    flex-direction: column;
    float: none;
    margin-left: 0; }
    ul:not(.pagination, .taxonomy) li .date {
      text-align: center;
      margin: 0; }
    ul:not(.pagination, .taxonomy) li .title {
      text-align: center; } }