@import url('https://fonts.googleapis.com/css2?family=Quantico:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  --bg-color: #292929;
  --hr-color: #F1F1F1;
  --code-color: #F1F1F1;
  --font-color: #FFFFFF;
  --a-color: #0085FF;
  --border-color: #292929;
  --button-border-style: none;

  /* ===== Wallpaper controls ===== */
  --wallpaper-url: url("https://lipsum.app/random/640x360");
  --wallpaper-blur: 4px;                                         /* higher = blurrier */

  /* ===== Foreground shadow controls ===== */
  --shadow-soft: 0 0 10px rgba(0, 0, 0, 0.3);      /* box-shadow for buttons/avatar */
  --shadow-text: 0 0 10px rgba(0, 0, 0, 0.3);       /* text-shadow for readability */
  --shadow-band: 0 0 20px rgba(0, 0, 0, 0.6);

  /* ===== Center band controls ===== */
  --band-blur: 6px;                 /* stronger blur behind content */
  --band-bg: rgba(0, 0, 0, 0.25);              /* stronger darken behind content */
  --band-width: min(480px, 90%);     /* width of the frosted band */

  /* ===== Button frosted-glass controls ===== */
  --button-blur: 12px;                    /* blur behind the button */
  --button-bg: rgba(0, 0, 0, 0.50);   /* semi-transparent fill (alpha = opacity) */
}

/* Change font */
body, body * {
    font-family: 'Quantico', system-ui, sans-serif !important;
}

/* Change avatar to rounded corners */
.avatar {
    border-radius: 10px !important;
    object-fit: cover;
    box-shadow: var(--shadow-soft);
}

/* Uniform frosted buttons */
a.button,
a.button[class*="button-"] {
    background: var(--button-bg) !important;         /* was solid --bg-color; now semi-transparent */
    background-image: none !important;
    color: var(--font-color) !important;
    border: none !important;
    border-radius: 10px;
    padding: 12px 18px;
    -webkit-backdrop-filter: blur(var(--button-blur)) !important;
    backdrop-filter: blur(var(--button-blur)) !important;
    box-shadow: var(--shadow-soft);
    text-shadow: none;
}

/* Force consistent white icons */
a.button .icon {
    filter: brightness(0) invert(1);
}

/* Text shadow on foreground text only (headings / footer / bio) */
h1, p, .bio {
    text-shadow: var(--shadow-text);
}

/* Image layer: blurred, sits behind everything */
body::before {
  content: "";
  position: fixed;
  inset: -20px;                 /* bleed past edges so blur has no visible borders */
  z-index: -1;
  background: var(--wallpaper-url) center / cover no-repeat;
  filter: blur(var(--wallpaper-blur));
}

/* Center frosted band: stronger blur + darken behind the content column */
body::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--band-width);
  z-index: -1;
  -webkit-backdrop-filter: blur(var(--band-blur));
  backdrop-filter: blur(var(--band-blur));
  background: var(--band-bg);
  box-shadow: var(--shadow-band);
}