/*
 * BSMS Web
 * Copyright © 2026 Jellyfish Jelly
 * SPDX-License-Identifier: AGPL-3.0-only
 */
:root{
  --red:#BB001E;
  --red-h:#d10022;
  --bg:#000;
  --fg:#fff;
  --fg2:rgba(255,255,255,0.7);
  --border:rgba(255,255,255,0.15);
  --font:'Patrick Hand',cursive;
}

html,body{
  margin:0;
  width:100%;
  height:100%;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  overflow-y: auto;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 20px;
}

h1 { font-size: 48px; color: var(--red); margin-bottom: 10px; }
h2 { font-size: 28px; margin-top: 30px; margin-bottom: 10px; border-bottom: 2px solid var(--border); padding-bottom: 5px;}
p, li { font-size: 20px; color: var(--fg2); line-height: 1.6; }
ul { margin-top: 10px; }

.btn {
  display: inline-block; font-family: var(--font); font-size: 19px;
  padding: 10px 18px; border-radius: 12px; border: 2px solid var(--red);
  background: var(--red); color: #fff; cursor: pointer;
  transition: transform .15s, background .15s;
  text-decoration: none; text-align: center; margin-bottom: 30px;
}
.btn:hover { background: var(--red-h); transform: scale(1.03); }

/* Offline Banner */
#offlineBanner {
  position: fixed; top: 0; left: 0; width: 100%; background: #ef4444; color: #fff;
  text-align: center; padding: 10px; font-family: var(--font); font-size: 18px;
  z-index: 10000; transform: translateY(-100%); transition: transform 0.3s ease;
}
#offlineBanner.show { transform: translateY(0); }