/* ===============================
   VARIÁVEIS
================================ */
:root {
  --red-main: #c10000;
  --red-hover: #ff0000;
  --bg-main: #0b0b0b;
  --bg-panel: #121212;
  --bg-hover: #1e1e1e;
  --text-main: #eaeaea;
}

/* ===============================
   FORÇAR DARK MODE
================================ */
@media (prefers-color-scheme: dark) {
  html,
  body {
    background-color: var(--bg-main) !important;
    color: var(--text-main) !important;
  }
}

html,
body,
html.dark-mode,
body.dark-mode {
  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
}
/* ===============================
   BARRA SUPERIOR FIXA (LOGO)
================================ */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background-color: #1E1F22;
  background-image: url("https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=375,fit=crop,q=95/Y4LvG5wK50U412B5/logo-sem-fundo-YanJrggPx2UaB6vV.png"); /* MUDE AQUI */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 175px;
  z-index: 99999;
  border-bottom: 1px solid #222;
}

/* ===============================
   EMPURRAR APP PRA BAIXO
================================ */
body {
  padding-top: 120px !important;
}

/* ===============================
   ESCONDER HEADER ORIGINAL
================================ */
header {
  display: none !important;
}

/* ===============================
   BOTÕES
================================ */
button,
.btn,
.button,
input[type="submit"] {
  background-color: var(--red-hover) !important;
  border-color: var(--red-hover) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

button:hover,
.btn:hover {
  background-color: var(--red-main) !important;
}

/* ===============================
   LINKS
================================ */
a {
  color: var(--red-hover) !important;
  font-weight: bold; !important;
}