body {
  color: #24292e;
  background: white;
  font: 0.9em -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;

  @media (max-width: 600px) {
    margin: 0 5%;
  }

  @media (min-width: 600px) {
    max-width: 600px;
    margin: 0 auto;
  }
}

.vscode-body input.task-list-item-checkbox {
  width: 16px;
  height: 16px;
  margin: 0 0.3em 0.25em 0em;
  vertical-align: middle;
  position: relative;
}

.vscode-body li.task-list-item {
  list-style: none;
  margin-left: -1.2em;
  padding-left: 0;
}

.vscode-body ul.contains-task-list {
  padding-left: 0;
}

.vscode-body strong {
  font-weight: 600;
  color: #24292e;
  background-color: transparent;
  border-radius: 0;
  font-size: inherit;
  display: inline;
  position: static;
}

.vscode-body em {
  font-style: italic;
  color: #24292e;
  font-family: inherit;
  letter-spacing: normal;
  word-spacing: normal;
}

.vscode-body img {
  max-width: 80%;
  border-radius: 10px;
  box-shadow: 0 20px 30px -10px rgb(16 16 39 / 5%);
  margin: 0 auto;
  display: inline-block;

  &[alt="avatar"] {
    max-width: 100px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    margin: 0 auto;
    display: block;
    margin-bottom: 16px;
  }
}

.vscode-body p {
  text-align: justify;
  /* top | right | bottom | left */
  margin: 20px 0 20px 0;
}

summary {
  display: list-item;
  list-style-position: unset;
  margin-left: 15px;
}

.vscode-body a {
  text-decoration: none;
  color: #005cc5;

  &:hover {
    text-decoration: underline;
    color: #00d0ea;
  }
}

.vscode-body blockquote {
  border-left: 4px solid #dfe2e5;
  border-radius: 3px;
  padding: 0 16px;
  margin: 0 0 16px 0;
  display: block;
  background-color: white;
  position: relative;
  color: inherit;
}

.vscode-body blockquote p {
  color: inherit;
  margin: 16px 0;
  padding: 0;
}

.vscode-body table {
  padding: 0;
  border-collapse: separate;
  border-spacing: 0;
  display: table;
  word-break: initial;
  width: 100%;
  margin-top: 0;
  margin-bottom: 16px;
  overflow: auto;
  border: 1px solid #dfe2e5;
  border-radius: 8px;
}

.vscode-body table tr th {
  border: 1px solid #dfe2e5;
  border-top: none;
  border-left: none;
  font-weight: bold;
  background-color: #fafafa;
  margin: 0;
  padding: 6px 13px;
}

.vscode-body table tr th:first-child {
  border-left: none;
}

.vscode-body table tr th:last-child {
  border-right: none;
}

.vscode-body table tr:first-child th:first-child {
  border-top-left-radius: 8px;
}

.vscode-body table tr:first-child th:last-child {
  border-top-right-radius: 8px;
}

.vscode-body table tr td {
  border: 1px solid #dfe2e5;
  border-left: none;
  border-bottom: none;
  margin: 0;
  padding: 6px 13px;
}

.vscode-body table tr td:last-child {
  border-right: none;
}

.vscode-body table tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}

.vscode-body table tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}

.vscode-body table tr:nth-child(n):hover {
  background-color: #f0f0f0;
}

.vscode-body table tr td:first-child {
  margin-top: 0;
  width: auto;
  white-space: nowrap;
  min-width: min-content;
}

.vscode-body table tr td:last-child {
  margin-bottom: 0;
}

.vscode-body table tr:nth-child(2n) {
  background-color: #fafafa;
}

.vscode-body table tr:only-of-type td,
.vscode-body table tr:first-child td {
  border-top: none;
}

/* disable the hover effect if table has only one tr*/
.vscode-body table tr:only-of-type:hover {
  background-color: transparent;
}

.vscode-body footer {
  display: flex;
  justify-content: center;
  font: 0.8em "helvetica", "Microsoft YaHei UI";
}

.vscode-body details pre,
.vscode-body pre {
  background-color: #f6f8fa;
  border-radius: 6px;
  margin-top: 0;
  margin-bottom: 16px;
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  border: 1px solid #d0d7de;
  box-shadow: none;
  position: relative;
}

.vscode-body code {
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
    Liberation Mono, monospace;
  font-size: 85%;
  padding: 0.2em 0.4em;
  margin: 0;
  border-radius: 3px;
  background-color: rgba(175, 184, 193, 0.2);
  word-wrap: break-word;

  &:before,
  &:after {
    content: normal;
  }
}

.vscode-body pre code {
  font-size: 100%;
  word-break: normal;
  white-space: pre;
  background: transparent;
  padding: 0;
  border-radius: 0;
  display: inline-block;
  width: 100%;
}

.vscode-body h1[id="joolowweng"] {
  text-align: center;
  border-bottom: 0px;
  font-family: "Caveat", cursive;
}

.vscode-body h1[id="joolowweng"]+* {
  text-align: center;
}

/* Add break line styling for headings */
.vscode-body h1,
.vscode-body h2,
.vscode-body h3,
.vscode-body h4,
.vscode-body h5,
.vscode-body h6 {
  margin-bottom: 16px;
  padding-bottom: 0.3em;
}

.vscode-body h1 {
  font-size: 2em;
  margin-top: 24px;
  border-bottom: 1px solid #eaecef;
}

.vscode-body h2 {
  font-size: 1.5em;
  margin-top: 24px;
}

.vscode-body h3 {
  font-size: 1.25em;
  margin-top: 20px;
}

.vscode-body h4 {
  font-size: 1em;
  margin-top: 16px;
}

.vscode-body h5 {
  font-size: 0.875em;
  margin-top: 16px;
}

.vscode-body h6 {
  font-size: 0.85em;
  margin-top: 16px;
  color: #6a737d;
}

/* Additional GitHub-specific language colors */
.vscode-body .language-json .hljs-property {
  color: #032f62;
}

.vscode-body .language-javascript .hljs-keyword {
  color: #d73a49;
}

.vscode-body .language-javascript .hljs-template-string {
  color: #032f62;
}

/* GitHub-style syntax highlighting for GitHub Pages */
.vscode-body .highlight .c,
.vscode-body .highlight .c1,
.vscode-body .highlight .cm,
.vscode-body .highlight .cs {
  color: #6a737d;
  /* Comments */
}

.vscode-body .highlight .k,
.vscode-body .highlight .kd,
.vscode-body .highlight .kn,
.vscode-body .highlight .kp,
.vscode-body .highlight .kr,
.vscode-body .highlight .kt {
  color: #d73a49;
  /* Keywords */
}

.vscode-body .highlight .m,
.vscode-body .highlight .mi,
.vscode-body .highlight .mf,
.vscode-body .highlight .mh,
.vscode-body .highlight .il {
  color: #005cc5;
  /* Numbers */
}

.vscode-body .highlight .s,
.vscode-body .highlight .sb,
.vscode-body .highlight .sc,
.vscode-body .highlight .s1,
.vscode-body .highlight .s2,
.vscode-body .highlight .sd,
.vscode-body .highlight .sh {
  color: #032f62;
  /* Strings */
}

.vscode-body .highlight .na,
.vscode-body .highlight .nx {
  color: #6f42c1;
  /* Names/attributes */
}

.vscode-body .highlight .nc,
.vscode-body .highlight .nt {
  color: #22863a;
  /* Classes and HTML tags */
}

.vscode-body .highlight .o,
.vscode-body .highlight .ow {
  color: #d73a49;
  /* Operators */
}

.vscode-body .highlight .nf,
.vscode-body .highlight .nb,
.vscode-body .highlight .bp {
  color: #6f42c1;
  /* Functions and built-ins */
}

.vscode-body .highlight .p,
.vscode-body .highlight .pi {
  color: #24292e;
  /* Punctuation */
}

.vscode-body .highlight .ld,
.vscode-body .highlight .nl {
  color: #005cc5;
  /* Literals */
}

.vscode-body .highlight .n,
.vscode-body .highlight .nn,
.vscode-body .highlight .py,
.vscode-body .highlight .nv {
  color: #24292e;
  /* Variables and names */
}

/* Additional wrapper classes that GitHub uses */
.vscode-body .highlight {
  background-color: #f6f8fa;
}

.vscode-body .language-json .pl-s .pl-s1,
.vscode-body .pl-token.pl-property {
  color: #032f62;
}

.vscode-body .pl-c,
.vscode-body .pl-c span {
  color: #6a737d;
  font-style: italic;
}

.vscode-body .pl-mb {
  font-weight: bold;
}

.vscode-body .pl-mi {
  font-style: italic;
}

.vscode-body .pl-md {
  background-color: #ffeef0;
  color: #b31d28;
}

.vscode-body .pl-mi1 {
  background-color: #f0fff4;
  color: #22863a;
}

/* Copy Code Button */
.vscode-body .copy-code-button {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #333;
  font-size: 0.8em;
  padding: 4px 8px;
  margin: 5px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s;
}

.vscode-body .copy-code-button:hover {
  opacity: 1;
}

/* Footnotes styling */
.vscode-body .footnotes {
  font-size: 0.85em;
  color: #57606a;
  border-top: 1px solid #d0d7de;
  margin-top: 2em;
  padding-top: 1em;
}

.vscode-body .footnotes ol {
  padding-left: 16px;
}

.vscode-body .footnotes li {
  position: relative;
}

.vscode-body .footnotes li:target {
  background-color: #fffbdd;
}

.vscode-body .footnotes li:target::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #0969da;
}

.vscode-body sup[id^="fnref"] {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  top: -0.5em;
}

.vscode-body sup[id^="fnref"] a {
  display: inline-block;
  text-decoration: none;
  color: #0969da;
  font-weight: 500;
  padding: 0 1px;
}

.vscode-body sup[id^="fnref"] a:hover {
  text-decoration: underline;
}

.vscode-body .footnote-backref {
  font-family: sans-serif;
  text-decoration: none;
  color: #0969da;
}

.vscode-body .footnote-backref:hover {
  text-decoration: underline;
}