* {
    box-sizing: border-box;

}
html {
    font-size: 0.875em;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 1em;
    }
}




body {
    background-color: #fff;
    color: #000000;
    margin-bottom: 3.75rem;
    
    /* color: #eee;
    background: #282828; */
}

h1,
h2,
h3,
h4 {
    font-family: "Robot";
}

h5 {
    font-family: sans-serif;
    font-size: 1rem;
    font-weight: bold;
}

/* Navbar */

.logo-container {
    width: 8em;
}

.navbar-item:focus {
    background-color: #848484;
}

.nav-link {
    font-family: 'Roboto', sans-serif;
}
.nav-link:hover {
    cursor: pointer;
    background-color: #DBDBDB;
}

/* Content Div */

#contentDiv {
    padding: 5px;
    /* margin: 30px; */
}

#contentDiv h1 {
    text-align: center;
}

#userPicksTable {
    text-align: center;
}

#submitButton {
    border:#121212;
    -webkit-appearance: none;
    color:#000000;

}

/* Admin Portal */

.button-row {
    padding: 2rem;
}

@media (prefers-color-scheme: dark) {
    body {
      color: #eee;
      background: #121212 !important;
    }
  
    a {
      color: #809fff;
    }
    .gameCard {
        border: 1px solid black;
        border-radius: 5px;
        /* background-color: #ededed; */
        /* background-image: linear-gradient(to bottom right, #ededed, #bdbdbd); */
        background-image: linear-gradient(to bottom right, #282828, #3f3f3f) !important;
        max-width: 300px;
        width: 100%;
        margin: 1em;
        padding: 1em;
    }

    table {
        background-color: #3f3f3f !important;
        color: white;
        border: 1px solid white;
    }
    .head {
        color: #eee !important;
        background: #121212 !important;
    }
    .nav-link {
        color: white !important;
    }
    .nav-link:hover {
        cursor: pointer;
        background-color: #3f3f3f !important;
    }

    #submitButton {
        background: #282828;
        color: white;
        -webkit-appearance: none;

    }
    .leaguePicksButton {
        background: #282828;
        color: white;
        -webkit-appearance: none;

    }
  }

/* Picksheet ticker */
.gm-ticker {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    font-size: 0.9rem;
    background: #fafafa;
  }
  .gm-ticker-track {
    display: flex;
    gap: .75rem;
    align-items: center;
    padding: .35rem .75rem;
  }
  .gm-ticker-item {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    text-decoration: none;
  }
  .gm-team { font-weight: 600; }
  .gm-score { font-variant-numeric: tabular-nums; }
  .gm-meta { color: #666; font-size: .8rem; margin-left: .35rem; }
  .gm-dot { color: #bbb; margin: 0 .35rem; }

  
  /* replace your old .head margin hack */
  .head { margin-bottom: 0; }
  
  /* dynamic top offset (JS below will set --nav-h) */
  :root { --nav-h: 64px; }   /* fallback */
  .gm-ticker {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    z-index: 1029;               /* just under navbar */
    white-space: nowrap;
    overflow: hidden;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    background: #fafafa;
    font-size: 0.9rem;
  }
  
  /* body padding depending on ticker visibility */
  body.with-ticker { padding-top: calc(var(--nav-h) + 36px); }
  body.no-ticker   { padding-top: var(--nav-h); }
  
  /* keep navbar above ticker */
  nav.navbar.fixed-top { z-index: 1030; }
  
  /* dark mode polish */
  @media (prefers-color-scheme: dark) {
    .gm-ticker { background:#111; border-color:#333; }
    .gm-meta { color:#aaa; }
    .gm-dot { color:#444; }
  }
  /* Ticker shell lives under the fixed navbar (you already set this) */
  .gm-ticker { 
    white-space: nowrap; 
    overflow: hidden; 
    border-top: 1px solid #eee; 
    border-bottom: 1px solid #eee; 
    background: #fafafa; 
    font-size: .9rem;
  }
  
  /* The moving strip */
  .gm-ticker-track {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    will-change: transform;
  }
  
  /* when .run is added, the keyframes kick in with dynamic vars */
  .gm-ticker-track.run {
    animation: gm-marquee var(--gm-dur, 40s) linear infinite;
  }
  
  /* pause on hover for sanity */
  .gm-ticker:hover .gm-ticker-track { animation-play-state: paused; }
  
  /* little separators and meta styling */
  .gm-ticker .gm-dot { margin: 0 8px; opacity: .4; }
  .gm-ticker .gm-score { font-weight: 600; margin: 0 6px; }
  .gm-ticker .gm-meta { margin-left: 8px; opacity: .7; }
  
  /* dark mode */
  @media (prefers-color-scheme: dark) {
    .gm-ticker { background:#111; border-color:#333; }
    .gm-ticker .gm-dot { color:#444; }
    .gm-ticker .gm-meta { color:#aaa; }
  }
  
  /* the actual motion; distance set via CSS var from JS */
  @keyframes gm-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * var(--gm-dist, 100%))); }
  }
  
  /* end ticker */