body {
  --main-100-rgb: 13, 14, 20;
  --main-100: #0d0e14; 
  --main-200-rgb: 33, 37, 48;
  --main-200: #22262f;
  --main-220: #2a2e3a;
  --main-300: #73859c;
  --main-300-rgb: 115, 133, 156;
  --main-400: #aec0d6;
  --main-500: #ebedf0;
  --main-500-rgb: 235, 237, 240;

  /* --main-100-rgb: 13, 14, 15;
  --main-100: #0d0e0f; 
  --main-200-rgb: 33, 37, 41;
  --main-200: #22262a;
  --main-220: #2a2e32;
  --main-300: #73858c;
  --main-300-rgb: 115, 133, 140;
  --main-400: #aec0be;
  --main-500: #ebede8;
  --main-500-rgb: 235, 237, 232; */

  /* System accent colors */
  --accent-100: #5b2b24;
  --accent-200: #b8873e;
  --accent-300: #FBBF65;
  --accent-400: #FFFB70;
  --accent-500: rgb(255, 245, 231);
  --accent-500-rgb: 255, 245, 231;

  --accent-gradient-200: linear-gradient(70deg, var(--accent-300), var(--accent-200));
  --accent-gradient-300: linear-gradient(70deg, var(--accent-400), var(--accent-300));
  --accent-gradient-400: linear-gradient(70deg, var(--accent-500), var(--accent-400));

  --red-200: #461620;
  --red-300: #c51754;
  --red-400: #e3224f;
  --red-500: #FF567F;

  --lime-100: #0f3427;
  --lime-300: #7cee3f;
  --lime-400: #b6f950;

  --header-height: 50px;
  --nav-height: 50px;
  --side-padding: 10px;

  --padding-s: 5px;
  --padding-m: 10px;
  --padding-l: 30px;

  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 16px;

  --font-size-s: 15px;
}

/*@media (prefers-color-scheme: light) {
  body {
    --main-100-rgb: 255, 255, 255;
    --main-100: #ffffff;
    --main-200: #f2f2f2;
    --main-200-rgb: 242, 242, 242;
    --main-300: #767d84; 
    --main-400: #22262a;
    --main-500: #131415;
    --main-500-rgb: 19, 20, 21;

    --accent-gradient-200: linear-gradient(70deg, var(--accent-200), var(--accent-300));
    --accent-gradient-300: linear-gradient(70deg, var(--accent-300), var(--accent-400));
    --accent-gradient-400: linear-gradient(70deg, var(--accent-400), var(--accent-500));
  }
}
*/

html, body {
  overscroll-behavior-y: none;
  -webkit-touch-callout: none;
}

body {
  height: 100vh;
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: var(--main-100);
  
  color: var(--main-500);
  transition: background-color 170ms linear;
  position: relative; /* Needed for z-index stacking */
  z-index: 0; /* Needed for z-index stacking */
  overflow-x: hidden;
  /* Hide scrollbar for iOS */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ADD this new rule */
body::before {
  content: '';
  position: fixed; /* Fixes to the viewport */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1; /* Place it behind the body content */
  
  /* Move the background properties here */
  background-image: 
    linear-gradient(to bottom, var(--main-100) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 20L0 0h40L20 20zm0 0l20 20H0l20-20z' fill='rgba(33, 37, 48, 0.5)' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-size: 100% 100%, 40px 40px;
}

::-webkit-scrollbar {
  width: 2px;
  background-color: inherit;
}

::-webkit-scrollbar-thumb {
  background-color: var(--main-300);
  border-radius: 4px;
}

@supports (height: 100dvh) {
  body { height: 100dvh; }
}


@media (display-mode: standalone) {
  @supports (height: 100lvh) {
    body { height: 100lvh; }
  }
}