:root{
  --bg:#0b3b66;
  --panel:#0f5a99;
  --accent:#78c0ff;
  --muted:#d6ecff;
  --card:#0c2a44;
  --pixel-border: 3px solid #07263a;
  --bs-link-color: #178db1;
  --bs-link-color-rgb: 23,141,177;
  --bs-link-hover-color: #1580a1;
  --bs-link-hover-color-rgb: 21,128,161;
}
.btn-primary {
    --bs-btn-bg: #178db1;
    --bs-btn-border-color: #178db1;
    --bs-btn-hover-bg: #1580a1;
    --bs-btn-hover-border-color: #1580a1;
    --bs-btn-active-bg: #10617a;
    --bs-btn-active-border-color: #10617a;
}
a {
    text-decoration: none !important;
}
.cursor-pointer {
    cursor: pointer;
}

body {
  background: #0a3962 url('/img/background-grid.png');
  color: var(--muted);
  min-height:100vh;
  padding-top:1rem;
  font-family: "Titillium Web", sans-serif;
  font-weight: 300;
  font-style: normal;
  
}
.bg-container {
    background: linear-gradient(180deg, #0b3b66 0%, #063151 100%);
}

/* Header / navbar */
.retro-navbar{
  background: linear-gradient(90deg, rgba(0,0,0,0.15), rgba(255,255,255,0.02));
  border-radius: 8px;
  padding: 0.5rem 1rem;
  box-shadow: 0 6px 18px rgba(2,20,35,0.35);
}

.pixel-art-font, .pixel-btn, .panel h4 {
  font-family: "Press Start 2P", monospace;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: none;
  font-smooth: never;
}

.brand {
  color: var(--accent1);
  letter-spacing: 1px;
  font-size: 18px;
  display:flex;
  align-items:center;
  gap:.6rem;
}

.brand .logo {
  width:36px;height:36px;
  border-radius:4px;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.15);
}

/* Pixel-like nav links */
.nav-link {
  color: var(--muted) !important;
  font-weight:700;
  text-transform:uppercase;
  font-size: 1.5rem;
  padding:.4rem .65rem;
  border-radius:4px;
}

.nav-link:hover{ background: rgba(255,255,255,0.03); }
.nav-link.active{ background: rgb(255 255 255 / 29%) }

/* Login card */
.login-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
  padding: .6rem;
  border-radius:8px;
  border: 1px solid rgba(255,255,255,0.04);
}

.pixel-btn {
  font-size:10px;
  padding: .375rem .65rem;
  text-transform:uppercase;
  letter-spacing:.6px;
}

/* Main content panels */
.panel {
  background-color: #123f65;
  border-radius: 8px;
  padding:1rem;
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: inset 0 -14px 40px rgba(0,0,0,0.12);
}

.panel h4 {
  color: var(--accent);
  margin-bottom:.6rem;
}

.pixel-list-item:hover {
  background-color: #178db1;
}
.pixel-list-item {
  background: linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
  padding:.6rem;
  margin-bottom:.45rem;
  border-radius:6px;
  display:flex;
  justify-content:space-between;
  gap:.6rem;
  align-items:center;
  border:1px solid rgba(0,0,0,0.12);
}

.date {
  color:#bfe8ff;
  min-width:90px;
  font-weight:700;
}

.event-text {
  color:var(--muted);
  font-size:13px;
  line-height:1.1;
}

/* responsive tweaks */
@media (max-width: 767.98px){
  .brand { font-size:12px; }
  .panel { padding:.8rem; }
  .pixel-btn { font-size:9px; }
}

.footer-menu {
    display: flex;
    align-items: flex-start;
    gap: var(--margin-large);
    justify-content: space-between;
}
.footer-menu > .menu-item {
    width: 100%;
}
.menu > li {
    list-style: none;
    margin: 0;
}

.footer-menu > .menu-item .sub-menu {
    display: flex;
    flex-direction: column;
    gap: var(--margin-small);
    margin-top: var(--margin-small);
    padding: 0;
}

.footer-menu > .menu-item .sub-menu li {
    list-style: none;
    margin: 0;
}
.menu > li:not(.menu-button):not(.menu-button-white) .item {
    display: block;
    cursor: pointer;
    max-width: max-content;
}
.radio {
    box-shadow: inset 0 -14px 40px rgb(0 0 0 / 10%);
    border: 2px solid rgb(52 52 52);
    background-color: #62a743; 
    color: #4f8734;
}
.radio-container i {
    font-size: 2rem;
    cursor: pointer;
}
.color-muted {
    color:var(--muted);
}