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

html {
	height: 100%;
}

body {
	background: lightgray;
	min-height: 100%;
	font-size: 18px;
}

article {
	border-radius: 4px;
	box-shadow: rgba(129, 145, 181, 0.016) 0.232px 0.464px 2.784px 0px, rgba(129, 145, 181, 0.024) 0.536px 1.072px 6.432px 0px, rgba(129, 145, 181, 0.03) 1px 2px 12px 0px, rgba(129, 145, 181, 0.035) 1.8px 3.6px 21.6px 0px, rgba(129, 145, 181, 0.043) 3.336px 6.672px 40.032px 0px, rgba(129, 145, 181, 0.06) 8px 16px 96px 0px, rgba(129, 145, 181, 0.016) 0px 0px 0px 1px

}

a, a:visited {
	text-decoration: none;
	color: inherit;
}

img {
	vertical-align: middle;
}

.wrapper {
	background: white;
	margin: auto;
	max-width: 1050px;
}

.inner_wrapper {
	margin: 0 10px 0 10px;
	background: white;
	text-align: center;
}

.header {
	background: #043a65;
	height: 50px;
	text-align: center;
	font-size: 150%;
	color: white;
	display: grid;
	grid-template-columns: 50px 1fr 50px;
    width: 100%;
    align-items: center;
}

.header_icon {
	font-size: 40px;
	line-height: 1;
	width: 50px;
}

.header_banner {
	font-family: Anton;
}

.header_logo {
	height: 40px;
	margin: 5px;
}

.NFC,
.AFC {
	text-align: left;
}
.NFC {
	color: #043a65;
}

.AFC {
	color: #ce1f2b;
}

.standings {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 325px));
	margin: 5px 5px;
	grid-column-gap: 10px;
	grid-row-gap: 5px;
	justify-content: center;
}

.standings_table {
	width: 100%;
	padding: 0px;
	display: grid;
	grid-template-columns: 160px repeat(3, 1fr);
    grid-template-columns: 1fr repeat(3, auto);
    grid-column-gap: 15px;
	align-items: center;
}

.standings_table_header {
	font-weight: bold;
}

.standings_table td {
	padding: 2px;
}

.standings_table_team {
	text-align: left;
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: repeat(2, auto) 1fr;
	grid-gap: 2px;
	align-items: center;
}

.standings_legend {
	display: grid;
	align-items: center;
    justify-content: start;
    text-align: left;
	grid-column-end: 2;
}

.standings_legend > * {
	display: grid	;
	grid-auto-flow: column;
	/* justify-content: right; */
	grid-template-columns: auto 1fr;
	text-align: left;
	white-space: nowrap;
}

.clinched_e {
	color: #909090;
}

.clinched_f::after,
.clinched_x::after,
.clinched_y::after,
.clinched_z::after {
	font-family: 'Material Symbols Outlined';
	font-variation-settings:
	'FILL' 1,
	'wght' 400,
	'GRAD' 0,
	'opsz' 24
}

.clinched_x::after {
	content: 'star';
	color: silver;
}

.clinched_y::after {
	content: 'star';
	color: goldenrod;
}

.clinched_z::after {
	content: 'star';
	color: gold;
}

.clinched_f::after {
	content: 'star';
	color: red;
}

.standings_table_stat {
	text-align: right;
}

.standings_conference {
	display: grid;
	grid-gap: 5px;
	margin: 0px 0px;
}

.standings_conference_header {
	border: 2px solid #A3A3A3;
	padding: 0px 5px;
	height: auto;
	color: white;
	text-align: center;
	font-weight: bold;
}

.standings_conference_header.NFC {
	border-color: #043a65;
	color: #043a65;
}

.standings_conference_header.AFC {
	border-color: #ce1f2b;
	color: #ce1f2b;
}

.standings_division {
	border: 1px solid #A3A3A3;
	padding: 5px 5px 5px 5px;
	height: auto;
	min-height: 135px;
	display: grid;
	white-space: nowrap;
}

.standings_division_header {
	text-align: left;
	font-weight: bold;
}

.standings_division img {
	height: 30px;
	width: 30px
}

.xteam_schedule {
	display: grid;
	grid-template-columns: 115px 90px 250px 80px;
	margin: 5px 5px;
	justify-content: center;
    justify-items: start;
}

.team_schedule {
	display: grid;
    min-height: 100%;
    justify-content: space-between;
	grid-gap: 5px;
	margin: 5px 5px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.schedule_header {
	font-weight: bold;
	justify-self: center
}

.schedule_logo img {
	width: 60px;
	height: 60px;
}

.scoreboard {
	display: grid;
    min-height: 100%;
    justify-content: space-between;
	margin: 5px 5px;
	grid-gap: 5px;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.footer {
	padding: 2px 0px;
	background: #ce1f2b;
	height: auto;
	text-align: center;
	font-size: 18px;
	color: white;
	display: block;
	width: 100%;
	min-height: 28px;
}

.header span {
	display: table-cell;
	vertical-align: middle;
}

.navigation {
	display: grid;
    grid-template-columns: auto 1fr auto auto;
    height: 40px;
    background: #ce1f2b;
    align-items: center;
	padding: 0 4px;
}

.nav_links {
	display: grid;
	grid-auto-flow: column;
    align-items: center;
}


.nav_link {
    width: auto;
    padding: 0 4px;
    margin: 2px;
    line-height: 32px;
    border-radius: 6px;
	color: #FFFFFF;
}

.mobile_nav {
	display: none; 
}

.desktop_nav {
	display: inline;
}

.nav_link:hover {
    background: #F3F3F3;
	color: #333333;
}

.nav_link.active {
	background: #ad1a24;
    line-height: 32px;
    border-radius: 6px;
}

.nav_link.active:hover {
	background: #ad1a24;
	color: #FFFFFF;
}

.week_navigation {
    position: sticky;
    padding: 5px 0px;
    top: 1px;
    height: 40px;
    text-align: center;
    margin: 5px 0px;
    background-color: #FEFEFE;
    border: 1px solid #A3A3A3;
	display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;	
}

.week_navigation a {
	margin: 0 5px;
	display: inline-block;
	height: 28px;
	width: 28px;
	padding: 2px;
	border: 1px solid #F3F3F3;
	text-decoration: none;
	color: #333333;
	vertical-align: middle;
}

.week_navigation a:hover {
	background: #999999;
}

.week_navigation a.visited {
	text-decoration: none;
}

.week_navigation a:first-child {
	justify-self: end;
}

.week_navigation_title {
	display: inline-block;
	vertical-align: middle;
	grid-column-start: 2;
}

.team_selector,
.season_selector,
.week_selector {
    margin-right: 5px;
	justify-self: end;
	position: relative;
}

.season_selector option {
	background-color: white;
	color: black;
}

#team_input,
#week_input {
	font-size: 80%;
	width: 40px;
	padding: 0 3px;
	appearance: none;
    background: none;
    border: none;
	color: #ce1f2b;
}

#season_input {
	width: 65px;
	padding: 0 3px;
	background: none;
	border: none;
    color: white;
    font-size: 16px;
    border-color: white;}

#team_input::selection,
#week_input::selection {
	color: green;
}

#team_input:focus,
#week_input:focus {
	outline: none;
	box-shadow: none;
}

.team_input_icon::after,
.week_input_icon::after {
	color: white;
	content: 'date_range';
	font-family: "Material Symbols Outlined";
	font-size: 26px;
	position: absolute;
	top: -5px;
	left: 10px;
	pointer-events: none;
}

.team_input_icon::after {
	content: 'stadium';
}

#team_input_x {
	width: 30px;
}


#team_inputs {
	background-color: #ce1f2b;
	color: white;
}

#team_input option,
#week_input option {
	background-color: white;
	color: black;
}

#x_week_input {
	border: 0;
	background-color: #FFFFFF;
	font-size: 100%;
}

.nfl_game {
	border: 1px solid #A3A3A3;
	padding: 5px 5px 5px 5px;
	height: auto;
	min-height: 135px;
	display: grid;
}

.schedule_date,
.nfl_date {
	display: grid;
	grid-auto-flow: column;
	align-items: center;
	padding: 5px;
	font-size: 80%;
	justify-self: start;
	white-space: nowrap;
	text-align: left;
}

.schedule_week_wrapper {
	position: relative;
}

.schedule_week {
    display: grid;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    border-radius: 3px;
    width: 22px;
    border: 1px solid #808080;
	border-top: 5px solid #000000;
    color: #000000;
	font-size: 90%;
}

.bye_week {
	align-self: start;
}

.schedule_time,
.nfl_status {
	padding: 5px;
	font-size: 80%;
	justify-self: end;
	white-space: nowrap;
	text-align: right;
}

.nfl_line1,
.nfl_line2,
.nfl_line3,
.nfl_line4 {
	padding: 0px;
	display: grid;
	grid-template-columns: auto 1fr;
    align-items: center;
}

.nfl_line3 {
	margin-top: 5px;
}

.nfl_team {
	padding: 0;
	display: grid;
    grid-template-columns: repeat(4, auto) 1fr;
	align-items: center;
	line-height: 35px;
	white-space: nowrap;
}

.nfl_teamname {
	padding: 0px 0px 0px 5px;
	line-height: 35px;
}

.nfl_venue {
	font-size: 80%;
	padding: 5px;
	display: grid;
    grid-template-columns: auto 1fr;
	align-items: end;
	justify-items: start;
	text-align: left;
}

.nfl_venue_name {
	width: 100%;
	white-space: nowrap;
	padding: 0 0 0 2px;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nfl_broadcast {
	font-size: 80%;
	padding: 5px;
	display: grid;
    grid-template-columns: auto 1fr;
	align-items: end;
	justify-self: end;
	text-align: right
}

.nfl_broadcast_provider {
	white-space: nowrap;
	padding: 0 0 0 2px;
}

.nfl_possession {
	color: brown;
	padding: 0px 0px 0px 2px;
	margin: 0px;
	font-size: 110%;
	line-height: 35px;
	font-variation-settings:
	'FILL' 0,
	'wght' 400,
	'GRAD' 0,
	'opsz' 24
}

.poss {
	font-size: 12px;
	color: black;
}

.nfl_redzone {
	padding: 0px 0px 0px 2px;
	margin: 0px;
	font-size: 80%;
	font-weight: bold;
	color: red;
	line-height: 35px;

}

.nfl_score {
	padding: 0 5px 0 0;
	justify-self: end;
	white-space: nowrap;
}

.nfl_logo img {
	float: left;
	width: 35px;
	height: 35px;
}

.schedule_line1,
.schedule_line2,
.schedule_line3 {
	padding: 0px;
	display: grid;
	grid-template-columns: auto 1fr;
    align-items: center;
}

.team_info {
	position: sticky;
    top: 1px;
    display: grid;
    grid-template-columns: 100px 1fr;
    width: 100%;
    margin: 10px 0px;
    padding: 0px 5px;
    background-color: #FEFEFE;
    border: 1px solid #A3A3A3;
}

.team_info_logo {
	grid-row-start: span 3;
}

.team_info_name {
	font-size: 100%;
	font-weight: bold;
	justify-self: end;
	align-self: end;
}

.team_info_stadium {
	display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
	font-size: 80%;
	white-space: nowrap;
}

.team_info_name,
.team_info_stadium,
.team_info_standings {
	align-self: center;
	justify-self: end;
}


.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

.header_icon {
	font-variation-settings:
	'wght' 400,
	'GRAD' 0,
	'opsz' 40,
	'FILL' 1
}

.broadcast_icon,
.venue_icon_visitor {
	font-size: 22px;
	font-variation-settings:
	'FILL' 0,
	'wght' 400,
	'GRAD' 0,
	'opsz' 24
}

.venue_icon_home {
	font-size: 22px;
	font-variation-settings:
	'FILL' 1,
	'wght' 400,
	'GRAD' 0,
	'opsz' 24
}

.right {
	text-align: right;
}

.left {
	text-align: left;
}

@media only screen and (max-width: 700px) {
	body {
		font-size: 20px;
	}
	.standings_table {
		grid-column-gap: 8px;
	}
	.desktop_nav {
		display: none;
	}
	.mobile_nav {
		display: inline;
		position: relative; 
		top: 5px;
	}
}