/* =========================================================
   BASE STYLES — colours, fonts, resets
   =========================================================
   This is the single source of truth for look and feel.
   Change fonts and colours here and they flow through the app.

   For layout and components, go to the relevant app stylesheet:
   - Desktop (dashboard, events, performance, control):
       static/desktopApp.css
   - Mobile (not yet built):
       static/mobileApp.css  (create when mobile work begins)
   ========================================================= */
/* #region BASE STYLES */
body {
  font-family: articulat-cf, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 52px;
  height: 100vh;
  background: #000000;
  margin: 0;
}

label {
  color: white
}

h1 {
  color: white;
  margin-bottom: 25px;
  font-weight: 400;
  font-size: 28px;
  text-align: flex-start;
}

h2 {
  color: white;
  margin-bottom: 25px;
  font-weight: 400;
  font-size: 24px;
  text-align: flex-start;
}

h3 {
  color: white;
  margin-top: 5px
}

h4{
  color: white;
  font-weight: 300;
  margin-top: 5px
}

a {
  text-decoration: none;
  color: #ffffff;
}

a:hover {
  text-decoration: none;
  color: #29e490;
}

li{
  color: white
}

.hidden {
    display: none;
}
/* #endregion */

@media (max-width: 1150px) { 
/* all pages (login, desktop, mobile) — heading sizes at tablet landscape */
  h1 {
    font-size: 21px;
  }
  h2 {
    font-size: 18px;
  }
  h3 {
    font-size: 16px
  }
}

@media (max-width: 768px) { 
/* all pages (login, desktop, mobile) — body text size and top padding at tablet portrait */
  p {
    font-size: 12px;
  }
  body {
    padding-top: 80px;
  }
}