/* ==========================================================================
   Google Sans Typography (Regular 400 & Medium 500)
   ========================================================================== */

@font-face {
  font-family: 'Google Sans';
  src: url('../Fonts/GoogleSans-Regular.woff2') format('woff2'),
       url('../Fonts/GoogleSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Google Sans';
  src: url('../Fonts/GoogleSans-Medium.woff2') format('woff2'),
       url('../Fonts/GoogleSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Google Sans';
  src: url('../Fonts/GoogleSans-Bold.woff2') format('woff2'),
       url('../Fonts/GoogleSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* Headings default to Medium */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-main);
  font-weight: 500;
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-x: none;
}

body {
  background-color: var(--bg-black);
  /* Faint rounded gradient #142743 blue rising from bottom and soft upper aura */
  background-image: 
    radial-gradient(ellipse 130% 55% at 50% 100%, rgba(20, 39, 67, 0.55) 0%, rgba(20, 39, 67, 0.2) 45%, rgba(0, 0, 0, 0) 80%),
    radial-gradient(ellipse 85% 35% at 50% 0%, rgba(20, 39, 67, 0.28) 0%, rgba(0, 0, 0, 0) 70%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--text-primary);
  font-family: var(--font-main);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
  overscroll-behavior-x: none;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* Ambient Backdrops */
.ambient-glow {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(140px);
  z-index: 0;
  opacity: 0.18;
  max-width: 100vw;
  overflow: hidden;
}

.ambient-glow-top {
  top: -160px;
  right: 15%;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, var(--accent-blue) 0%, rgba(20, 39, 67, 0) 70%);
}

.ambient-glow-bottom {
  bottom: -180px;
  left: 10%;
  width: 650px;
  height: 650px;
  background: radial-gradient(circle, #142743 0%, rgba(0, 0, 0, 0) 75%);
}

@media (max-width: 768px) {
  .ambient-glow {
    filter: blur(90px);
    opacity: 0.14;
  }
  .ambient-glow-top {
    top: -100px;
    right: -10%;
    width: 320px;
    height: 320px;
  }
  .ambient-glow-bottom {
    bottom: -100px;
    left: -10%;
    width: 340px;
    height: 340px;
  }
}