html #HCB_comment_box {
  --hcb-font-size: 0.875rem;
  --hcb-font-size-lg: 1.125rem;
  --hcb-font-size-sm: 0.7rem;

  /* declare colors you want to use here */
  --color-white: #e2e2e2;
  --color-dark-gray: #181818;
  --color-lime: #d8f328;

  @media (min-width: 768px) {
    --hcb-font-size: 1rem;
    --hcb-font-size-lg: 1.25rem;
    --hcb-font-size-sm: 0.8rem;
  }

  font-family: "Inter", sans-serif !important;
  color: black !important;
  font-size: var(--hcb-font-size) !important;

  * {
    font-family: inherit !important;
  }

  /* links */
  a {
    color: black !important;
    &:hover {
      text-decoration: underline;
    }
  }

  /* comment metadata */
  .author {
    font-family: var(--font-heading) !important;
    font-style: normal !important;
    font-weight: 300 !important;
    font-size: var(--hcb-font-size-lg) !important;
  }

  .date {
    color: black !important;
    font-family: "Fira Code", monospace !important;
    text-transform: uppercase !important;
  }

  /* form layout */
  #HCB_comment_form_box form {
    display: flex;
    flex-wrap: wrap;
    column-gap: 12px;
  }

  .hcb-wrapper {
    flex-basis: 100% !important;
    margin-bottom: 8px !important;
  }

  /* inputs & textarea */
  #hcb_form_name,
  #hcb_form_website,
  textarea {
    border: 0.5px solid var(--color-dark-gray);
    border-radius: 0 !important;
    padding: 8px;
    outline: none !important;

    &:focus {
      border-color: var(--color-lime) !important;
      box-shadow: 0 0 0 1px
        color-mix(in srgb, var(--color-lime) 20%, transparent) !important;
    }
    width: 100% !important;
    box-sizing: border-box;
    font: inherit !important;
    font-size: inherit !important;
    color: black !important;

    &::placeholder {
      color: black !important;
      opacity: 0.6 !important;
      font: inherit !important;
      font-size: inherit !important;
    }
  }

  /* comment body */
  blockquote,
  .hcb-comment-body {
    font-family: inherit !important;
    font-size: inherit !important;
  }

  #hcb_msg {
    margin-bottom: 18px;
  }

  /* buttons */
  .btn {
    background-color: var(--color-lime) !important;
    border: 1px solid var(--color-dark-gray) !important;
    border-radius: 0 !important;
    padding: 4px 8px;
    font: inherit !important;
    font-size: inherit !important;
    font-family: "Fira Code", monospace !important;
    text-transform: uppercase !important;
    color: black !important;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out !important;

    &:hover {
      background-color: color-mix(
        in srgb,
        var(--color-lime) 20%,
        transparent
      ) !important;
    }
  }

  /* comment actions */
  .hcb-reply,
  .hcb-flag,
  .del {
    color: var(--color-dark-gray) !important;
    font-weight: 400 !important;
    opacity: 0.8 !important;
    font-family: "Fira Code", monospace !important;
    text-transform: uppercase !important;

    &:hover {
      text-decoration: underline !important;
    }
  }

  .del {
    font-size: 0 !important;

    img {
      display: none;
    }

    &::before {
      content: "delete";
      font-size: var(--hcb-font-size-sm) !important;
    }
  }

  /* comments container */
  #comments_list {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* comment card */
  .comment {
    border: 1px solid var(--color-dark-gray) !important;
    background-color: var(--color-lime) !important;
    border-radius: 0 !important;
    padding: 12px 16px;
    margin-bottom: 2rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    max-width: none !important;
    width: auto !important;

    &:last-child {
      margin-bottom: 1rem !important;
    }
  }

  /* subscribe & settings */
  #hcb_subscribe,
  small:has(#hcb_settings),
  #hcb_settings {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-family: "Fira Code", monospace !important;
    text-transform: uppercase !important;
    font-size: var(--hcb-font-size-sm) !important;
    font-weight: 400 !important;
    color: black !important;
    flex-basis: auto !important;
  }

  #hcb_settings img.hcb-icon {
    display: inline-block !important;
    width: 0.8rem !important;
    height: 0.8rem !important;
  }

  input[type="checkbox"] {
    accent-color: var(--color-lime) !important;
  }

  /* hidden elements */
  .home-desc,
  .hcb-like,
  .hcb-door-in,
  .hcb-door-out,
  img[alt="rss"],
  #no_comments,
  h3 {
    display: none !important;
  }
}