:root {
	/* daffy synthwave jersey colors */
	--daffy-pink: rgb(231,20,85); /* #e71455 was #e71354 */
	--daffy-purple: rgb(30,3,73); /* #1e0349 */
	--daffy-grey: rgb(94,90,90); /* 5e5a5a */
	--daffy-blue: rgb(12,65,154); /* #0c419a */
	--daffy-black: rgb(21,16,17); /* #151011 */
	--daffy-background: rgb(31,0,74); /* #1f004a */
	/* rockem sockem jersey colors */
	--rockem-pink: rgb(209,83,175); /* #d153af */
	--rockem-purple: rgb(157,88,189); /* #9d58bd */
	--rockem-blue: rgb(53,155,197); /* #359bc5 */	
}
/* Tags */
html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}
body {
	background: white;
	background-image: url('/include/img/jersey-mesh-32-4.png');
	background-size: 8px 8px;
	font-family: 'Titillium Web', sans-serif;
	color: black;
}
a {
	border-bottom: 1px solid var(--rockem-purple);
	background: none;
	color: var(--rockem-purple);
	text-decoration: none;
	transition: all 0.5s ease;
}
a:hover {
	border-bottom-color: var(--rockem-pink);
	color: var(--rockem-pink);
}
strong {
	font-weight: 700;
}
h1, h2, h3 {
	font-weight: 400;
	text-align: center;
	text-transform: uppercase;
}
h1 {
	display: inline-block;
	margin: 0 0 2rem;
	padding: 0 0.75rem 0;
	background-color: var(--rockem-purple);
	color: white;
	font-size: 2rem;
	font-weight: 700;
}
h2 {
	font-size: 1.5rem;
}
h3 {
	font-size: 1.125rem;
}
table {
	border-top: 1px solid var(--rockem-purple);
	border-collapse: collapse;
}
th {
	background-color: var(--rockem-pink);
}
td {
	text-align: left;
}
th, td {
	border-bottom: 1px solid var(--rockem-purple);
	padding: 0.5rem 1rem;
}
img {
	max-width: 100%;
	height: auto;
	display: block;
}
/* Common */
.header-content-wrap {
	padding-bottom: 2rem;
}
.page-title {
	margin: 0.25rem 0 1rem;
	text-align: center;
}
.navigation {
	margin-bottom: 1rem;
	text-align: center;
	font-size: 1.125rem;
}
.navigation ul,
.navigation ul li {
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style: none;
	vertical-align: middle;
}
.navigation ul li {
	margin: 1rem 0;
}
.navigation ul li a {
	margin: 0.25rem;
	border: 0;
	border-radius: 0;
	padding: 0.5rem 0.75rem;
	background: none;
	color: var(--rockem-purple);
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
}
.navigation ul li a:hover {
	background-color: var(--rockem-purple);
	color: white;
}
.navigation ul li.nav-logo a {
	margin: 0;
	padding: 0;
}
.navigation ul li.nav-logo a:hover {
	background: none;
}
.navigation ul li.nav-logo a img {
	width: 80px;
	height: auto;
	margin: 0 0.25rem 0 auto;
}
.home .nav-logo {
	display: none;
}
.content {
	box-sizing: border-box;
	max-width: 600px;
	width: 100%;
	margin: auto;
	padding: 0.5rem;
}
.content:before,
.content:after {
    content: " ";
    display: table;
}
.content:after {
    clear: both;
}
.footer {
}
.footer-links {
	padding: 2rem 0;
	font-size: 0.8125rem;
	text-transform: uppercase;
	text-align: center;
}
/* Element: Stripes */
.header .stripe-top {
	height: 0;
}
.header .stripe-mid {
	height: 30px;
	background-color: var(--rockem-purple);
}
.header .stripe-btm {
	height: 6px;
	background-color: black;
}
.footer .stripe-top,
.footer .stripe-btm {
	height: 30px;
	background-color: black;
}
.footer .stripe-mid {
	height: 150px;
	background-color: var(--rockem-pink);
	background-image: url('/include/img/caution-tape.png');
	background-size: 150px 150px;
}
/* Page: Home */
.logo {
	margin: 2rem auto;
	padding: 0 0.5rem;
}
.logo .dark-home {
	display: none;
}
.logo .light-away {
	display: block;
}
.next {
	max-width: 288px;
	margin: 2rem auto;
	text-align: center;
}
.next a {
	border: 0;
	text-decoration: none;
	background: none;
}
.next .next-header {
	display: block;
	height: 1.125rem;
	margin: 0;
	border: 2px solid var(--rockem-pink);
	padding: 0.5rem 0.75rem;
	color: white;
	background-color: var(--rockem-pink);
	font-size: 1.125rem;
	font-weight: 400;
	letter-spacing: 4px;
	text-transform: uppercase;
	line-height: 1.125rem;
	vertical-align: middle;
}
.next .next-details {
	display: block;
	border: 2px solid var(--rockem-pink);
	padding: 0.5rem 0.75rem 0.5rem 0.625rem;
	color: black;
	background-color: white;
	line-height: 1.125rem;
	vertical-align: middle;
}
.next .next-details .next-time {
	display: block;
	margin-bottom: 0.25rem;
	text-transform: uppercase;
}
.next .next-details .next-vs {}
.next .next-details .next-opponent {
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
}
/* Page: Schedule */
.schedule table {
	width: 100%;
	margin: auto;
}
.schedule td.opponent {
	text-align: left;
}
.schedule span.weekday {
	display: none;
}
.schedule span.month {
	font-size: 0.8125rem;
}
.schedule span.day {
	display: block;
	font-size: 1.125rem;
	font-weight: 700;
}
.schedule td.date,
.schedule td.time-result,
.roster td.number {
	text-align: center;
}
.schedule span.result {
	padding-right: 0.25rem;
	font-size: 1.125rem;
	font-weight: 700;
}
.schedule span.time {
	text-transform: uppercase;
}
.schedule span.boxscore,
.schedule span.rink {
	display: block;
	font-size: 0.8125rem;
	text-transform: uppercase;
}
.schedule .playoffs {
	padding: 1rem;
	font-size: 1.125rem;
	letter-spacing: 4px;
	text-align: center;
	text-transform: uppercase;
}
.schedule .record {
	font-size: 1.125rem;
	text-transform: uppercase;
	text-align: center;
	margin: 1rem 0;
	font-weight: 700;
	letter-spacing: 2px;
}
.schedule-next td {
	background-color: rgb(157,88,189,0.2);
}
.updated {
	margin-top: 2rem;
	text-align: center;
	font-size: 0.8125rem;
}
/* Page: Wallpaper */
.thumbnails {
	margin: 2rem 0;
}
.thumbnails::after {
	content: "";
	display: table;
	clear: both;
}
.thumbnail {
	display: block;
	box-sizing: border-box;
	float: left;
	width: 50%;
	padding-left: 1rem;
	padding-right: 1rem;
	margin-bottom: 1rem;
}
.thumbnail a img,
.wallpaper-image a img {
	box-sizing: border-box;
	margin-bottom: 1rem;
	border: 4px solid var(--rockem-purple);
	padding: 4px;
}
.thumbnail a:hover img,
.wallpaper-image a:hover img {
	border-color: var(--rockem-pink);
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.thumbnail a {
	text-decoration: none;
}
.wallpaper-title {
	display: block;
	text-align: center;
	text-transform: uppercase;
}
.wallpaper-desktop {}
.wallpaper-mobile {
	display: flex;
	flex-direction: row;
	gap: 1rem;
}
/* Page: Poinstreak */
.pointstreak .content ul {
	margin-left: 0;
	padding-left: 0;
	margin: auto;
	max-width: 380px;
	list-style: none;
}
.pointstreak .content ul li {
	margin-bottom: 0.5rem;
}
.pointstreak .content ul li a {
	display: block;
	padding: 0.5rem 1rem;
	border-bottom: 1px solid var(--daffy-pink);
	text-decoration: none;
}
.pointstreak .content ul li a:hover {
	display: inline-block;
	border-bottom-color: white;
}
/* Resets */
.nav-logo a,
.logo a,
.wallpaper-thumbnail a,
.wallpaper-image a {
	padding: 0;
	border-radius: 0;
}
.wallpaper-thumbnail a:hover,
.wallpaper-image a:hover {
	background: none;
}
.wallpaper-image img {
	border: 1px solid white;
}
/* Media Queries */
@media screen and (min-width:768px) {
	.navigation {
		font-size: 1.25rem;
	}
	.schedule th,
	.schedule td {
		font-size: 100%;
	}
}
@media (prefers-color-scheme: dark) {
	body {
		background-color: var(--daffy-black);
		background-image: none;
		color: white;
	}
	a {
		color: white;
		border-bottom-color: white;
	}
	a:hover {
		color: white;
		border-bottom-color: var(--daffy-pink);
	}
	h1, h2, h3 {
		color: var(--daffy-pink);
		background: none;
	}
	table {
		border-top-color: var(--daffy-pink);
	}
	th, td {
		border-bottom-color: var(--daffy-pink);
	}
	.header-content-wrap {
		background: url('/include/img/synthwave-jersey-top.png') top center no-repeat var(--daffy-background);
		background-size: 100%;
	}
	.navigation ul li a {
		background: none;
		border-radius: 4px;
		color: white;
	}
	.navigation ul li a:hover {
		background-color: black;
		color: var(--daffy-pink);
	}
	.footer .stripe-top {
		height: 0;
	}
	.header .stripe-mid,
	.header .stripe-btm {
		background-color: transparent;
	}
	.footer .stripe-mid {
		height: 202px;
		background-color: var(--daffy-pink);
		background-image: url('/include/img/synthwave-jersey-bottom.png');
		background-position: top center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.footer .stripe-btm {
		height: 8px;
		background-color: white;
	}
	.logo .dark-home {
		display: block;
	}
	.logo .light-away {
		display: none;
	}
	.thumbnail a img,
	.wallpaper-image a img {
		border-color: var(--daffy-pink);
	}
	.thumbnail a:hover img,
	.wallpaper-image a:hover img {
		border-color: white;
	}
	.schedule-next td {
		background-color: rgb(231,20,85,0.2);
	}
	.schedule .playoffs,
	.roster .position {
		color: var(--daffy-pink);
	}
	.pointstreak .content ul li a:hover {
		border-bottom-color: white;
	}
	.next .next-header {
		border: 1px solid var(--daffy-pink);
		border-radius: 0.5rem;
		background-color: var(--daffy-background);
	}
	.next .next-details {
		border: 1px solid white;
		border-top: none;
		border-radius: 0 0 0.5rem 0.5rem;
		color: white;
		background-color: var(--daffy-background);
	}
	.next .next-details .next-vs {
		color: var(--daffy-pink);
	}
}