@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&display=swap');

body {
	background: url("../img/bg_site.jpg") no-repeat fixed;
	background-position: center;
    background-size: cover;
	font-family: "Dosis", sans-serif;
	color: #FFFFFF;
	margin-top: 30px;
}

a, a:hover {
	text-decoration: none;
}

.range_css {
	-webkit-appearance: none;
	height: 12px;
	background: linear-gradient(to bottom,#292E6C 10%,#292E6C);
	cursor: ew-resize;
	border-radius: 1.5rem;
}

#volume {
	margin-left: 53px;
}

#npcoverfhits {
	width: 320px;
	height: 320px;
}

/*****ie*****/
.range_css::-ms-track {
	height: 1.4rem;
	border-radius: 1.5rem;
	background: transparent;
	border-color: transparent;
	color: transparent; /*enleve les traits*/
}

.range_css::-ms-fill-lower {
	height: 1.4rem;
	background: linear-gradient(to bottom,#292E6C 10%,#292E6C);
	border: 0 solid transparent;
	border-radius: 1.5rem;
}

.range_css::-ms-fill-upper {
	background: linear-gradient(to bottom,#292E6C 10%,#292E6C);
	border: 0 solid transparent;
	border-radius: 1.5rem;
}

.range_css::-ms-thumb {
	border: 1px solid #ddd;
	width: .8rem;
	background: white;
	height: .8rem;
	border-radius: 50%;
	box-shadow: 0 0 .125rem #aaa;
}

.range_css:focus::-ms-fill-lower, .range_css:focus::-ms-fill-upper {
	background: linear-gradient(to bottom,#292E6C 10%,#292E6C);
}

/* Pour les smartphones */
@media screen and (max-width: 600px) {
	body {
		text-align: center;
	}

	a, a:hover {
		text-decoration: none;
	}

	#historyplayed, #history1titlefhits, #history1artistfhits, #history2titlefhits, #history2artistfhits {
		text-align: left;
	}

	#volume {
		display: none;
		margin-left: 0px;
	}

	.volume-control {
		display: none;
	}

	#npcoverfhits {
		width: 200px;
		height: 200px;
	}
}