/* used from https://github.com/gleich/ui */

:root {
  --border-radius: 5px;
  --box-shadow-color: rgb(21, 21, 21);
  --box-shadow: 0px 3px 10px var(--box-shadow-color);

  --button-background: rgb(53, 53, 53);
  --button-foreground: #fff;
  --button-background-hover: rgb(51, 51, 53);

  --foreground: white;
  --actual-background: rgb(21, 25, 27);
  /* the actual color of the background once the textured background is applied */
  --actual-background-color: rgb(34, 35, 37);
  --background: rgb(41, 43, 45);
  --border: rgb(67, 67, 67);
  --section-name-background-color: #343537;

  --green-foreground: rgb(0 217 107);
  --green-background: rgb(37 54 48);
  --green-border: rgb(40 86 61);

  --yellow-foreground: #f0ec02;
  --yellow-background: rgb(88, 86, 23);
  --yellow-border: #d4d11d;

  --blue-foreground: #2b95ff;

  --red-foreground: rgb(243, 9, 40);
  --red-background: rgb(61 36 38);
  --red-border: rgb(134 34 41);
}

@media (prefers-color-scheme: light) {
  :root {
    --box-shadow-color: rgb(202, 202, 202);
    --box-shadow: 0px 3px 10px var(--box-shadow-color);

    --button-background: rgb(238, 238, 238);
    --button-foreground: black;
    --button-background-hover: rgb(237, 237, 237);

    --foreground: rgb(0, 0, 0);
    --actual-background: #f4f4f4;
    --background: #f4f4f4;
    --actual-background-color: #f4f4f4;
    --border: rgb(186, 186, 186);
    --section-name-background-color: #eaeaea;

    --green-foreground: rgb(15, 70, 17);
    --green-background: rgb(179, 228, 183);
    --green-border: rgb(67, 160, 71);

    --yellow-foreground: #fffb00;
    --yellow-background: rgb(189, 177, 11);
    --yellow-border: #fffb00;

    --blue-foreground: #0072e5;

    --red-foreground: rgb(255, 255, 255);
    --red-background: rgb(224, 18, 18);
    --red-border: rgb(255, 0, 0);
  }

  html {
    color-scheme: light;
  }
}

html,
body,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0;
  margin: 0;
}

html {
  color-scheme: dark;
  color: var(--foreground);
  background-color: var(--actual-background);
  position: relative;
  scrollbar-width: 0.2rem;
  overflow-y: scroll;

  /* default font configuration */
  font-feature-settings: 'zero';
  font-size: 16px;

  /* font optimizations */
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
}

/* textured background */
html:before {
  content: '';
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='10' numOctaves='10' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 182px;
  opacity: 0.15;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

::selection {
  background-color: var(--foreground);
  text-decoration-color: var(--background);
  color: var(--background);
}

::-moz-selection {
  background-color: var(--foreground);
  text-decoration-color: var(--background);
  color: var(--background);
}

/* custom scrollbar */
*::-webkit-scrollbar {
  width: 0.2rem;
  height: 0.2rem;
}

*::-webkit-scrollbar-track {
  background: var(--border);
}

*::-webkit-scrollbar-thumb {
  background: var(--foreground);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

a {
  color: var(--blue-foreground);
}

img {
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 800;
}

h1 {
  font-size: 2.9rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.7rem;
}

h4 {
  font-size: 1.45rem;
}

@media (max-width: 500px) {
  html {
    font-size: 15px;
  }

  h2 {
    font-size: min(1.9rem, 13vw);
  }

  h3 {
    font-size: 1.5rem;
  }

  h4 {
    font-size: 1.3rem;
  }
}

button {
  background-color: var(--button-background);
  color: var(--button-foreground);
  border: 1px solid var(--border);
  font-family: inherit;
  font-size: inherit;
  border-radius: var(--border-radius);
  transition:
    background-color 0.07s linear,
    box-shadow 0.07s linear;
  box-shadow:
    var(--box-shadow),
    inset 0px 1px 8px transparent;
  will-change: transform, opacity;
}

button:hover {
  background-color: var(--button-background-hover);
  cursor: pointer;
  box-shadow:
    0px 1px 5px transparent,
    inset 0px 1px 8px var(--box-shadow-color);
}

ol,
ul {
  padding-left: 5px;
  list-style-position: inside;
  margin: 0;
}