html{
 background-color:rgb(46, 42, 35) ;
}

#bg{
	height:100vh;
	width:100%;
	position: absolute;
	overflow: hidden;
}
#bg img{
	height: 150vh;
	width: 200%;
	-webkit-filter: blur(5px);
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: -1;
}
#blackLayer{
	height: 100vh;
	width:100%;
	background-color: rgba(0, 0, 0, .2);
	position: absolute;
	z-index: 0;
}
#boite{
	margin-left: 15%;
	justify-content: center;
	z-index: 999;
	position:absolute;
}
/*click play*/

.titredefil{
color: #4D59B6;
font-size: larger;
visibility: visible;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}


/*animation sounddrop*/
#sounddrop {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    
  }
  
  .sounddrop {
    position: absolute;
    top:32%;
    left:1%;
    width:200px;
    height:50px;

  }
  
  .sounddrop span {
    position: absolute;
    bottom:0;
    width:9px;
    height:3px;
    background-color:#9b59B6;
    display:block;
    animation: audio 1.5s infinite ease-in-out;
  }
  .sounddrop span:nth-child(2){
	left:11px;
	animation-delay:.2s;
  }
  .sounddrop span:nth-child(3){
    left:22px;
  animation-delay:.4s;
  }
  .sounddrop span:active {
    position: absolute;
    bottom:0;
    width:9px;
    height:3px;
    background-color:#9b59B6;
	display:block;
    
  }
  .sounddrop span:nth-child(2):active{
	left:11px;
	
	
  }
  .sounddrop span:nth-child(3):active{
	left:22px;
    
  
  }
  
  @keyframes audio {
    0%,50%,100%{
      height:7px;
      transform: translateY(0);
      background-color: #4D59B6;
  
    }
    25%{
      height:70px;
      transform: translateY(15px);
      background-color: #3F95E9;
  }
}
/*lecteur*/
.container{
	border-radius: 5%;
    background-image: url("img/cat_headphonestatic.jpg");
    background-repeat: round;
}

.fun{
	background-image: url("img/cat_headphone.gif");
    background-repeat: round;
}


/*volume*/
.slidecontainer {
width: 100%;
}
.slider {
	-webkit-appearance: none;
	width: 50%;
	height: 10px;
	background: #d3d3d3;
	outline: none;
	opacity: 0.8;
	-webkit-transition: .2s;
	transition: opacity .2s;
	
  }
  
  .slider:hover {
	opacity: 1;
  }
  
  .slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 25px;
	height: 10px;
	background: rgb(46, 42, 35);
	cursor: pointer;
  }
  
  .slider::-moz-range-thumb {
	width: 25px;
	height: 15px;
	background: rgb(46, 42, 35);
	cursor: pointer;
  }

/*album image*/
@-webkit-keyframes rotation {
	from {
			-webkit-transform: rotate(0deg);
	}
	to {
			-webkit-transform: rotate(359deg);
	}
}
.rotate{
	
	-webkit-animation: rotation 2s infinite linear;
}
/*titre*/ 
.defileParent{
	display: block;
	margin: 3em auto;
	overflow: hidden;
	position: relative;
	table-layout: fixed;
	width: 700px;
}
#defile{
	display: block;
	-webkit-animation:linear marqueelike 10s infinite ;
	-moz-animation:linear marqueelike 10s infinite ;
	-o-animation:linear marqueelike 10s infinite ;
	-ms-animation:linear marqueelike 10s infinite ;
	animation:linear marqueelike 10s infinite ;
	animation: linear marqueelike 10s infinite;
	margin-left: 100%;
	padding: 0 5px;
	text-align: left;
	height: 25px;
	color: #4D59B6;
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	font-size: 30px;
}
#defile::before{
	visibility: hidden;
	content: "Talking to my self - Linkin Park ";
}
@-webkit-keyframes marqueelike {
	0%, 100% {margin-left:0;}
	99.99% {margin-left:-100%;}
 }
@-moz-keyframes marqueelike {
	0%, 100% {margin-left:0;}
	99.99% {margin-left:-100%;}
 }
@-o-keyframes marqueelike {
	0%, 100% {margin-left:0;}
	99.99% {margin-left:-100%;}
 }
@-ms-keyframes marqueelike {
	0%, 100% {margin-left:0;}
	99.99% {margin-left:-100%;}
 }
@keyframes marqueelike {
    0%, 100% {margin-left:0;}
 	99.99% {margin-left:-100%;}
 }

.marquee{
	animation-name: titredefil;
	animation-duration: infinite;
}
/*partie heure*/
.heure {

	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: scale(0.3);
	
}

.flex {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 50px;
}

.number {
	position: relative;
	height: 290px;
	width: 170px;
	margin: 20px;
}

.piece {
	background-color: #000;
	border: 2px solid transparent; 
	border-right-color: #aaa;
 	border-bottom-color: #aaa;
	position: absolute;
	height: 30px;
	width: 30px;
	transform: scale(0);
}

.piece.show {
	transform: scale(1);
	transition: transform 0.2s linear;
}

.piece:nth-of-type(1) {
	top: 0;
	left: 0;
}

.piece:nth-of-type(2) {
	top: 0;
	left: 60px;
}

.piece:nth-of-type(3) {
	top: 0;
	left: 120px;
}

.piece:nth-of-type(4) {
	top: 60px;
	left: 0;
}

.piece:nth-of-type(5) {
	top: 60px;
	left: 120px;
}

.piece:nth-of-type(6) {
	top: 120px;
	left: 0;
}

.piece:nth-of-type(7) {
	top: 120px;
	left: 60px;
}

.piece:nth-of-type(8) {
	top: 120px;
	left: 120px;
}

.piece:nth-of-type(9) {
	top: 180px;
	left: 0px;
}

.piece:nth-of-type(10) {
	top: 180px;
	left: 120px;
}

.piece:nth-of-type(11) {
	top: 240px;
	left: 0px;
}

.piece:nth-of-type(12) {
	top: 240px;
	left: 60px;
}

.piece:nth-of-type(13) {
	top: 240px;
	left: 120px;
}

@media screen and (max-width: 800px) {
	.heure {
		transform: scale(0.4);
	}
}

@media screen and (max-width: 550px) {
	.heure {
		transform: scale(0.2);
	}
}

.footer{
    background-color: rgb(197, 193, 197);

	
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transform: scale(0.5);
    border: double whitesmoke 10px;
    position: relative;
    transition: transform 1000ms;
    border-radius:80px ;
}
.footer:hover{
    transform: scale(0.7);
    background-image: linear-gradient(235deg, rgba(49,237,219,1) 0%, rgba(9,9,121,1) 9%,
	rgba(7,45,145,1) 14%, rgba(5,92,176,1) 21%, rgba(5,101,182,1) 25%, rgba(4,121,195,1) 31%,
	 rgba(193,227,233,1) 41%, rgba(194,232,240,1) 48%, rgba(209,231,236,1) 55%, rgba(0,212,255,1) 69%,
	  rgba(212,232,236,1) 75%, rgba(208,223,226,1) 87%, rgba(153,200,190,1) 97%);
}
#hours{
    cursor: pointer;
    transition : transform 500ms; 
}
#hours:hover{
    transform: scale(1.10);
}
#minutes{
    cursor: pointer;
    transition : transform 500ms; 
}
#minutes:hover{
    transform: scale(1.10);
}
#seconds{
    cursor: pointer;
    transition : transform 500ms;
}
#seconds:hover{
    transform: scale(1.10);
}