:root {
  --bg:#0b0f14; 
  --fg:#cf0000; 
  --fg2:#cf9f00; 
  --accent:#00d9ff;
  --muted:#95a4b3;
}

*{box-sizing:border-box}
html,body{height:100%}
body {
  background: linear-gradient(to bottom,
              #2d0d0d 0%,
              #180000 50%,
              #0a0000 100%);
  color: var(--fg);

  background-repeat: no-repeat;   
  background-size: 100% 100%;     
  background-attachment: fixed;   
}
.center {
  min-height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:24px; padding:24px;
}

.btn,
.btn2 {
  --btn-color: var(--accent);
  --btn-border: color-mix(in oklab, var(--btn-color) 70%, transparent);
  --btn-border-hover: color-mix(in oklab, var(--btn-color) 82%, transparent);
  --btn-bg: color-mix(in oklab, var(--btn-color) 16%, transparent);
  --btn-bg-hover: color-mix(in oklab, var(--btn-color) 22%, transparent);
  --btn-shadow-rest-outer: color-mix(in oklab, var(--btn-color) 38%, transparent);
  --btn-shadow-rest-inner: color-mix(in oklab, var(--btn-color) 14%, transparent);
  --btn-shadow-hover-outer: color-mix(in oklab, var(--btn-color) 30%, transparent);
  --btn-shadow-hover-inner: color-mix(in oklab, var(--btn-color) 20%, transparent);
  appearance:none;
  border:1px solid var(--btn-border);
  background:var(--btn-bg);
  color:var(--btn-color);
  padding:12px 24px;
  border-radius:999px;
  cursor:pointer;
  letter-spacing:.5px;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
  box-shadow:0 0 0 0 var(--btn-shadow-rest-outer), inset 0 0 12px var(--btn-shadow-rest-inner);
  text-decoration:none;
}


.btn:hover,
.btn2:hover {
  transform:translateY(-1px);
  border-color:var(--btn-border-hover);
  background:var(--btn-bg-hover);
  box-shadow:0 0 24px 2px var(--btn-shadow-hover-outer), inset 0 0 16px var(--btn-shadow-hover-inner);
}

.btn:focus-visible,
.btn2:focus-visible {
  outline:none;
  border-color:var(--btn-border-hover);
  background:var(--btn-bg-hover);
  box-shadow:
    0 0 0 2px color-mix(in oklab, var(--btn-color) 35%, transparent),
    0 0 24px 2px color-mix(in oklab, var(--btn-color) 28%, transparent),
    inset 0 0 16px var(--btn-shadow-hover-inner);
}

.btn2,
.btn--red,
.btn.btn-details {
  align-self: start;
  text-align: center;
  --btn-color: var(--fg);
}

.small { color:var(--muted); font-size:14px }
a{color:var(--accent); text-decoration:none}