:root {
  scrollbar-width: thin;
  scrollbar-color: auto;
  --bg: white;
  --txt: black;
  --link: blue;
  --bg-code: #EEEEEE;
  --bg-label: #2B2A33;
}

@media (prefers-color-scheme: dark) {
  :root {
    scrollbar-color: gray black;
    --bg: #2B2A33;
    --txt: white;
    --link: #00FF41;
    --bg-code: black;
    --bg-label: white;
  }
}

#color-mode:checked ~ * {
  --bg: #2B2A33;
  --txt: white;
  --link: #00FF41;
  --bg-code: black;
  --bg-label: white;
}

@media (prefers-color-scheme: dark) {
  #color-mode:checked ~ * {
    --bg: white;
    --txt: black;
    --link: blue;
    --bg-code: #EEEEEE;
    --bg-label: #2B2A33;
  }
}

.color-scheme-wrapper {
  min-height: 200vh;
  background: var(--bg);
  color: var(--txt);
  padding-top: 3rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-family: "Arial";
}

.light-mode-hide {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .dark-mode-hide {
    display: none;
  }
}

@media (prefers-color-scheme: dark) {
  .light-mode-hide {
    display: initial;
  }
}

input[type="checkbox"] {
  opacity: 0.00001;
  position: absolute;
}

html, body, div {
  padding: 0;
  margin: 0;
}

label {
  cursor: pointer;
  position: absolute;
  background: var(--bg-label);
  padding: 1rem;
  top: 1rem;
  right: 1rem;
  border-radius: 6px;
}

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

a:visited {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  cursor: pointer;
}

a:active {
  text-decoration: underline;
}

code {
  background-color: var(--bg-code);
  border-radius: 3px;
  font-family: "Courier", monospace;
  padding: 0 3px;
}

.favicon {
  height: 16px;
  width: 16px;
}

.color-scheme-wrapper {
  padding-bottom: 10rem;
}

:root {scroll-behavior:smooth;}
body {position: relative;}

.scroll-top {
  position: absolute;
  top: 110vh;
  bottom: 1rem;
  right: 1rem;
}

.scroll-top__link {
  position: -webkit-sticky;
  position: sticky;
  top: 95vh;
  border-radius: 3px;
  background-color: red;
  padding: 1rem;
  opacity: .3;
  transition: 0.3s;
}

@media(hover: hover) and (pointer: fine) {
  .scroll-top__link:hover {
    opacity: initial;
  }
}