:root {

	--pink: hsl(338.5, 72.8%, 36.1%);
	--light-pink: hsl(338.5, 72.8%, 56.1%);
	--canard: hsl(200.8, 100%, 9.6%);
	
	--blanc: hsla(0, 0%, 100%, 1);
	--blanc-fort: hsla(0, 0%, 100%, 0.75);
	--blanc-semi-transparent: hsla(0, 0%, 100%, 0.25);
}

body {

	background-color: #121212;
	color: white;
}


header {

	background-color: var(--canard);
}

header a,
header a:visited {

	color: white;
}

header > .sitetitle span {

	border-bottom-color: var(--pink);
}

header .usp {

	color: white;
}

header .usp strong {

	color: var(--light-pink);
}

#pinFilter ul li a {

	background-color: var(--blanc);
}

#pinFilter ul li a {

	border-color: var(--blanc);
}

#pinFilter ul li.selected a {

	background-color: var(--pink);
}


ul#tagsList a,
ul#tagsList a:visited {

	color: var(--pink);
}

#narrowingTags a, 
#narrowingTags a:visited {

	color: inherit;
}

#narrowingTags li.selected {

	background-color: var(--blanc);
	color: var(--canard);
	border-color: var(--canard);
}

#narrowingTags li.selectable {

	background-color: var(--canard);
	color: var(--blanc);
	border-color: var(--blanc);
}

#videosList > li {

	background-color: var(--canard);
	border-color: var(--pink);
}

.video-title,
.video-title a,
.video-title a:visited {

	color: var(--blanc);
}

#videosList .thumbnail {
	
	background-color: var(--noir-complet);
}

#videosList > li ul.tags li.selectable a, 
#videosList > li ul.tags li.selectable a:visited {

	color: var(--blanc-semi-transparent);
}

#videosList > li ul.tags li.selectable a:hover {

	color: var(--blanc-fort);
}

#videosList > li ul.tags li.selected a, 
#videosList > li ul.tags li.selected a:visited {
	
	color: var(--blanc-fort);
}



article {

	background: var(--canard);
}

article video {

	background-color: black;
}

form.add-video input[type="text"] {

	border-color: transparent;
}

form.add-video input[type="text"]:focus {

	border-color: var(--pink);
}

form.add-video input[type="submit"] {

	background-color: var(--pink);
	border-color: var(--pink);
	color: white;
}