:root {
  --color-bg: 255 255 255;
  --color-border: 255 255 255;
  --color-box: 255 255 255;
  --box-border: 229 231 235;
  --box-sd: 226 232 240 / 0.5;
  --heading-1: 23 37 84;
  --heading-2: 31 41 55;
  --heading-3: 55 65 81;
}

.dark {
  --color-bg: 3 7 18;
  --color-box: 17 24 39;
  --box-border: 243 244 246/0.1;
  --box-sd: transparent;

  --heading-1: 255 255 255;
  --heading-2: 243 244 246;
  --heading-3: 209 213 219;
}

html {
  scroll-behavior: smooth;
}
body {
  font-family: "Raleway", sans-serif;
}

[data-toggle-nav][data-open-nav="true"] #line1 {
  transform: translateY(0.375rem) rotate(40deg);
}
[data-toggle-nav][data-open-nav="true"] #line2 {
  transform: scaleX(0);
  opacity: 0;
}
[data-toggle-nav][data-open-nav="true"] #line3 {
  transform: translateY(-0.375rem) rotate(-40deg);
}

[data-nav-overlay][data-is-visible="true"] {
  visibility: visible;
  display: flex;
}

.glass {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(35px);
}

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(35px);
  border-radius: 20px;
  /* border: 2px solid rgba(255, 255, 255, 0.1); */
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  /* padding: 30px 30px 30px 30px; */
}


.content-wrapper {
  max-width: 750px;
  margin: 5rem auto;
  margin-right: 8%;
  background: var(--bg-light, rgba(255,255,255,0.7));
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
  backdrop-filter: blur(12px);
  transition: all 0.4s ease;
}

/* Dark mode */
:root.dark .content-wrapper {
  background: rgba(25, 25, 25, 0.5);
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.05);
  color: #f1f1f1;
}