src/styles.css

body, html {
  margin: 0;
  padding: 0;
  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  background: url('/assets/background.jpg') no-repeat center center fixed;
  background-size: cover;
  transition: background-color 0.3s ease, color 0.3s ease;
   overflow-x: hidden !important;
}

/* Theme Support */
body.dark-theme {
  background-color: #0a0e16;
  color: #ffffff;
}

body.light-theme {
  background-color: #f8fafc;
  color: #1e293b;
}

/* Homepage specific background */
body.homepage-bg {
  background: url('/assets/coverimage.png') no-repeat center center fixed;
  background-size: cover;
}

@font-face {
  font-family: 'Roliana';
  src: url('/assets/font/Roliana-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* Enhanced Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

/* Code Elements */
code, pre, .code {
  font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', monospace;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Selection Styling */
::selection {
  background: rgba(0, 212, 255, 0.3);
  color: #ffffff;
}

::-moz-selection {
  background: rgba(0, 212, 255, 0.3);
  color: #ffffff;
}

/* Focus Outline Override */
*:focus {
  outline: 2px solid #00d4ff;
  outline-offset: 2px;
}

/* Enhanced Scrollbar for WebKit browsers */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #00d4ff 0%, #ff6b35 100%);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #0099cc 0%, #e55d2b 100%);
  background-clip: content-box;
}

/* Firefox Scrollbar */
html {
  scrollbar-width: thin;
  scrollbar-color: #1e3a8a rgba(0, 0, 0, 0.1);
}

/* Material Design Compatibility */
.mat-typography {
  font-family: 'Inter', sans-serif;
}

/* Utility Classes */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Animation Preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}