:root {
  --ctp-rosewater: #f5e0dc;
  --ctp-flamingo:  #f2cdcd;
  --ctp-pink:      #f5c2e7;
  --ctp-mauve:     #cba6f7;
  --ctp-red:       #f38ba8;
  --ctp-maroon:    #eba0ac;
  --ctp-peach:     #fab387;
  --ctp-yellow:    #f9e2af;
  --ctp-green:     #a6e3a1;
  --ctp-teal:      #94e2d5;
  --ctp-sky:       #89dceb;
  --ctp-sapphire:  #74c7ec;
  --ctp-blue:      #89b4fa;
  --ctp-lavender:  #b4befe;

  --ctp-text:      #cdd6f4;
  --ctp-subtext1:  #bac2de;
  --ctp-subtext0:  #a6adc8;
  --ctp-overlay2:  #9399b2;
  --ctp-overlay1:  #7f849c;
  --ctp-overlay0:  #6c7086;
  --ctp-surface2:  #585b70;
  --ctp-surface1:  #45475a;
  --ctp-surface0:  #313244;
  --ctp-base:      #1e1e2e;
  --ctp-mantle:    #181825;
  --ctp-crust:     #11111b;
}

body.light {
  --ctp-rosewater: #dc8a78;
  --ctp-flamingo:  #dd7878;
  --ctp-pink:      #ea76cb;
  --ctp-mauve:     #8839ef;
  --ctp-red:       #d20f39;
  --ctp-maroon:    #e64553;
  --ctp-peach:     #fe640b;
  --ctp-yellow:    #df8e1d;
  --ctp-green:     #40a02b;
  --ctp-teal:      #179299;
  --ctp-sky:       #04a5e5;
  --ctp-sapphire:  #209fb5;
  --ctp-blue:      #1e66f5;
  --ctp-lavender:  #7287fd;

  --ctp-text:      #4c4f69;
  --ctp-subtext1:  #5c5f77;
  --ctp-subtext0:  #6c6f85;
  --ctp-overlay2:  #7c7f93;
  --ctp-overlay1:  #8c8fa1;
  --ctp-overlay0:  #9ca0b0;
  --ctp-surface2:  #acb0be;
  --ctp-surface1:  #bcc0cc;
  --ctp-surface0:  #eff1f5;
  --ctp-base:      #e6e9ef;
  --ctp-mantle:    #e6e9ef;
  --ctp-crust:     #dce0e8;
}

body {
  background-color: var(--ctp-base);
  color: var(--ctp-text);
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 2rem;
  text-align: center;
}

/* h1, h2, h3, h4, h5, h6 { */
/*   color: var(--ctp-lavender); */
/*   margin-top: 2rem; */
/* } */
h1 {
  color: var(--ctp-red);
  font-size: 3rem;
  text-align: center;
}

h2 {
  color: var(--ctp-peach);
}

h3 {
  color: var(--ctp-yellow);
}

h4 {
  color: var(--ctp-green);
}

h5 {
  color: var(--ctp-sapphire);
}

h6 {
  color: var(--ctp-lavender);
}

code, pre {
  color: var(--ctp-teal);
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  background-color: var(--ctp-surface0);
}

pre {
  background-color: var(--ctp-surface0);
  padding: 1em;
  overflow-x: auto;
}

a {
  color: var(--ctp-sapphire);
  text-decoration: none;
}

a:hover {
  color: var(--ctp-rosewater);
  text-decoration: none;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

footer {
  color: var(--ctp-subtext0);
  font-size: 14px;
  text-align: center;
  margin-top: 80px;
  /* margin-bottom: 36px; */
}

.toggle-theme {
  width: 28px;
  height: 28px;
  margin: 0 20px;
  cursor: pointer;
}

.hidden {
  display: none;
}


blockquote {
  border-left: 4px solid var(--ctp-pink);
  padding-left: 1em;
  color: var(--ctp-maroon);
  margin: 1.5em 0;
}

strong, em {
  color: var(--ctp-maroon);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1em;
}

th, td {
  border: 1px solid var(--ctp-surface2);
  padding: 0.75em;
}

th {
  background-color: var(--ctp-surface1);
  color: var(--ctp-subtext1);
}

tr:nth-child(even) {
  background-color: var(--ctp-surface0);
}

hr {
  border: none;
  border-top: 1px solid var(--ctp-pink);
  margin: 2rem auto;
  width: 60%;
}

ul, ol {
  display: inline-block;
  line-height: 1.7;
  padding-left: 1.2rem;
  text-align: left;
}

ul li::marker {
  color: var(--ctp-pink); /* bullet color */
}

ol li::marker {
  color: var(--ctp-pink); /* number color */
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    /* margin: 1.2rem 0 0; */
    margin: 0.4rem auto;
}

/* li img { */
/*     margin: 0 0 0.4rem; */
/* } */

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0.8rem 1rem;
}

/* highlight.js styles */
code.hljs {
	color: var(--ctp-text);
	background: var(--ctp-surface0);
}

code .hljs-keyword {
	color: var(--ctp-mauve)
}

code .hljs-built_in {
	color: var(--ctp-red)
}

code .hljs-type {
	color: var(--ctp-yellow)
}

code .hljs-literal {
	color: var(--ctp-peach)
}

code .hljs-number {
	color: var(--ctp-peach)
}

code .hljs-operator {
	color: var(--ctp-sky)
}

code .hljs-punctuation {
	color: var(--ctp-subtext1)
}

code .hljs-property {
	color: var(--ctp-teal)
}

code .hljs-regexp {
	color: var(--ctp-pink)
}

code .hljs-string {
	color: var(--ctp-green)
}

code .hljs-char.escape_ {
	color: var(--ctp-green)
}

code .hljs-subst {
	color: var(--ctp-subtext0)
}

code .hljs-symbol {
	color: var(--ctp-flamingo)
}

code .hljs-variable {
	color: var(--ctp-mauve)
}

code .hljs-variable.language_ {
	color: var(--ctp-mauve)
}

code .hljs-variable.constant_ {
	color: var(--ctp-peach)
}

code .hljs-title {
	color: var(--ctp-blue)
}

code .hljs-title.class_ {
	color: var(--ctp-yellow)
}

code .hljs-title.function_ {
	color: var(--ctp-blue)
}

code .hljs-params {
	color: var(--ctp-text)
}

code .hljs-comment {
	color: var(--ctp-overlay2)
}

code .hljs-doctag {
	color: var(--ctp-red)
}

code .hljs-meta {
	color: var(--ctp-peach)
}

code .hljs-section {
	color: var(--ctp-blue)
}

code .hljs-tag {
	color: var(--ctp-teal)
}

code .hljs-name {
	color: var(--ctp-mauve)
}

code .hljs-attr {
	color: var(--ctp-blue)
}

code .hljs-attribute {
	color: var(--ctp-green)
}

code .hljs-bullet {
	color: var(--ctp-teal)
}

code .hljs-code {
	color: var(--ctp-green)
}

code .hljs-emphasis {
	color: var(--ctp-red);
	font-style: italic
}

code .hljs-strong {
	color: var(--ctp-red);
	font-weight: bold
}

code .hljs-formula {
	color: var(--ctp-teal)
}

code .hljs-link {
	color: var(--ctp-sapphire);
	font-style: italic
}

code .hljs-quote {
	color: var(--ctp-green);
	font-style: italic
}

code .hljs-selector-tag {
	color: var(--ctp-yellow)
}

code .hljs-selector-id {
	color: var(--ctp-blue)
}

code .hljs-selector-class {
	color: var(--ctp-teal)
}

code .hljs-selector-attr {
	color: var(--ctp-mauve)
}

code .hljs-selector-pseudo {
	color: var(--ctp-teal)
}

code .hljs-template-tag {
	color: var(--ctp-flamingo)
}

code .hljs-template-variable {
	color: var(--ctp-flamingo)
}

code .hljs-addition {
	color: var(--ctp-green);
	background: rgb(from var(--ctp-green) r g b/15%)
}

code .hljs-deletion {
	color: var(--ctp-red);
	background: rgb(from var(--ctp-red) r g b/15%)
}

@media (max-width: 576px) {
    h1 {
      color: var(--ctp-red);
      font-size: 2.5rem;
      text-align: center;
    }
}