/* ==========================================================================
   RTU Monitoring Dashboard — style.css
   Dark "Core Framework"-style theme: near-black bg, purple aurora glow,
   gradient headings, glass cards, indigo accents.
   Works with existing markup/classes/IDs. No HTML/JS changes required.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
  /* Base surfaces (dark) */
  --bg: #08080e;
  --card-bg: rgba(255,255,255,.045);
  --card-bg-2: rgba(255,255,255,.02);
  --glass: rgba(18,18,28,.55);
  --border: rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.16);

  /* Text */
  --text: #f4f5fb;
  --text-2: #d3d6e4;
  --text-muted: #9aa0b4;
  --text-faint: #6d7288;

  /* Brand / accent (blue → violet, with a pink spark) */
  --accent: #6d78ff;
  --accent-2: #a855f7;
  --accent-soft: rgba(109,120,255,.16);
  --accent-grad: linear-gradient(135deg, #5b6cff 0%, #a855f7 100%);
  --heading-grad: linear-gradient(90deg, #6d8bff 0%, #a06bff 55%, #c96bff 100%);
  --spark: #ff4d79;

  /* Semantic (tuned for dark) */
  --on: #34d399;    --on-bg: rgba(52,211,153,.15);
  --off: #94a3b8;   --off-bg: rgba(148,163,184,.14);
  --warn: #fbbf24;  --warn-bg: rgba(251,191,36,.15);
  --err: #fb7185;   --err-bg: rgba(251,113,133,.16);

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 12px 30px rgba(0,0,0,.45);
  --glow: 0 10px 30px rgba(124,58,237,.28);
  --radius: 16px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --ring: 0 0 0 3px rgba(109,120,255,.35);
  --trans: 200ms cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Near-black with a purple aurora glowing up from the bottom-centre. */
  background:
    radial-gradient(1000px 560px at 50% 118%, rgba(138,74,243,.50) 0%, rgba(79,70,229,.20) 34%, transparent 68%),
    radial-gradient(760px 420px at 100% -12%, rgba(109,120,255,.16) 0%, transparent 60%),
    radial-gradient(680px 420px at 0% -6%, rgba(168,85,247,.12) 0%, transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }
::selection { background: rgba(168,85,247,.32); color: #fff; }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); }

/* ------------------------------- Header --------------------------------- */
.app-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,10,18,.6);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 14px 28px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px;
}
.app-header .title-block { position: relative; padding-left: 16px; }
.app-header .title-block::before {
  content: ""; position: absolute; left: 0; top: 3px; bottom: 3px;
  width: 5px; border-radius: 999px; background: var(--accent-grad);
  box-shadow: 0 0 16px rgba(124,58,237,.6);
}
.app-header .title-block h1 {
  margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.02em;
  background: var(--heading-grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.app-header .title-block .device-id { color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }
.app-header .title-block .device-id span { font-weight: 600; color: var(--text-2); }

.header-status { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.status-item { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.status-item .status-label { color: var(--text-faint); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.status-item .status-value { font-weight: 600; font-size: 13px; color: var(--text-2); }

.nav-links { display: flex; gap: 8px; }
.nav-links a {
  padding: 8px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  color: var(--text-2); font-weight: 600; font-size: 13px;
  background: rgba(255,255,255,.04); transition: var(--trans);
}
.nav-links a:hover { border-color: var(--accent); color: #fff; transform: translateY(-1px); }
.nav-links a.active {
  background: var(--accent-grad); color: #fff; border-color: transparent;
  box-shadow: var(--glow);
}

/* Connection status pill + live indicator */
.conn-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px;
  border-radius: var(--radius-pill); font-weight: 700; font-size: 12px; letter-spacing: .02em;
  border: 1px solid transparent;
}
.conn-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent), 0 0 10px currentColor; }
.conn-CONNECTED   { color: var(--on);   background: var(--on-bg);   border-color: color-mix(in srgb, var(--on) 40%, transparent); }
.conn-CONNECTING,
.conn-RECONNECTING{ color: var(--warn); background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.conn-DISCONNECTED{ color: var(--err);  background: var(--err-bg);  border-color: color-mix(in srgb, var(--err) 40%, transparent); }

.live-indicator { display: inline-flex; align-items: center; gap: 7px; color: var(--on); font-weight: 700; font-size: 12px; }
.live-indicator .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--on); box-shadow: 0 0 10px var(--on); animation: pulse 1.5s infinite; }
.live-indicator.stale { color: var(--warn); }
.live-indicator.stale .pulse { background: var(--warn); box-shadow: none; animation: none; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(52,211,153,.5); }
  70% { box-shadow: 0 0 0 9px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

/* ------------------------------- Layout --------------------------------- */
main { padding: 26px 28px 60px; max-width: 1440px; margin: 0 auto; }

.stale-banner {
  display: none; align-items: center; gap: 10px;
  background: rgba(251,191,36,.1); color: #fcd34d;
  border: 1px solid rgba(251,191,36,.35); border-left: 4px solid #fbbf24;
  padding: 13px 18px; border-radius: var(--radius-sm); margin-bottom: 18px;
  font-weight: 600; box-shadow: var(--shadow-sm);
}
.stale-banner.show { display: flex; }
#conn-banner { background: rgba(251,113,133,.1); color: #fda4af; border-color: rgba(251,113,133,.4); border-left-color: #fb7185; }

.section { margin-bottom: 34px; animation: fadeUp .5s ease both; }
.section > h2 {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-muted); font-weight: 700; margin: 0 0 16px; border: 0;
}
.section > h2::before { content: ""; width: 18px; height: 4px; border-radius: 999px; background: var(--accent-grad); box-shadow: 0 0 12px rgba(124,58,237,.5); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --------------------------- Measurement cards -------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }

.measure-card {
  position: relative;
  background: linear-gradient(180deg, var(--card-bg), var(--card-bg-2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.measure-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent-grad); opacity: .95; }
.measure-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md), 0 0 0 1px rgba(124,58,237,.25); border-color: var(--border-strong); }
.measure-card .m-name { color: var(--text-muted); font-size: 12.5px; font-weight: 600; }
.measure-card .m-value {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 30px; font-weight: 700; letter-spacing: -0.01em; margin: 8px 0 2px;
  color: #fff; line-height: 1.1; transition: color var(--trans);
}
.measure-card .m-value.unavailable { color: var(--err); font-size: 20px; }
.measure-card .m-unit { color: var(--text-muted); font-size: 12px; font-weight: 600; }
.measure-card .m-updated { color: var(--text-faint); font-size: 11px; margin-top: 10px; }
.unit-note { color: var(--warn); font-size: 11px; font-weight: 600; }

/* --------------------------- Charger section ---------------------------- */
.charger-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.charger-item {
  background: linear-gradient(180deg, var(--card-bg), var(--card-bg-2));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.charger-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.charger-item .c-label { color: var(--text-muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.charger-item .c-value { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 22px; font-weight: 600; margin-top: 6px; color: #fff; }

.mode-badge { display: inline-block; padding: 5px 14px; border-radius: var(--radius-pill); font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.mode-OFF    { background: var(--off-bg);      color: var(--off); }
.mode-FLOAT  { background: var(--accent-soft); color: #a9b2ff; }
.mode-BOOST  { background: var(--on-bg);       color: var(--on); }
.mode-UNKNOWN{ background: var(--warn-bg);     color: var(--warn); }

/* --------------------------- Digital grid ------------------------------- */
.digital-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.digital-card {
  background: linear-gradient(180deg, var(--card-bg), var(--card-bg-2));
  border: 1px solid var(--border); border-left: 4px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 12px 14px; box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.digital-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.digital-card .d-info .d-number { font-weight: 700; font-size: 13.5px; color: var(--text); }
.digital-card .d-info .d-desc { color: var(--text-muted); font-size: 11.5px; margin-top: 1px; }
.digital-card.spare { opacity: .55; }

.status-badge { padding: 4px 11px; border-radius: var(--radius-pill); font-weight: 700; font-size: 11.5px; letter-spacing: .03em; white-space: nowrap; border: 1px solid transparent; }
.status-ON      { background: var(--on-bg);   color: var(--on);   border-color: color-mix(in srgb, var(--on) 35%, transparent); }
.status-OFF     { background: var(--off-bg);  color: var(--off); }
.status-UNKNOWN { background: var(--warn-bg); color: var(--warn); }
.status-ERR     { background: var(--err-bg);  color: var(--err);  border-color: color-mix(in srgb, var(--err) 35%, transparent); }

.digital-card.st-ON      { border-left-color: var(--on); }
.digital-card.st-OFF     { border-left-color: var(--off); }
.digital-card.st-UNKNOWN { border-left-color: var(--warn); }
.digital-card.st-ERR     { border-left-color: var(--err); }

/* ------------------------------- Tables --------------------------------- */
.table-wrap {
  overflow-x: auto;
  background: linear-gradient(180deg, var(--card-bg), var(--card-bg-2));
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
th, td { padding: 12px 16px; text-align: left; white-space: nowrap; }
thead th {
  background: rgba(255,255,255,.05); color: var(--text-muted);
  font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  position: sticky; top: 0; z-index: 1; border-bottom: 1px solid var(--border-strong);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
tbody td { border-bottom: 1px solid var(--border); color: var(--text-2); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--trans); }
tbody tr:nth-child(even) { background: rgba(255,255,255,.02); }
tbody tr:hover { background: var(--accent-soft); }
td:not(.na) { font-family: 'JetBrains Mono', ui-monospace, monospace; }
td.na { color: var(--err); font-weight: 700; font-family: 'Inter', sans-serif; }

.live-table-wrap { max-height: 360px; overflow-y: auto; }
.live-table-wrap tbody tr:first-child { animation: rowIn .4s ease; }
@keyframes rowIn { from { background: var(--accent-soft); } to { background: transparent; } }

/* ------------------------------ Controls -------------------------------- */
.controls {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px;
  background: linear-gradient(180deg, var(--card-bg), var(--card-bg-2));
  border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 18px;
  box-shadow: var(--shadow-sm); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.control { display: flex; flex-direction: column; gap: 6px; }
.control label { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.control input {
  padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 10px;
  font-size: 13px; font-family: inherit; color: var(--text); background: rgba(255,255,255,.05);
  transition: var(--trans);
}
.control input::placeholder { color: var(--text-faint); }
.control input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
/* make native date/time picker icon visible on dark */
.control input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.7); }

button {
  padding: 10px 18px; border: none; border-radius: 10px; cursor: pointer;
  font-weight: 700; font-size: 13px; font-family: inherit;
  background: var(--accent-grad); color: #fff; box-shadow: var(--glow);
  transition: var(--trans);
}
button:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(124,58,237,.42); }
button:active { transform: translateY(0); }
button.secondary { background: rgba(255,255,255,.05); color: var(--text-2); border: 1px solid var(--border-strong); box-shadow: none; }
button.secondary:hover { border-color: var(--accent); color: #fff; }
button:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
button:focus-visible { outline: none; box-shadow: var(--ring); }

.pagination { display: flex; align-items: center; gap: 14px; margin-top: 16px; font-size: 13px; color: var(--text-muted); }
#page-info { font-weight: 600; color: var(--text-2); }

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 820px) { .header-status { gap: 14px; } }
@media (max-width: 640px) {
  .app-header { flex-direction: column; align-items: flex-start; padding: 14px 18px; }
  main { padding: 18px 14px 44px; }
  .measure-card .m-value { font-size: 26px; }
  .nav-links { width: 100%; }
}
/* ==========================================================================
   Authentication pages (login / register) — reuses the dark theme above
   ========================================================================== */
.auth-body {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 18px;
}
.auth-wrap { width: 100%; max-width: 440px; }

.auth-card {
  background: linear-gradient(180deg, var(--card-bg), var(--card-bg-2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(124,58,237,.12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 34px 32px 28px;
}

.auth-brand {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-bottom: 18px;
}
.auth-logo { height: 44px; width: auto; object-fit: contain; }
.auth-product {
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-muted);
}

.auth-title {
  margin: 4px 0 4px; text-align: center;
  font-size: 24px; font-weight: 800; letter-spacing: -0.02em;
  background: var(--heading-grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.auth-subtitle { margin: 0 0 20px; text-align: center; color: var(--text-muted); font-size: 13px; }

.auth-alert {
  border-radius: var(--radius-sm); padding: 11px 14px; margin-bottom: 16px;
  font-size: 13px; font-weight: 600; border: 1px solid transparent;
}
.auth-alert.error   { background: var(--err-bg);  color: var(--err);  border-color: color-mix(in srgb, var(--err) 40%, transparent); }
.auth-alert.success { background: var(--on-bg);   color: var(--on);   border-color: color-mix(in srgb, var(--on) 40%, transparent); }

.auth-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.auth-field label { font-size: 11.5px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; }
.auth-field input {
  width: 100%; padding: 12px 14px; font-size: 14px; font-family: inherit; color: var(--text);
  background: rgba(255,255,255,.05); border: 1px solid var(--border-strong); border-radius: 10px;
  transition: var(--trans);
}
.auth-field input::placeholder { color: var(--text-faint); }
.auth-field input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); background: rgba(255,255,255,.07); }

.auth-input-wrap { position: relative; display: flex; align-items: center; }
.auth-input-wrap input { padding-right: 46px; }
.auth-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  background: transparent; color: var(--text-muted);
  border: none; border-radius: 8px; box-shadow: none; cursor: pointer;
  transition: color var(--trans), background var(--trans);
}
.auth-toggle:hover { color: #fff; background: rgba(255,255,255,.06); transform: translateY(-50%); }
.auth-toggle svg { width: 18px; height: 18px; display: block; }

.auth-submit {
  width: 100%; margin-top: 6px; padding: 12px 18px;
  font-size: 14px; font-weight: 700; border: none; border-radius: 10px; cursor: pointer;
  background: var(--accent-grad); color: #fff; box-shadow: var(--glow);
  transition: var(--trans);
}
.auth-submit:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(124,58,237,.42); }
.auth-submit:active { transform: translateY(0); }
.auth-submit:focus-visible { outline: none; box-shadow: var(--ring); }

.auth-switch { margin: 18px 0 0; text-align: center; font-size: 13px; color: var(--text-muted); }
.auth-switch a { font-weight: 700; }

.auth-footer { margin-top: 18px; text-align: center; font-size: 12px; color: var(--text-faint); }
.auth-footer strong { color: var(--text-2); }

/* Logout link in the dashboard nav (subtle, matches nav pills) */
.nav-links a.logout { color: var(--err); border-color: color-mix(in srgb, var(--err) 35%, transparent); }
.nav-links a.logout:hover { background: var(--err-bg); color: var(--err); border-color: var(--err); }

/* ==========================================================================
   Login page background only (.login-bg)
   Premium futuristic environment: deep navy/charcoal base, soft edge glows
   (indigo / electric-blue / magenta / violet), faint distant light-waves,
   a calm glow behind the card, and an ultra-subtle grain for depth.
   Purely a background change — the login card and all UI stay untouched.
   ========================================================================== */
.login-bg {
  background:
    /* fine ambient grain (baked low alpha, tiled) — adds texture/depth */
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'%20opacity='0.05'/%3E%3C/svg%3E"),
    /* faint distant light-waves (very soft, diagonal) */
    radial-gradient(1400px 340px at 24% 20%, rgba(74,86,205,.10) 0%, transparent 68%),
    radial-gradient(1200px 300px at 80% 82%, rgba(150,60,150,.08) 0%, transparent 70%),
    /* atmospheric corner glows — brighter toward the outer edges */
    radial-gradient(780px 580px at 4% -8%,  rgba(66,74,168,.30) 0%, transparent 60%),   /* indigo, top-left */
    radial-gradient(740px 540px at 104% -8%, rgba(38,98,192,.17) 0%, transparent 60%),  /* electric blue, top-right */
    radial-gradient(860px 640px at 106% 108%, rgba(158,52,146,.24) 0%, transparent 62%),/* magenta, bottom-right */
    radial-gradient(860px 640px at -8% 108%, rgba(104,54,198,.22) 0%, transparent 62%), /* violet, bottom-left */
    /* calm, soft glow directly behind the card (keeps it the focal point) */
    radial-gradient(620px 470px at 50% 46%, rgba(124,92,240,.10) 0%, rgba(84,60,196,.04) 38%, transparent 70%),
    /* deep vignette rising from the bottom for cinematic depth */
    radial-gradient(1300px 900px at 50% 122%, rgba(9,8,26,.55) 0%, transparent 72%),
    /* deep navy-charcoal base (never pure black) */
    linear-gradient(160deg, #0a0b15 0%, #08090f 46%, #0a0813 100%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 180px 180px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed;
}