:root {
  --nfl: #1a3a5c;
  --nfl-light: #2e6da4;
  --nfl-accent: #c8102e;
  --gold: #e8a838;
  --dark: #0d0f12;
  --dark2: #161920;
  --dark3: #1e2229;
  --surface: #252a33;
  --surface2: #2e3440;
  --text: #f0f2f5;
  --text2: #a8b2be;
  --text3: #6b7684;
  --border: rgba(255,255,255,0.07);
  --font-head: 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--dark);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.6;overflow-x:hidden;}
a{color:inherit;text-decoration:none;transition: all 0.5s ease 0s;}

/* -- HEADER -- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(13,15,18,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 clamp(1rem,4vw,3rem);
}
.header-inner {
  max-width: 1280px; margin: 0 auto;
  height: 60px;
}
.header-inner .logo img {
	max-width:200px;
	height:auto;
	margin-top:5px;
	}
header nav ul {
  float: right;
  margin-right: 20px;
}

header nav ul li {
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}

header nav ul li a {
  font-family: var(--font-head);
  font-size: 15px; font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0 1rem;
  height: 60px; display: flex; align-items: center;
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  color: var(--text2);
  text-transform: uppercase;
}

header nav a.active,
header nav a:hover {
   color: var(--text); border-bottom-color: var(--nfl-light);
}

header nav .checkbtn {
  font-size: 22px;
  color: white;
  float: right;
  line-height: 55px;
  margin-right: 18px;
  cursor: pointer;
  display: none;
}

header nav #check {
  display: none;
}


/* Responsive media query code for small screen */
@media (max-width: 767px) {
  header nav .checkbtn {
    display: block;
  }

  header nav label.logo {
    font-size: 22px;
  }

  header nav ul {
 	background:var(--surface);
    position: fixed;
    width: 100%;
    /*height: 100vh;*/
    top: 60px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }

  header nav ul li {
    display: block;
    /*margin: 50px 0;*/
    line-height: 30px;
  }
  header nav a:hover,
  header nav a.active {
    background: none;
  }

  header nav #check:checked~ul {
    left: 0;
  }
}
img {max-width:100%; height:auto}

/* -- LAYOUT -- */
.layout{max-width:1280px;margin:0 auto;padding:clamp(2rem,4vw,3rem) clamp(1rem,4vw,3rem);display:grid;grid-template-columns:1fr 280px;gap:3rem;}
@media(max-width:900px){.layout{display:block;grid-template-columns:1fr;}}

.table-container {overflow-x: auto;}
/* -- AD PLACEHOLDER -- */
.ad-slot {
  background: var(--dark2);
  border: 1px dashed var(--border);
  display:block;
  border-radius: 8px;
  text-align: center;
  margin-bottom:15px;
}

/* -- BREADCRUMB -- */
.breadcrumb {
  background: var(--dark2);
  border-bottom: 1px solid var(--border);
  padding: 0.65rem clamp(1rem,4vw,3rem);
}
.breadcrumb-inner {
  max-width: 1280px; margin: 0 auto;
  font-size: 12.5px; color: var(--text3);
  display: flex; align-items: center; gap: 0.5rem;
}
.breadcrumb-inner a { color: var(--text2); }
.breadcrumb-inner a:hover { color: var(--text3); }
.breadcrumb-sep { color: var(--text2); opacity: 0.4; }

/* -- FOOTER -- */
.footer-brand .logo img, .footer-inner .logo img {max-width:200px; height:auto}

.center-block {
	margin-left:auto;
	margin-right:auto;
	display:block;
	float:none;
	}