* {
    box-sizing: border-box;
  }

  /*@font-face {
    font-family: 'Arvo';
    src: url('/fonts/arvo-regular.ttf') format('truetype');
  }

  @font-face {
    font-family: 'Crimson Text';
    src: url('/fonts/crimsontext-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }*/

  :root {
    --red05: rgba(255, 65, 54, 0.05);
    --red100: rgba(255, 65, 54, 1);
    --blue05: rgba(33, 157, 255, 0.05);
    --blue30: rgba(33, 157, 255, 0.3);
    --blue100: rgba(33, 157, 255, 1);
    --black05: rgba(0, 0, 0, 0.05);
    --black20: rgba(0, 0, 0, 0.2);
    --black60: rgba(0, 0, 0, 0.6);
    --white: rgba(255, 255, 255, 1);
    --text: rgba(0, 0, 0, 1);
    --hong: rgb(141, 15, 15);
    --huang: rgb(230, 180, 60);
    --lan: rgb(30, 60, 80);
  }

  [data-theme=dark] {
    --background-color: black;
    --text-color: rgb(200, 200, 200);
  }

  [data-theme=light] {
    /*  --background-color: #EFF1EC;  */
    --background-color: white;
    --text-color: black;
  }

  html {
    height: 100%;
    color: var(--text-color);
    -webkit-font-smoothing: antialiased;
  }

  body {
    margin: 0;
    width: 100%;
    height: 100%;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    font-size: 1rem;
    line-height: 1.618;
    text-align: left;
    color: black !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased;
    word-break: break-word;
  }

  body>main>header {
    border-bottom: 1px solid #eee;
    text-align: center;
    margin: 1rem auto;
    padding: 1rem 0;
  }

  h1 {
    margin-bottom: 0px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.25;
    color: #363636;
    margin-top: 0;
  }

  h4 {
    font-size: 1.4rem;
  }

  body>main>header a {
    color: var(--text);
    text-decoration: none;
    background-color: transparent;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0 0 0.5em 0;
    font-weight: 400;
    line-height: 1.2;
    font-family: 'Crimson Text';
  }

  p {
    font-family: 'Crimson Text';
    font-size: 20px;
  }

  a,
  button,
  input {
    transition: all .4s ease;
  }

  a,
  .fl {
    text-decoration: none;
    color: #B70E0E;
    cursor: pointer;
  }

  body>main {
    height: calc(100% - 4rem);
    /*  minus navbar */
  }

  .error-div,
  #error-div {
    color: red;
  }

  .blog {
    text-align: justify;
  }

  /* desktop */
  @media (min-width: 935px) {
    .blog {
      width: 935px;
      margin: auto;
    }
  }

  @media (max-width: 935px) {
    body>main {
      width: inherit;
    }

    .blog {
      padding: 0 0.5rem;
    }
  }

  #content {
    flex: 0 0 70%;
    max-width: 70%;
  }

  input[type="submit"],
  button,
  .button {
    border-color: #181818;
    background-color: #181818;
    padding: 0.5rem 1.25rem;
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    -o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
  }

  .hs {
    white-space: nowrap;
    overflow-x: auto;
  }

  .cp {
    cursor: pointer;
  }

  .tabs {
    display: flex;
    justify-content: space-between;

    & .tab {
      cursor: pointer;
      padding: 0.2rem;
    }

    & .tab.active {
      border-bottom: 1px solid var(--red);
    }
  }

  /* mobile responsive */
  @media (max-width: 768px) {
    body>main {
      padding: 0.2rem;
    }
  }

  /* tailwindy stuff */
  .flex {
    display: flex;
  }

  .ml1 {
    margin-left: 1rem;
  }

  .ml2 {
    margin-right: 1rem;
  }

  .fhns {
    height: 100%;
    overflow: hidden;
  }

  .fh {
    height: 100%;
  }

  .sy {
    overflow-y: scroll;
  }

  .fsy {
    overflow-y: scroll;
    height: 100%;

  }

  .fxc {
    display: flex;
    justify-content: center;
    align-items: baseline;
  }

  .f1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .gc {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
  }

  .axc {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .xc {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .tc {
    text-align: center !important;
  }

  .bb {
    border-bottom: 1px solid var(--text-color);
  }