:root {

	--rouge: hsl(0, 98.8%, 33.5%);
	--rouge-fonce: hsl(0, 75%, 33.5%);
	
	--noir-complet: black;
	--noir-fonce: hsl(0, 30%, 2.1%);
	--noir-moyen: hsl(0, 15%, 3.1%);
	--noir-clair: hsl(0, 5%, 7.1%);

	--gris: hsl(0, 5%, 50%);
	--gris-fonce: hsl(0, 5%, 25%);
	
	--blanc: hsla(0, 0%, 100%, 1);
	--blanc-fort: hsla(0, 0%, 100%, 0.75);
	--blanc-semi-transparent: hsla(0, 0%, 100%, 0.25);
}

header * {

	color: var(--noir-fonce);
}


#pinFilter ul li a {

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

#pinFilter ul li a {

	border-color: var(--rouge-fonce);
}

#pinFilter ul li.selected a {

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

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

	color: var(--rouge-fonce);
}

#narrowingTags a, 
#narrowingTags a:visited {

	color: inherit;
}

#narrowingTags li.selected {

	background-color: var(--rouge-fonce);
	color: var(--blanc);
	border-color: var(--rouge-fonce);
}

#narrowingTags li.selectable {

	background-color: var(--blanc);
	color: var(--rouge-fonce);
	border-color: var(--rouge-fonce);
}

#videosList > li {

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

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

	color: var(--noir-complet);
}

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

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

	color: var(--gris-fonce);
}

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

	color: var(--noir-complet);
}

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


article video {

	background-color: black;
}

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

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

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

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

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

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