/* Colours */

:root {
	
	--court0: black;
	--court1: #666;
	--court2: #ccc;
	--court3: white;
	--toss0: #1e1a1a;
	--toss1: #6b2121;
	--toss2: #af0707;
	--toss3: #af0707;
	--bump0: #1e1c1a;
	--bump1: #6b3921;
	--bump2: #af3f07;
	--bump3: #f45809;
	--bounce0: #1e1d1a;
	--bounce1: #6b5221;
	--bounce2: #af7707;
	--bounce3: #f4a609;
	--blah0: #1e1e1a;
	--blah1: #6b6b21;
	--blah2: #afaf07;
	--blah3: #f4f409;
	--parade0: #1d1e1a;
	--parade1: #526b21;
	--parade2:#77af07 ;
	--parade3: #a6f409;
	--rally0: #1a1e1a;
	--rally1: #216b21;
	--rally2: #07af07;
	--rally3: #09f409;
	--serve0: #1a1e1d;
	--serve1: #216b52;
	--serve2: #07af77;
	--serve3: #09f4a6;
	--baseline0: #1a1d1e;
	--baseline1: #21526b;
	--baseline2: #0777af;
	--baseline3: #09a6f4;
	--tramline0: #1a1a1e;
	--tramline1: #21216b;
	--tramline2: #0707af;
	--tramline3: #0909f4;
	--smash0: #1c1a1e;
	--smash1: #39216b;
	--smash2: #3f07af;
	--smash3: #5809f4;
	--let0: #1e1a1e;
	--let1: #6b216b;
	--let2: #af07af;
	--let3: #f409f4;
	--racket0: #1e1e1e;
	--racket1: #6b6b6b;
	--racket2: #afafaf;
	--racket3: #f4f4f4;}


/* Preload Images */

body::after{
   display: none; // hide images
   content:	url(Court-Icon.png) 
   			url(Toss-Icon.png) 
   			url(Bump-Icon.png) 
   			url(Bounce-Icon.png) 
   			url(Blah-Icon.png) 
   			url(Parade-Icon.png) 
   			url(Rally-Icon.png) 
   			url(Serve-Icon.png) 
   			url(Baseline-Icon.png) 
   			url(Tramline-Icon.png) 
   			url(Smash-Icon.png) 
   			url(Let-Icon.png) 
   			url(Racket-Icon.png) 
}

/* Links */

.app_links a {
	text-align: center;
	display: inline-block;
	border-radius: 12px;
	padding: 2px 8px;
	margin: 12px;
	color: grey;
}


.app_links a:hover {
}

/* App Colours */

.court {
	background: black;
	color: grey;
}
.toss {
	background: var(--toss0);
	color: var(--toss2);
}
.bump {
	background: var(--bump0);
	color: var(--bump2);
}
.bounce {
	background: var(--bounce0);
	color: var(--bounce2);
}
.blah {
	background: var(--blah0);
	color: var(--blah2);
}
.parade {
	background: var(--parade0);
	color: var(--parade2);
}
.rally {
	background: var(--rally0);
	color: var(--rally2);
}
.serve {
	background: var(--serve0);
	color: var(--serve2);
}
.baseline {
	background: var(--baseline0);
	color: var(--baseline2);
}
.tramline {
	background: var(--tramline0);
	color: var(--tramline3);
}
.smash {
	background: var(--smash0);
	color: var(--smash3);
}
.let {
	background: var(--let0);
	color: var(--let2);
}
.racket {
	background: var(--racket0);
	color: var(--racket2);
}


/* App Icons */

.app:hover {
	color: white;
	transition: background 0.8s, color 0.8s;
	
}

.icon {
	width: 4em;	
	height: 4em;
	background-size: 100%;
	background-position: center middle;
	background-repeat: no-repeat;
	padding: 0.5em;
	 
}

.court .icon {
	background-image: url(Court-Naked.png);
}
.toss .icon {
	background-image: url(Toss-Naked.png);
}
.bump .icon {
	background-image: url(Bump-Naked.png);
}
.bounce .icon {
	background-image: url(Bounce-Naked.png);
}
.blah .icon {
	background-image: url(Blah-Naked.png);
}
.parade .icon {
	background-image: url(Parade-Naked.png);
}
.rally .icon {
	background-image: url(Rally-Naked.png);
}
.serve .icon {
	background-image: url(Serve-Naked.png);
}
.baseline .icon {
	background-image: url(Baseline-Naked.png);
}
.tramline .icon {
	background-image: url(Tramline-Naked.png);
}
.smash .icon {
	background-image: url(Smash-Naked.png);
}
.let .icon {
	background-image: url(Let-Naked.png);
}
.racket .icon {
	background-image: url(Racket-Naked.png);
}

/* Icon hover */

.court:hover .icon {
	background-image: url(Court-Icon.png);
}
.toss:hover {
	background: linear-gradient(var(--toss2), var(--toss1));
}
.bump:hover {
	background: linear-gradient(var(--bump2), var(--bump1));
}
.bounce:hover {
	background: linear-gradient(var(--bounce2), var(--bounce1));
}
.blah:hover {
	background: linear-gradient(var(--blah2), var(--blah1));;
}
.parade:hover {
	background: linear-gradient(var(--parade2), var(--parade1));
}
.rally:hover {
	background: linear-gradient(var(--rally2), var(--rally1));
}
.serve:hover {
	background: linear-gradient(var(--serve2), var(--serve1));
}
.baseline:hover {
	background: linear-gradient(var(--baseline2), var(--baseline1));;
}
.tramline:hover {
	background: linear-gradient(var(--tramline2), var(--tramline1));;
}
.smash:hover {
	background: linear-gradient(var(--smash2), var(--smash1));
}
.let:hover {
	background: linear-gradient(var(--let2), var(--let1));
}
.racket:hover {
	background: linear-gradient(var(--racket2), var(--racket1));
}