@import "icons.css";

@font-face {
font-family: 'Annapolis';
font-style: normal;
font-weight: 400;
src: local('Annapolis'), url('fonts/annapolis.woff') format('woff');
}

@font-face {
font-family: 'Annapolis Italic';
font-style: normal;
font-weight: 400;
src: local('Annapolis Italic'), url('fonts/annapolis-italic.woff') format('woff');
}

:root {
--nav-height: 100px;
--full-width: 1280px;
--background: #f8f9fa;
--triforce: #ffdf61;
--mlb-green: #00b03d;
--mlb-red: #bf0d3e;
--mlb-navy: #041e42;
--mlb-blue: #002d72;
}

* {
font-family: Arial, sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
}

html {
scroll-padding-top: var(--nav-height);
-webkit-text-size-adjust: 100%;
}

body {
background: var(--background);
padding-top: var(--nav-height);
min-height: 100vh;
overflow-x: hidden;
position: relative;
z-index: 1;
}

section, main, aside {
margin: 1.0rem auto 5.0rem auto;
}

/******* SPORTS *******/
.mlb {
color: ghostwhite;
text-shadow: 1px 1px 2.5px rgba(139,0,0,0.5);
background-color: darkred;
border-radius: 50%;
backdrop-filter: blur(5px);
}

.nba {
color: darkorange;
text-shadow: 1px 1px 2.5px black;
background-color: black;
border-radius: 50%;
backdrop-filter: blur(5px);
}

.nhl {
color: black;
text-shadow: 1.5px 1.5px 3px darkslategray;
backdrop-filter: blur(5px);
}

.nfl {
color: saddlebrown;
text-shadow: 1.5px 1.5px 3px darkgray;
backdrop-filter: blur(5px);
}

/******* HEADER *******/
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--nav-height);
background: var(--background);
display: flex;
align-items: center;
z-index: 1000;
border-bottom: .5rem solid var(--mlb-navy);
}

.frame {
width: 100%;
max-width: var(--full-width);
margin: 0 auto;
padding: 0 .75rem;
display: flex;
align-items: center;
gap: 1.5rem;
}

.frame div:first-child {
margin-right: auto;
}

.company {
display: flex;
align-items: center;
gap: .25rem;
}

.company-logo img {
height: 3.75rem;
width: auto;
}

.company-name {
margin: 0 .375rem -.375rem 0;
}

.company-name strong {
font-family: 'Annapolis', sans-serif;
font-size: 2.333rem;
line-height: 0;
}

.company-name em {
font-family: 'Annapolis Italic', sans-serif;
font-size: 1.333rem;
display: inline-block;
transform: scaleY(1.5);
-webkit-transform: scaleY(1.5);
-moz-transform: scaleY(1.5);
-ms-transform: scaleY(1.5);
-o-transform: scaleY(1.5);
padding: 0 3px 0 3px;
}

.company-name a {
text-decoration: none;
color: inherit;
padding: .25px;
}

.buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 100px;
row-gap: 3px;
padding-top: 1.0rem;
line-height: 0px;
}

.sign-in {
padding: 0.45rem 0.9rem;
background: var(--triforce);
border-radius: 9px;
color: #000000;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
text-transform: uppercase;
border: 1px solid black;
}

.sign-in:hover {
box-shadow: 0 0 8px rgba(0,0,0,0.6);
}

.sign-up {
color: #000000;
font-size: .8rem;
cursor: pointer;
white-space: nowrap;
background: none;
border: none;
}

.sign-up:hover {
text-decoration: underline;
}

.menu {
width: 30px;
height: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
}

.menu span {
width: 100%;
height: 3px;
background: #000000;
transition: all .3s ease;
transform-origin: center;
}

.menu.active span:nth-child(1) {
transform: translateY(10.5px) rotate(45deg);
}

.menu.active span:nth-child(2) {
opacity: 0;
}

.menu.active span:nth-child(3) {
transform: translateY(-10.5px) rotate(-45deg);
}

.mainmenu {
position: fixed;
right: calc((100% - var(--full-width)) / 2);
top: var(--nav-height);
width: max-content;
max-width: 90vw;
max-height: 0;
background: var(--background);
overflow: hidden;
border-width: 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.4);
transition: max-height .3s ease;
text-transform: uppercase;
z-index: 1001;
}

.mainmenu a, .menuitem {
display: block;
padding: 1.1rem;
color: #000;
text-decoration: none;
font-size: 1.0rem;
border-bottom: 1px solid black;
}

.mainmenu a:hover {
text-decoration: underline;
background: var(--triforce);
box-shadow: 0 0 6px rgba(0,0,0,0.9);
}

.mainmenu a:last-child, .menuitem:last-child {
border-bottom: none;
}

.mainmenu.active {
max-height: max-content;
border: 1px solid #000;
}

.menuitem {
cursor: pointer;
position: relative;
user-select: none;
}

.menuitem.active {
padding-bottom: 0px;
}

.menuitem.active .dropdown i {
transform: rotate(180deg);
}

.dropdown {
display: flex;
justify-content: space-between;
align-items: center;
}

.dropdown i {
font-style: normal;
font-size: 1.2rem;
}

.submenu {
max-height: 0;
overflow: hidden;
transition: max-height .3s ease;
}

.submenu.active {
max-height: max-content;
margin-top: .925rem;
border-top: 1px solid #000000;
}

.inactive {
filter: grayscale(60%);
pointer-events: none;
user-select: none;
cursor: not-allowed;
opacity: 0.4;
}

/******* HOME PAGE *******/
.gridlines {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
opacity: .05;
background-image: repeating-linear-gradient(90deg, transparent, transparent 60px, var(--mlb-red) 60px, var(--mlb-red) 61px), 
repeating-linear-gradient(0deg, transparent, transparent 60px, var(--mlb-red) 60px, var(--mlb-red) 61px);
}

.start::before, .dark-box::before, .banner::before, .player::before {
content: "";
position: absolute;
pointer-events: none;
inset: 0;
z-index: 0;
opacity: .2;
background-image: repeating-linear-gradient(90deg,transparent,transparent 60px,var(--mlb-red) 60px,var(--mlb-red) 61px),
repeating-linear-gradient(0deg,transparent,transparent 60px,var(--mlb-red) 60px,var(--mlb-red) 61px);
}

.container {
max-width: var(--full-width);
margin: 0 auto;
background: transparent;
box-shadow: 0 .625rem 3.125rem rgba(0,0,0,0.25);
overflow: hidden;
}

.wide {
width: 90%;
max-width: 1080px;
margin-inline: auto;
}

.home {
width: 90%;
max-width: 900px;
margin-inline: auto;
}

.graph {
float: right;
width: auto;    
max-height: 9.5rem;
border-radius: 0.5rem;
border: .15rem solid rgba(0, 0, 0, .1);
margin: 0 0 .25rem .75rem;
}

.headline {
margin-top: 2.0rem;
text-align: center;
}

.headline h1 {
font-size: 1.25rem;
display: inline;
}

.headline i {
font-size: 5.25rem;
margin: -.5rem 1.5rem .5rem .5rem;
float: right;
color: var(--mlb-navy);
text-shadow: 4px 3px 0px var(--triforce);
-webkit-text-stroke-color: var(--background);
-webkit-text-stroke-width: 3px;
}

.highlight {
display: inline;
color: var(--mlb-red);
font-size: 1.333rem;
font-weight: 600;
text-transform: uppercase;
text-decoration: underline;
}

.full-text {
text-align: left;
margin-top: 1.0rem;
line-height: 1.333rem;
}

.preview-text, .preview-link {
display: none;
text-align: left;
margin-top: 1.0rem;
word-spacing: -0.1rem;
}

.main-grid {
margin-top: 1.5rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1.0rem;
}

.main-grid a {
color: inherit;
text-decoration: none;
display: flex;
flex: 1;
}

.grid-box {
box-shadow: 0px 1px 2px rgba(0,0,0,0.05), 0px 6px 12px rgba(0,0,0,0.1);
background: rgba(255,255,255,0.75);
backdrop-filter: blur(0px);
border: 1px solid #ccc;
border-radius: .625rem;
padding: 1.0rem 2.0rem;
transition: all .3s ease;
flex: inherit;
}

.grid-box:hover {
transform: translateY(-2.5px);
box-shadow: 0px 10px 20px rgba(0,0,0,0.5);
border-color: var(--mlb-red);
}

.grid-box u {
color: var(--mlb-red);
}

.grid-box ul {
margin: 1.0rem auto;
}

.grid-box h3 {
white-space: nowrap;
margin-bottom: .5rem;
}

.now-playing {
min-width: 33.33%;
}

.now-playing h3 {
font-size: 2.5rem;
}

.format {
display: grid;
gap: 1.0rem;
flex: 1;
}

.coming-soon {
filter: grayscale(60%);
opacity: 0.4;
pointer-events: none;
user-select: none;
cursor: not-allowed;
}

.start {
margin: 0 auto;
padding: 1.0rem;
background: linear-gradient(180deg, #0d1b2a 0%, var(--mlb-navy) 100%);
color: var(--background);
position: relative;
}

.start h1, .start h2 {
font-size: 1.5rem;
font-weight: 600;
text-align: center;
}

.dark-box {
padding: 1.75rem;
background: linear-gradient(180deg, #0d1b2a 0%, var(--mlb-navy) 100%);
color: var(--background);
line-height: 1.4;
position: relative;
}

.dark-box h1, .dark-box h2 {
font-size: 2.25rem;
line-height: 1.25;
text-align: center;
padding-bottom: 1.0rem;
}

.dark-box h3 {
font-family: 'Playfair Display', serif;
font-size: 1.75rem;
line-height: 1.25;
margin-bottom: .925rem;
color: var(--triforce);
}

.box {
background: rgba(255,255,255,0.75);
backdrop-filter: blur(0px);
border: 1px solid #ccc;
border-radius: .625rem;
padding: 1.25rem;
}

.box a {
color: var(--mlb-navy);
font-weight: 600;
margin: 1.5rem auto;
display: block;
text-align: center;
text-decoration: none;
}

.box h2 {
font-size: 1.5rem;
font-weight: 600;
text-align: center;
}

.box a:hover {
color: var(--mlb-red);
text-decoration: underline;
}

.box hr {
width:75%;
margin: .5rem auto;
}

.box ul {
list-style: none;
text-align: left;
margin-top: 1.0rem;
}

.box li {
margin: .5rem auto;
line-height: 1.5rem;
}

.box li::before {
content: "✓";
color: var(--mlb-green);
margin-right: .5rem;
}

.box.help li {
display: list-item;
}

.box.help li::before {
content: none;
}

.box.help p {
margin: 1.0rem;
text-decoration:  underline;
}

.box.help h2 {
font-size: 1.5rem;
}

.box.faqs h2 {
margin-bottom: 2.0rem;
}

.summary {
text-align: center;
}

.summary h2 {
font-size: 1.25rem;
display: inline;
}

.feature-grid, .stats-grid, .article-grid, .review-grid {
margin: 1.5rem auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
gap: 2.0rem;
}

.feature-card {
padding: 1.0rem;
background: rgba(255,255,255,0.05);
border-radius: .625rem;
border: 1px solid rgba(255,255,255,0.10);
}

.feature-card p {
color: rgba(255,255,255,0.75);
font-size: 1.0rem;
}

.feature-icon {
font-size: 3.0rem;
margin-bottom: 0.75rem;
}

.stat {
text-align: center;
}

.stat-number {
font-family: 'Playfair Display', serif;
font-size: 3.5rem;
font-weight: 900;
color: var(--triforce);
}

.stat-label {
color: rgba(255,255,255,0.75);
font-size: 1.0rem;
text-transform: uppercase;
letter-spacing: .05rem;
}

.faq-item {
overflow: hidden;
border: 1px solid #ccc;
border-radius: .5rem;
background-color: var(--background);
margin-bottom: .75rem;
transition: box-shadow .3s ease;
}

.faq-item h3 {
font-size: inherit;
font-weight: normal;
}

.faq-item:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.faq-item summary {
cursor: pointer;
padding: 1.0rem .5rem;
color: var(--mlb-navy);
list-style: none;
outline: none;
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: nowrap;
align-items: baseline;
}

.faq-item summary::after {
content: "▼";
float: right;
font-size: .85rem;
transition: transform .3s ease;
}

.faq-item[open] summary::after {
transform: rotate(-180deg);
}

.answer {
padding: .75rem;
border-top: 1px solid #ccc;
background-color: #fff;
}

.answer ul { 
margin: 0.5rem auto; 
}

.articles {
color: inherit;
}

.articles h2 {
font-size: 1.5rem;
}

.article {
border-radius: .625rem;
border: 1px solid #e5e7eb;
overflow: hidden;
display: flex;
flex-direction: column;
text-decoration: none;
background: rgba(255,255,255,0.75);
transition: box-shadow .2s, transform .2s;
}

.article:hover {
box-shadow: 0 8px 30px rgba(0,0,0,.1);
transform: translateY(-2px);
}

.article-img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
object-position: top;
display: block;
}

.article-body {
padding: 1.25rem;
flex: 1;
display: flex;
flex-direction: column;
backdrop-filter: blur(5px);
}

.article-cat {
font-size: .75rem;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
color: #6b7280;
}

.article-title {
color: #000;
font-size: 1.0rem;
font-weight: 600;
margin: 1.0rem 0 .5rem 0;
}

.article-excerpt {
font-size: .90rem;
color: #6b7280;
line-height: 1.55;
margin: 0 0 1.0rem;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

.article-date {
font-size: .75rem;
color: #9ca3af;
}

.view-all {
font-weight: 600;
text-align: end;
}

.view-all a {
color: var(--mlb-navy);
text-decoration: none;
}

.view-all a:hover {
color: var(--mlb-red);
text-decoration: underline;
}

.review-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
place-items: center;
align-items: stretch;
}

.review-card {
background: rgba(255,255,255,0.75);
backdrop-filter: blur(0px);
padding: 1.0rem;
border-radius: .625rem;
border: 1px solid #ccc;
box-shadow: 0px 1px 2px rgba(0,0,0,0.05), 0px 6px 12px rgba(0,0,0,0.1);
}

.review-card p {
color: rgba(0,0,0,0.75);
font-size: 1.0rem;
}

.user {
display: flex;
align-items: center;
gap: .5rem;
margin-top: .75rem;
}

.user img {
width: 50px;
height: auto;
border-radius: 50%;
}

.user div {
display: flex;
flex-direction: column;
}

.user strong {
color: #000;
font-size: .95rem;
}

.user span {
color: var(--mlb-navy);
font-size: .85rem;
}

.stars {
color: #ffcc00;
font-size: 1.25rem;
margin-bottom: .5rem;
text-shadow: .5px .5px 3px var(--mlb-navy);
}

/******* LEAGUE PAGE *******/
.banner {
margin: 2.0rem auto 0 auto;
padding: 1.0rem .5rem 1.0rem .5rem;
background: linear-gradient(180deg, #0d1b2a 0%, var(--mlb-navy) 100%);
color: var(--background);
line-height: 1.25;
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}

.banner h1, .banner .icon {
display: inline;
font-size: 2.25rem;
text-shadow: 3px 2px 1px var(--mlb-red);
margin-bottom: .5rem;
}

.banner span {
font-size: 1.25rem;
display: flow;
text-shadow: none;
margin-top: .25rem;
}

.banner a {
color: inherit;
text-decoration: none;
margin: 0 .25rem;
}

.banner.title {
margin-bottom: 2.0rem;
text-shadow: none;
}

.banner.title h1 {
text-shadow: none;
}

.tools {
padding: 1.25rem;
background: var(--background);
border-bottom: .125rem solid #dee2e6;
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: .925rem;
backdrop-filter: blur(0px);
margin: 0;
}

.tools > * {
  flex: 1;
}

.tools input {
min-width: 30rem;
height: 3.0rem;
font-size: .8rem;
border-radius: .5rem;
padding: .5rem;
border: .125rem solid #dee2e6;
transition: border-color .3s;
}

.tools input::placeholder {
color: #000;
opacity: 1;
}

.tools select {
height: 3.0rem;
font-size: .8rem;
border-radius: .5rem;
padding: .5rem;
border: .125rem solid #dee2e6;
transition: border-color .3s;
cursor: pointer;
}

.tools input:focus, .tools select:focus, .controls select:focus, .data select:focus {
outline: none;
border-color: var(--mlb-navy);
}

.controls {
margin: 0;
padding: 1.0rem 1.5rem;
font-size: .8rem;
background: rgba(255,255,255,0.75);
backdrop-filter: blur(5px);
}

.controls input {
height: 3.0rem;
}

.pagination-controls {
text-align: center;
display: flex;
align-items: center;
gap: .75rem;
width: 100%;
}

.pagination-controls div:first-child {
text-align: left;
margin-right: auto;
display: flex;
align-items: center;
gap: .25rem;
}

.pagination-controls select {
font-size: .8rem;
border-radius: .5rem;
padding: .5rem .25rem .5rem .25rem;
border: .125rem solid #dee2e6;
cursor: pointer;
transition: border-color .3s;
}

.pagination-buttons {
display: flex;
gap: .5rem;
}

.pagination-buttons button {
padding: .5rem 1.0rem;
border: .125rem solid #dee2e6;
border-radius: .5rem;
cursor: pointer;
transition: all .3s;
background: var(--background);
}

.pagination-buttons button:disabled {
opacity: .35;
cursor: not-allowed;
}

.pagination-buttons button:hover:not(:disabled) {
border-color: var(--mlb-navy);
}

.page-info {
display: inline-flex;
align-items: center;
min-width: 2.5rem;
}

.listing {
margin-top: 0;
font-size: 1.0rem;
overflow-x: auto;
backdrop-filter: blur(5px);
margin-bottom: 10rem;
}

lineup {
text-align: center;
}

.no-results {
display: none;
text-align: center;
padding: 5rem 0rem;
}

.no-results i {
font-size: 2.0rem; 
margin-bottom: 0.75rem;
color: var(--mlb-navy);
}

table {
width: 100%;
background: rgba(255,255,255,0.75);
border-collapse: separate;
border-spacing: 0;
}

thead {
background: var(--mlb-navy);
color: var(--background);
}

th {
padding: .75rem .25rem;
cursor: pointer;
user-select: none;
white-space: nowrap;
vertical-align: middle;
}

th:first-child {
padding-left: 1.25rem;
}

th:last-child {
padding-right: .75rem;
}

th.sortable::after {
content: '\f0dc';
font-family: 'Font Icons';
font-weight: 900;
margin-left: 9px;
opacity: .5;
}

th.sort-asc::after {
content: '\f0de';
opacity: 1;
}

th.sort-desc::after {
content: '\f0dd';
opacity: 1;
}

abbr {
text-decoration: none;
}

tbody tr {
white-space: nowrap;
}

tbody tr:hover {
background: var(--background);
}

tbody td {
border-bottom: 1px solid #dee2e6;
padding: .5rem .25rem;
vertical-align: middle;
white-space: nowrap;
}

tbody td:first-child {
padding-left: 1.25rem;
}

tbody td:last-child {
padding-right: .75rem;
}

.left {
text-align: left !important; 
}

.center {
text-align: center !important; 
}

.right {
text-align: right !important;
}

.favorite, .fav {
line-height: 1.00rem;
}

.favorite {
cursor: pointer;
font-size: 1.25rem;
}

.favorited {
font-weight: bolder;
}

.player-link {
color: var(--mlb-navy);
text-decoration: none;
}

.player-link:hover {
color: var(--mlb-red);
text-decoration: underline;
}

.team-logo {
height: 1.5em;
width: auto;
vertical-align: -.375em;
margin-right: .375rem;
}

.rating, .game {
display: inline-block;
padding: .375rem 1.0rem;
border-radius: .5rem;
font-weight: 600;
border: 1px solid var(--mlb-red);
min-width: 75px;
text-align: center;
}

.rating {
background: var(--triforce);
}

.game {
background: #f9e7ec;
}

.level {
letter-spacing: 0rem;
}

.probable {
color: var(--mlb-green);
margin: 0 .15rem 0 .25rem;
}

.signal {
display: flex;
justify-content: flex-start;
align-items: center;
gap: .5rem;
}

.signal i {
font-size: 1.25rem;
}

.sv {
color: #ce2028;
text-shadow: .25px .25px .5px #000;
}

.hr {
color: #a52a2a;
text-shadow: .25px .252px 0.5px #000;
}

.sb {
color: var(--mlb-green);
text-shadow: 2px 2px .5px #ccc;
}

.streak {
color: var(--mlb-navy);
text-shadow: 2px 2px .5px #ccc;
}

.jumble {
height: 15rem;
position: relative;
margin: 5rem auto;
}

.question {
position: absolute;
font-weight: bold;
user-select: none;
white-space: nowrap;
}

.q1 {
top: -2%;
left: -2%;
font-size: 1.0rem;
transform: rotate(-10deg);
opacity: 0.85;
}

.q2 {
top: 45%;
left: 15%;
font-size: 1.25rem;
transform: rotate(10deg);
opacity: 0.75;
}

.q3 {
top: -2%;
left: 40%;
font-size: 1.1rem;
transform: rotate(-8deg);
opacity: 0.80;
}

.q4 {
top: 80%;
left: 0%;
font-size: 1.05rem;
transform: rotate(-5deg);
opacity: 0.75;
}

.q5 {
top: 36%;
left: 62%;
font-size: 0.9rem;
transform: rotate(3deg);
opacity: 0.90;
}

/******* PLAYER PAGE *******/
.back {
display: flex;
justify-content: space-between;
padding: .925rem .925rem;
font-size: .85rem;
}

.back a {
color: var(--mlb-navy);
text-decoration: none;
font-weight: 600;
}

.back a:hover {
color: var(--mlb-red);
text-decoration: underline;
}

.back h1 {
font-size: inherit;
font-style: inherit;
}

.player {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
column-gap: .75rem;
background: linear-gradient(180deg, #0d1b2a 0%, var(--mlb-navy) 100%);
color: var(--background);
padding: 1.25rem;
margin: 0 auto;
position: relative;
}

.player-photo {
grid-row: 1 / 3;
grid-column: 1 / 2;
border: 1px solid ghostwhite;
border-radius: .5rem;
height: 5.0rem;
overflow: hidden;
z-index: 1;
}

.player-photo img {
max-height: 5.0rem;
}

.player-bio {
grid-row: 1 / 2;
grid-column: 2 / 3;
font-size: 2.25rem;
font-weight: 600;
text-shadow: 3px 2px 1px var(--mlb-red);
align-self: end;
}

.player-info {
grid-row: 2 / 3;
grid-column: 2 / 3;
display: flex;
flex-wrap: wrap;
column-gap: .625rem;
font-size: 1.10em;
align-self: end;
}

.info-item {
white-space: nowrap;
}

.info-label {
text-decoration: underline;
font-weight: 600;
}

.chart-container {
position: relative;
width: 95%;
max-width: 900px;
min-height: 300px;
margin: 0 auto;
background: var(--background);
padding: 0px;
border-radius: .5rem;
box-shadow: 0 .125rem .625rem rgba(0,0,0,0.1);
}

canvas {
width: 100% !important;
height: 100% !important;
}

#days {
margin-left: auto;
}

.day {
display: none;
}

.day.active {
display: flex;
justify-content: space-between;
}

.commentary {
line-height: 1.25rem;
padding: 0 0 0 1.5rem;
}

.recommendations {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
gap: .25rem;
margin: 0 1.25rem;
}

.advice {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
border: 1px solid #dee2e6;
width: 6.5rem;
height: 6.5rem;
}

.advice .vertical {
grid-row: 1 / span 2;
writing-mode: vertical-rl;
text-orientation: upright;
font-size: 0.75rem;
padding: .1rem;
text-align: center;
background: var(--mlb-navy);
color: white;
}

.advice .top {
width: 100%;
padding-top: .5rem;
}

.advice .bottom {
font-size: 0.75rem;
padding: .25rem;
text-align: center;
}

.stoplight {
font-size: .90rem;
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.stoplight.green { background: #28a745; }
.stoplight.yellow { background: #ffc107; }
.stoplight.red { background: #dc3545; }
.stoplight.sprite {background: linear-gradient(135deg, #28a745 50%, #ffc107 50%);}

main.data {
margin-top: 0;
font-size: 1.0rem;
overflow-x: auto;
backdrop-filter: blur(5px);
}

.data {
margin-bottom: 2.5rem;
font-size: 1.0rem;
overflow-x: auto;
backdrop-filter: blur(5px);
}

.data h2 {
font-size: 1.5em;
color: var(--mlb-red);
padding: 1.25rem .5rem .5rem 1.25rem;
margin-bottom: 1.25rem;
border-bottom: 3px solid #dee2e6;
text-transform: capitalize;
}

.data h2.expert {
padding: 1.0rem 1.25rem .625rem 1.25rem;
display: flex;
justify-content: space-between;
align-items: end;
}

.data h2 i {
font-style: normal;
}

.data select {
padding: .5rem .625rem;
border: .125rem solid #dee2e6;
border-radius: 0.5rem;
font-size: 0.8rem;
background: white;
cursor: pointer;
transition: border-color .3s;
vertical-align: bottom;
}

.data-table {
margin-bottom: .925rem;
margin-top: -.325rem;
}

.pct {
min-width: 100px; 
}

.no-data {
text-align: center;
padding: 5rem 0rem;
font-size: 1.1rem;
}

.no-data i {
font-size: 2.0rem; 
margin-bottom: 0.75rem;
color: var(--mlb-red);
}

#player-data th, #player-data td, #level-data th, #level-data td, #season-data th, #season-data td, #game-data th, #game-data td {
text-align: right;
}

#level-data th, #season-data th, #game-data th {
min-width: 2.5rem;
}

#level-data th:first-child, #season-data th:first-child,  
#level-data td:first-child, #season-data td:first-child {
max-width: 4.0rem;
}

#level-data th:last-child, #season-data th:last-child, 
#level-data td:last-child, #season-data td:last-child {
max-width: 6.0rem;
}

/******* FOOTER *******/
.footer {
text-align: center;
padding: 1.25rem;
color: var(--mlb-navy);
font-size: .75rem;
}

.footer p {
margin: .5rem auto
}

/******* RESPONSIVE *******/
@media (max-width: 1280px) {
  .container {
  margin: 0 .5rem;
  }
  .now-playing {
  flex-basis: 100% !important;
  }
}

@media (max-width: 768px) {
  body.blur::before {
  content: "";
  position: fixed;
  inset: 0;
  backdrop-filter: blur(5px);
  z-index: 999;
  }
  .container {
  margin: 0;
  }
  .frame {
  gap: .8rem;
  margin-top: -8px;
  }
  .company-name {
  margin-bottom: -.75rem;
  }
  .company-logo, .quote, .full-text, .hide {
  display: none;
  }
  .mainmenu {
  left: 50%;
  width: 100%;
  max-width: var(--full-width);
  transform: translateX(-50%);
  }
  .home a:first-of-type {
  margin-top: 1.0rem;
  }
  .headline {
  margin: 1.5rem auto 1.75rem auto;
  }
  .headline i {
  margin: 0rem .5rem .25rem .25rem;
  }
  .preview-link {
  display: inline;
  }
  .preview-text {
  display: block;
  }
  .full-text {
  text-align: justify;
  }
  .graph {
  float: none;
  display: block;
  margin: 1rem auto 1rem auto;
  }
  .main-grid {
  margin-top: .5rem;
  flex-direction: column;
  gap: 0;
  }
  .coming-soon .grid-box {
  padding: .5rem 1.5rem;
  }
  .headline h1, .summary h2 {
  display: inline-block;
  }
  .highlight {
  display: inline-block;
  }
  .banner, .title {
  margin-top: -.5rem;
  }
  .banner h1, .banner .icon {
  font-size: 1.5rem;
  }
  .banner span {
  font-size: 1.0rem;
  }
  .banner p, .back h1 {
  display: none;
  }
  .tools, .controls {
  padding: 1.25rem .625rem;
  flex-wrap: wrap;
  gap: .5rem;
  }
  .tools input, .tools select {
  height: 2.0rem;
  }
  .tools input {
  min-width: -webkit-fill-available;
  }
  .wall {
  display: none;
  }
  .favorite {
  font-size: 1.0rem;
  }
  .day.active {
  display: inline-block;
  }
  .commentary {
  padding: .5rem;
  margin: -1.0rem auto 1.0rem auto;
  text-align: justify;
  font-size: .95rem;
  }
  .recommendations {
  flex-wrap: wrap;
  }
  .data {
  font-size: .95rem;
  }
  .data h2, .data h2.expert {
  font-size: 1.15rem;
  padding: .5rem;
  }
  .data h2 i {
  font-size: .75rem;
  }
  .player {
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  padding: .925rem;
  gap: .625rem;
  font-size: 1.75rem;
  }
  .player-photo {
  grid-row: 1 / 2;
  height: 3.75rem;
  }
  .player-photo img {
  max-height: 3.75rem;
  }
  .player-bio {
  font-size: 1.95rem;
  line-height: 1.95rem;
  }
  .player-info {
  grid-column: 1 / 3;
  font-size: .95rem;
  row-gap: 2.5px;
  }
  thead th:first-child, tbody td:first-child {
  padding-left: .5rem;
  }
  #level-data th:first-child, #season-data th:first-child,  
  #level-data td:first-child, #season-data td:first-child,
  #level-data th:last-child, #season-data th:last-child, 
  #level-data td:last-child, #season-data td:last-child {
  max-width: none;
  }
}

@media (hover: none) {
  .menu-item:not(.active):hover {
      background: transparent;
      color: #000000;
  }
  
  .mainmenu nav a:hover {
      background: transparent;
      color: #000000;
  }
}