/* ============================
   GLOBAL STYLES
============================ */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0px;
  align-items: center;
  background: var(--color-bg-white);
  /* filter: invert(); */
}

.typed-cursor {
  display: none;
}


/* ============================
   LAYOUT STRUCTURE
============================ */

.margin {
  display: flex;
  padding: 0rem 6.25rem;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  
}

.ui-area {
  display: flex;
  padding: 5rem 0rem;
  flex-direction: column;
  justify-content: center;
  gap: 6.25rem;
  align-self: stretch;
  /* overflow: hidden; */
}


/* ============================
   NAVIGATION
============================ */

#nav-container {
  position: sticky;
}

nav,
#navcontents {
  overflow: visible !important;
  z-index: 1000; /* Or higher */
}


/* ============================
   RESPONSIVE ENHANCEMENTS
============================ */

/* Tablet View (768px - 1024px) */
@media screen and (max-width: 1024px) {
  .margin {
    padding: 0 2rem;
  }

  .ui-area {
    padding: 4rem 0;
    gap: 4rem;
  }

  body {
    font-size: 1rem;
  }

  nav,
  #navcontents {
    overflow: visible !important;
    z-index: 1000; /* Or higher */
  }
}

/* Mobile View (up to 480px) */
@media screen and (max-width: 480px) {

  .margin {
    padding: 0 1rem;
  }

  .ui-area {
    padding: 1rem 0;
    gap: 1rem;
  }

  body {
    font-size: 0.95rem;
  }

  nav,
  #navcontents {
    overflow: visible !important;
    z-index: 1000; /* Or higher */
  }
}