html {
  overflow-y: scroll
}
:root {
  --bgcolor: #ffffff;
  --dimcolor: #eeeeee;
  --fontcolor: #000;
  --linkcolor: #00e;
  --visitedcolor: #551a8b;
  --precolor: #fff;
  --prebgcolor: #000;
  --theme-primary: #FFE15C;
  --showcase-background: rgba(220, 220, 220, 0.253);
  --linecolor: grey;
  --btn-border:  black;
  --tick-green: green;
  --shadow: rgba(0,0,0, 0.3);
  --shadowDard: rgba(0,0,0, 0.5);
  --section-title: #ffffff;
  --section-title-background: #000000;
  --cafe: #ff1423;
}

@media (prefers-color-scheme: dark) {
  :root {
     --bgcolor: #2a2a2a;
     --dimcolor: #828282;
     --fontcolor: #ffffff;
     --linkcolor: rgb(255, 211, 158);
     --visitedcolor: #e2ff93;
     --precolor: #fff;
     --prebgcolor: #666666;
     --theme-primary: #ff0000;
     --showcase-background: rgba(71, 71, 71, 0.3);
     --linecolor: grey;
     --btn-border: black;
     --tick-green: rgb(107, 255, 58);
     --shadow: rgb(0, 0, 0);
     --shadowDard: rgba(122, 122, 122, 0.065);
     --section-title: #ffffff;
     --section-title-background: #ff0000;
     --cafe: #FFE15C;
  }
}

body {
  color: var(--fontcolor);
  background: var(--bgcolor);
  margin: 0;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:link {
  color: var(--linkcolor);
}
a:visited {
  color: var(--visitedcolor);
}
a:active {
  color: var(--visitedcolor);
}
h1,h2,h3 {
  margin-top: 30px;
  line-height: 1.2;
}

li > code, p > code, div > code {
  color: rgb(255, 20, 102);
  font-weight: 600;
  font-size: 1rem;
}

pre {
  overflow-x: auto;
  background-color: transparent !important;
}
article {
  padding: 5px 0;
}
.center  {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
figcaption {
  color: #888;
  font: 12px/1.5 monospace;
  text-align: center;
}
figure {
  margin: auto;
}