/*
	----------------------------------------------------------------------------------
	PROJECT RED HORNS (2025)
	----------------------------------------------------------------------------------
	by: 			Ludovic "alba" Slangen
					ludovic@slangen.co
	----------------------------------------------------------------------------------
	last update: 	02/09/25	
	----------------------------------------------------------------------------------
*/

/*
	---- GRAB THEM FONTS
*/
@import url('gobl_fonts.css');

/*
	---- CARD SYSTEM
*/
@import url('gobl_cards.css');

/*
	---- FUN CURSOR STUFF
*/
html { /* default */
	cursor: url('data:image/svg+xml,%3C%3Fxml version="1.0" encoding="utf-8"%3F%3E%3Csvg version="1.1" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st0%7Bfill:%237A1128;%7D .st1%7Bfill:%23941831;%7D .st2%7Bfill:%23BD253F;%7D%0A%3C/style%3E%3Cg id="cursor_00000111909829297980280530000012203518190137602182_"%3E%3Cg id="dark_00000025435939817025444790000000584108975079353986_"%3E%3Cpath class="st0" d="M0,0.8v14.3c0,0.8,0.9,1.1,1.5,0.6l3.7-3.9c0.2-0.2,0.4-0.3,0.6-0.3h6c0.8,0,1.1-0.9,0.6-1.5L1.4,0.2 C0.9-0.3,0,0.1,0,0.8z"/%3E%3C/g%3E%3Cpath id="med" class="st1" d="M1.1,1.8V14c0,0.1,0.2,0.2,0.2,0.1L4.3,11c0.2-0.2,0.4-0.3,0.6-0.4L1.2,1.7C1.2,1.7,1.1,1.7,1.1,1.8z "/%3E%3Cpath id="light" class="st2" d="M12.3,10.1L1.4,0.2C1.2,0.1,1,0,0.8,0C0.4,0,0,0.3,0,0.8v14.3C0,15.7,0.4,16,0.8,16 c0.2,0,0.4-0.1,0.6-0.3l3.7-3.9c0.2-0.2,0.4-0.3,0.6-0.3h6C12.5,11.5,12.9,10.6,12.3,10.1z M10.6,10.4H5.8c-0.5,0-1.1,0.2-1.4,0.6 l-2.9,3.1c-0.1,0.1-0.2,0-0.2-0.1V1.8c0-0.1,0.1-0.2,0.2-0.1l9.3,8.5C10.8,10.2,10.7,10.4,10.6,10.4z"/%3E%3C/g%3E%3C/svg%3E%0A'), auto;
}
a {/* links */
	cursor: url('data:image/svg+xml,%3C%3Fxml version="1.0" encoding="utf-8"%3F%3E%3Csvg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st0%7Bfill:url(%23gradient_00000084491579721511269720000002547674938429304734_);%7D .st1%7Bfill:%23BD253F;%7D%0A%3C/style%3E%3Cg id="link"%3E%3ClinearGradient id="gradient_00000098923293458877299190000001557471988254232966_" gradientUnits="userSpaceOnUse" x1="2.377" y1="12.738" x2="11.0118" y2="4.1032"%3E%3Cstop offset="0" style="stop-color:%23941831"/%3E%3Cstop offset="1" style="stop-color:%237A1128"/%3E%3C/linearGradient%3E%3Cpath id="gradient" style="fill:url(%23gradient_00000098923293458877299190000001557471988254232966_);" d="M13.2,10.5V7 c0-0.8-0.6-1.6-1.4-1.7c-0.3,0-0.7,0-0.9,0.2c-0.2-0.6-0.7-1-1.3-1c-0.3,0-0.6,0-0.9,0.2C8.4,4,7.9,3.6,7.2,3.5 c-0.3,0-0.6,0-0.8,0.1l0-2C6.4,0.8,5.8,0.1,5,0C4.5,0,4.1,0.1,3.7,0.4C3.4,0.7,3.2,1.1,3.2,1.6v5.9L2.9,7c0,0,0,0,0,0 C2.6,6.6,2.1,6.3,1.6,6.3C0.7,6.3,0,7,0,7.9c0,0.3,0.1,0.6,0.2,0.8c0,0,0,0,0,0l2.5,4c0.6,0.9,1.2,1.7,2,2.2c0.9,0.7,1.9,1,2.7,1 c1.8,0,3.2-0.5,4.2-1.5C13.2,12.9,13.2,10.6,13.2,10.5z"/%3E%3Cpath id="border" class="st1" d="M13.2,10.5V7c0-0.8-0.6-1.6-1.4-1.7c-0.3,0-0.7,0-0.9,0.2c-0.2-0.6-0.7-1-1.3-1 c-0.3,0-0.6,0-0.9,0.2C8.4,4,7.9,3.6,7.2,3.5c-0.3,0-0.6,0-0.8,0.1l0-2C6.4,0.8,5.8,0.1,5,0C4.5,0,4.1,0.1,3.7,0.4 C3.4,0.7,3.2,1.1,3.2,1.6v5.9L2.9,7c0,0,0,0,0,0C2.6,6.6,2.1,6.3,1.6,6.3C0.7,6.3,0,7,0,7.9c0,0.3,0.1,0.6,0.2,0.8c0,0,0,0,0,0 l2.5,4c0.6,0.9,1.2,1.7,2,2.2c0.9,0.7,1.9,1,2.7,1c1.8,0,3.2-0.5,4.2-1.5C13.2,12.9,13.2,10.6,13.2,10.5z M12.2,10.5 c0,0,0,2-1.3,3.3c-0.8,0.8-2,1.2-3.5,1.2c-0.7,0-1.4-0.3-2.2-0.9c-0.7-0.5-1.3-1.1-1.7-1.9l-2.5-4c0,0-0.1-0.2-0.1-0.4 c0-0.4,0.3-0.7,0.7-0.7c0.2,0,0.4,0.1,0.6,0.3l1.1,1.8c0.3,0.4,0.9,0.2,0.9-0.2V1.6c0-0.3,0.3-0.7,0.7-0.7c0.3,0,0.6,0.3,0.6,0.7 l0,5.5c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5v-2c0-0.3,0.2-0.7,0.7-0.7c0.3,0,0.6,0.3,0.6,0.7v0.9v2.1c0,0.3,0.2,0.5,0.5,0.5 c0.3,0,0.5-0.2,0.5-0.5V6.1c0-0.3,0.3-0.7,0.7-0.7c0.3,0,0.6,0.3,0.6,0.7l0,0.8c0,0,0,0,0,0c0,0,0,0,0,0v2c0,0.3,0.2,0.5,0.5,0.5 c0.3,0,0.5-0.2,0.5-0.5v-2c0-0.3,0.3-0.7,0.7-0.7c0.3,0,0.6,0.3,0.6,0.7V10.5z"/%3E%3C/g%3E%3C/svg%3E%0A'), pointer;
	text-decoration: none;
}

/* 
	---- COLOR SCHEME VARIABLES
*/
:root {
	/* FONTS */
	/*--brass: 'brass_monoregular';
	--brass-cozy: 'brass_mono_cozyregular';
	--visby-medium: 'visby_round_cfmedium';
	--visby-bold: 'visby_round_cfbold';
	--visby-heavy: 'visby_round_cfheavy';
	--akony: 'akonybold';*/
	
	/* HEX VALUES */
	--white: #FFF;
	--black: #000;
	--black-icon: #3D3000;
	--black-icon-light: #776542;
	--gray-light: #BEBEBE;
	--gray-icon-light-rgb: #E3DBCD;
	--gray: #4C4C4C;
	--gray-icon: #C1BFB8;
	--gray-text: #585858;
	--gray-dark: #282828;
	--gray-darker: #141414;
	--red-light: #E06577;
	--red: #BD253F;
	--red-dark: #7A1128;
	--green: #37DB85;
	--green-dark: #208E51;
	--blue: #27C7F2;
	--blue-dark: #0E79A8;
	--purple: #8452FF;
	--purple-dark: #5028CE;
	--gold: #BA933E;
	--gold-dark: #93722E;
	--gold-icon: #C5B384;
	--gold-icon-dark: #977523;
	
	
	/* RGB VALUES */
	--white-rgb: 255,255,255;
	--black-rgb: 0,0,0;
	--black-icon-rgb: 61,48,0;
	--black-icon-light-rgb: 119,101,66;
	--gray-light-rgb: 190,190,190;
	--gray-icon-light-rgb: 227,219,205;
	--gray-rgb: 76,76,76;
	--gray-icon-rgb: 193,191,184;
	--gray-dark-rgb: 40,40,40;
	--gray-darker-rgb: 20,20,20;
	--red-light-rgba: 224,101,119;
	--red-rgb: 189,37,63;
	--red-dark-rgb: 122,17,40;
	--green-rgb: 55,219,133;
	--green-dark-rgb: 32,142,61;
	--blue-rgb: 39,199,242;
	--blue-dark-rgb: 14,121,168;
	--purple-rgb: 132,82,255;
	--purple-dark-rgb: 80,40,206;
	--gold-rgb: 186,147,62;
	--gold-dark-rgb: 147,114,46;
	--gold-icon-rgb: 197,179,132;
	--gold-icon-dark-rgb: 151,117,35;
	/* EXAMPLE ---- color: rgba(--var(--white-rgb), .5); */
}

/*
	---- GENERAL THINGS
*/

::selection {
  color: var(--white);
  background: var(--red);
}

html,body {
	height: 100%;
	color: var(--gray-text);
	background-color: var(--gray-darker);
}
body::after {
	content: "";
	position: fixed;
	top: 0; left: 0;
	display: block;
	width: 100%;
	height: 100vh;
	background-image: url('../img/strokes.svg');
	background-size: 100% 100%;
	z-index: 1;
}
body {
	display: flex;
	flex-direction: column;
	z-index: 2;
}

/*.court_wrapper {
	perspective: 1000px;
	perspective-origin: 50% 50%;
}
svg#bg_court {
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: 100vh;
}*/

header#header {
	display: flex;
	padding: 0 40px;
	min-height: 160px;
	background: rgba(var(--white-rgb),.01);
	align-items: center;
	z-index: 3;
}

#logo {
	display: block;
	width: 86px;
	height: 60px;
	background: url('../img/gobl.svg') no-repeat center center;
	text-indent: -9999;
	text-decoration: none;
}

#logo a,
#logo a:visited {
	display: block;
	width: 86px;
	height: 60px;
}

nav#menu {
	font-family: 'visby_round_cfbold', sans-serif;
	font-size: 1.2em;
	letter-spacing: .02em;
	text-transform: uppercase;
	z-index: 3;
}
#menu a,
#menu a:visited {
	color: var(--gray-text);
}
#menu a:hover {
	color: var(--white);
}

#menu ul li {
	display: inline-block;
	list-style-type: none;
}

section#scoreboard {
	display: inline-flex;
	gap: 4px;
	z-index: 3;
}
#scoreboard ul.score-card {
	position: relative;
	margin: 0;
	padding: 0;
	width: 220px;
	min-width: 180px;
	height: 80px;
	color: var(--white);
	background: rgba(var(--white-rgb),.08);
	white-space: nowrap;
	transition: background .2s ease-in-out;
}
#scoreboard ul.score-card:hover {
	/*background: rgba(var(--white-rgb),.12);*/
	background: rgba(var(--red-rgb),.35);
}
#scoreboard ul.score-card li {
	list-style-type: none;
}
#scoreboard ul.score-card a,
#scoreboard ul.score-card a:visited {
	display: block;
	width: inherit;
	height: inherit;
	color: var(--white);
}
#scoreboard ul.score-card a:hover {}
#scoreboard .score-card.score-final {
	background: rgba(var(--white-rgb),.04);
}
#scoreboard .score-card.score-final:hover {
	background: rgba(var(--white-rgb),.08);
}
.score-card .away,
.score-card .home {
	position: absolute;
	left: 20px;
	font-family: 'visby_round_cfheavy', sans-serif;
	font-size: 1.2em;
	line-height: 30px;
}
.score-card .away,
.score-card .pts-away,
.score-card .cal-date {
	top: 10px;
}
.score-card .home,
.score-card .pts-home,
.score-card .cal-time {
	bottom: 10px;
}
.score-card .pts-away,
.score-card .pts-home {
	position: absolute;
	right: 20px;
	font-family: 'brass_mono_cozyregular', sans-serif;
	font-size: 1.4em;
	line-height: 30px;
}
.score-card .cal-date,
.score-card .cal-time {
	position: absolute;
	right: 10px;
	font-family: 'visby_round_cfmedium', sans-serif;
	font-size: 1.2em;
	color: var(--gray-light);
	line-height: 30px;
}
.score-card li.CHI {
	padding-left: 23px;
	color: var(--red);
}
.score-card li.CHI:before {
	content: "";
	position: absolute;
	top: -3px;
	left: 0;
	width: 30px;
	height: 30px;
	background: url('../img/CHI.svg') no-repeat center center;
}
.score-card.score-live:after,
.score-card.score-final:after {
	content: "";
	position: absolute;
	/*top: 0;*/
	bottom: 0;
	height: 3px;
	display: block;
	width: 100%;
	background: var(--red);
	background: linear-gradient(90deg, rgba(var(--red-dark-rgb),1) 0%, rgba(var(--red-rgb),1) 50%, rgba(var(--red-dark-rgb),1) 100%);
	box-shadow: 0 0 4px rgba(var(--black-rgb),.4);
	/*z-index: 1;*/
}
.score-card.score-final:after {
	background: var(--gray);
	background: linear-gradient(90deg, rgba(var(--gray-dark-rgb),1) 0%, rgba(var(--gray-rgb),1) 50%, rgba(var(--gray-dark-rgb),1) 100%);
}
.score-card.score-live li.live-now,
.score-card.score-final li.live-over {
	font-family: 'visby_round_cfheavy', sans-serif;
	font-size: .8em;
	position: absolute;
	top: -10px;
	right: 9px;
	padding: 0 5px 0 7px;
	color: var(--white);
	background: var(--red);
	letter-spacing: .1em;
	line-height: 18px;
	text-align: center;
	border-radius: 6px;
	box-shadow: 0 0 4px rgba(var(--black-rgb),.4);
	/*z-index: 2;*/
}
.score-card.score-final li.live-over {
	color: var(--gray-light);
	background: var(--gray-darker);
	/*background: var(--gray);*/
	box-shadow: 0 0 4px rgba(var(--gray-rgb),.3);
}
.score-card.score-final .pts-home,
.score-card.score-final .pts-away {
	color: var(--gray-light);
}
.score-card:hover .pts-home,
.score-card:hover .pts-away,
.score-card:hover .cal-date,
.score-card:hover .cal-time {
	color: var(--red-light);
}
.score-card.score-live:hover .pts-home,
.score-card.score-live:hover .pts-away {
	color: var(--white);
}
.score-card.score-final:hover .pts-home,
.score-card.score-final:hover .pts-away {
	color: var(--gray-light);
}

div#container {
	flex: 1 0 auto;
	padding: 40px;
	z-index: 3;
}

content#content {
	display: flex;
	/*align-items: center;
	justify-content: center;*/
	height: 100%;
}

footer#footer {
	font-family: 'brass_monoregular', sans-serif;
	font-size: 1em;
	font-weight: 300;
	flex-shrink: 0;
	line-height: 40px;
	padding: 0 0 20px 0;
	color: var(--gray-text);
	text-shadow: 1px 1px 0 rgba(var(--black-rgb),.2);
	text-align: center;
	text-transform: uppercase;
	z-index: 3;
}
footer span:first-of-type {
	position: relative;
	top: -1px;
	color: var(--gray-text);
}
footer>span {
	position: relative;
	top: -2px;
	margin: 0 -2px;
	color: var(--red);
}
#footer a,
#footer a:visited {
	color: var(--gray-text);
	transition: all .2s ease-in-out;
	max-height: 20px;
}
#footer a:hover {
	margin-left: -2px;
	padding: 3px 8px 2px 7px;
	color: var(--black);
	background: rgba(var(--white-rgb),.3);
	border-radius: 12px;
}

/*
	---- RESPONSIVE
*/