* {
  box-sizing: border-box;
}

html,
body {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
body {
  margin: 0px;
  padding: 0px;
  background: url(/Projet_Player/images/fondecranplayer.png) no-repeat center
    center fixed;
  background-size: 100% 100%;
}

main {
  margin: 0px;
  padding: 0px;
  width: 100vw;
}
header {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  justify-content: space-between;
}
section {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 100%;
}
article {
  margin: 0;
  z-index: 1000;
}
button {
  background-color: transparent;
  border: transparent;
}
button:hover {
  transform: scale(1.5, 1.5);
  cursor: pointer;
}
span.material-symbols-outlined {
  margin-left: 30px;
}

li.material-symbols-outlined {
  margin: 0;
  padding: 0;
  font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 48;
  text-align: center;
  width: 100%;
  height: 100%;
}
div.material-symbols-outlined {
  width: 100%;
  height: 100%;
  position: absolute;
}

#iconsPlayPause,
#iconsNext,
#iconsPre {
  color: #8cf9f0;
}
#iconsPlayPause:hover,
#iconsNext:hover,
#iconsPre:hover {
  opacity: 1;
}

.star {
  box-sizing: border-box;
  width: 200px;
  animation-duration: 2s;
  animation-name: clignoter;
  animation-iteration-count: infinite;
  transition: none;
  filter: drop-shadow(0 0 0.75rem rgb(247, 231, 242));
}

@keyframes clignoter {
  0% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
input {
  margin: 0;
  padding: 0;
}

input[type="range"] {
  width: 80px;
  margin-top: 50px;
  position: absolute;
  z-index: 10;
}
input[class="seek_slider"] {
  width: 70%;

  position: absolute;
  z-index: 10;
}
span.material-symbols-outlined {
  position: absolute;
  margin-top: 20px;
}
div.lune {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

.lune {
  position: relative;
  padding: 10px;
  margin-left: 20px;
  margin-top: 20px;
  height: 80px;
  width: 80px;
  border-radius: 100%;
  background: whitesmoke;
  box-shadow: -2px 2px 10px 8px white;
}
/*pour 1er quartier: box-shadow: -15px 15px 0 5px white  ;
       border-radius: 50%; */
/* #moon {
  width: 100px;
  height: 100px;
  margin-left: 30px;
} */
/* .lune {
  position: relative;
  padding: 10px;
  margin-left: 20px;
  margin-top: 20px;
  height: 80px;
  width: 80px;
  border-radius: 100%;
  background: none;
  box-shadow: -20px 5px 3px 5px white;
  border-radius: 50%;
} */
.cratere1 {
  margin-left: 40px;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  opacity: 70%;
  background: rgb(214, 210, 210);
  filter: drop-shadow(0 0 0.75rem rgb(108, 106, 106));
  box-shadow: inset rgb(234, 85, 85);
}
.cratere2 {
  height: 20px;
  width: 18px;
  border-radius: 70%;
  margin-left: 15px;
  opacity: 60%;
  background: rgb(204, 201, 201);
  box-shadow: inset rgb(156, 152, 152);
  filter: drop-shadow(0 0 0.75rem rgb(62, 61, 62));
}
.cratere3 {
  height: 20px;
  width: 18px;
  border-radius: 70%;
  opacity: 50%;
  background: rgb(204, 201, 201);
  filter: drop-shadow(0 0 0.75rem rgb(62, 61, 62));
}
.cratere4 {
  height: 20px;
  width: 18px;
  margin-left: 30px;
  border-radius: 70%;
  opacity: 40%;
  background: rgb(204, 201, 201);
  filter: drop-shadow(0 0 0.75rem rgb(62, 61, 62));
}

span {
  margin-left: 35px;
  text-transform: capitalize;
  color: rgb(173, 9, 244);
  font-size: 20px;
  font-weight: 700;
}

span.name {
  position: absolute;
  left: 8%;
  text-transform: capitalize;
  color: rgb(189, 244, 9);
  font-size: 140%;
  font-weight: 700;
  top: 5%;
  filter: drop-shadow(0 0 0.75rem rgb(247, 231, 242));
}
span.artist {
  position: absolute;
  right: 10%;
  text-transform: capitalize;
  color: rgb(9, 244, 158);
  /* font-size: 20px; */
  font-weight: 700;
  top: 20%;
}
.soucoupe {
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  /* top: 100px; */
  /* bottom: 100px; */
  position: relative;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  /* box-shadow: 0px 0px 0px rgb(174, 28, 28); */
  animation-name: fx;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#elipse {
  width: 55%;
  height: 105px;
  margin: 0 auto;
  border-radius: 50%;
  background: #2c2d2e;
  box-shadow: inset -15px -4px 16px rgba(245, 246, 242, 0.2),
    inset 15px -4px 16px rgba(22, 7, 236, 0.19), inset 0px -4px 18px #313234,
    5px -3px 4px #b6f009, 2px -3px 0px rgb(51, 50, 51);
  position: relative;
  z-index: 1;
}
.soucoupe {
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  /* top: 100px; */
  bottom: 200px;
  position: relative;
}
.soucoupe_appear {
  visibility: visible;
  animation: appear 5s linear;
}
.fx_appear {
  visibility: visible;
}
@keyframes appear {
  0% {
    transform: scale(0.05) translate3d(-1200px, -1200px, 1900px);
  }
  100% {
    transform: scale(1) translate3d(0, 0, 0);
  }
}
ul.spot {
  margin: 0px;
  padding: 0px;
  position: absolute;
  top: 10px;
  width: 100%;
  display: block;
  height: 100%;
}
ul.spot li {
  list-style-type: none;
  background: #8cf9f0;
  width: 5px;
  height: 2px;
  position: absolute;
  border-radius: 50%;
  box-shadow: 2px -3px 2px #090909, 1px 5px 10px rgb(174, 175, 175);
}
ul.spot li:nth-child(1) {
  top: 60px;
  left: 10%;

  width: 5%;
  height: 6px;
}
ul.spot li:nth-child(2) {
  left: 20%;
  top: 13px;
  width: 6%;
  height: 10%;
}
ul.spot li:nth-child(3) {
  right: 20%;
  top: 15px;
  width: 6%;
  height: 10%;
}
ul.spot li:nth-child(4) {
  top: 60px;
  right: 10%;
  width: 5%;
  height: 6px;
}
ul.bouton {
  margin: 0px;
  padding: 0px;
  position: absolute;
  top: 20px;
  width: 100%;
  display: block;
  height: 100%;
}
ul.bouton li {
  list-style-type: none;
  background: #e38cf9;
  position: absolute;
  border-radius: 50%;
  box-shadow: 2px -2px 2px #090909, 3px 3px 5px rgb(249, 135, 230);
}
ul.bouton li:nth-child(1) {
  left: 35%;
  width: 4%;
  height: 30px;
}
ul.bouton li:nth-child(2) {
  left: 48%;
  width: 4%;
  height: 30px;
}
ul.bouton li:nth-child(3) {
  right: 35%;
  width: 4%;
  height: 30px;
}

.dome {
  width: 25%;
  height: 140px;
  background: #e6eaec;
  opacity: 0.4;
  position: relative;
  display: flex;
  z-index: -2;
  margin-bottom: 100px;
  border-radius: 50%;
  box-shadow: inset -11px 2px 4px #b5c9da, inset -10px -18px 9px #000,
    0px 57px 28px rgba(121, 179, 218, 0.8);
  border-top: 2px solid rgba(255, 255, 255, 0.5);
  position: relative;
  top: 180px;
}
.inner {
  width: 133px;
  height: 14px;
  margin: 0 auto;
  background: #d6f9ff;
  position: relative;
  border-radius: 50%;
  top: -7px;
  border: 1px solid #3a6075;
  z-index: 1;
  box-shadow: 0px 1px 1px rgba(14, 32, 42, 0.3);
}

.rings {
  width: 20%;
  height: 50px;
  margin: 0 auto;
  background: #b5eeee;
  position: relative;
  border-radius: 50%;
  top: -45px;
  border: 1px solid #d6e3ea;
  overflow: hidden;
  box-shadow: inset 0px -1px 0px #0e97e5, 0px 1px 0px rgba(229, 234, 239, 0.77);
  z-index: 1;
  left: 5px;
}
.rings ul {
  opacity: 0.8;
  margin: 0px;
  padding: 0px;
  position: relative;
  width: 100%;
  top: -13px;
}
.rings ul li {
  float: left;
  background: #4a7185;
  display: block;
  width: 1px;
  height: 19px;
  margin-right: 1px;
}
.rings ul li:nth-child(3n + 3) {
  box-shadow: 0px 0px 0px #fff;
  animation-name: rings;
  animation-duration: 0.3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes rings {
  0% {
    box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.8);
  }
  100% {
    box-shadow: 10px 0px 5px rgba(255, 255, 255, 0.8);
  }
}
.hidden {
  visibility: hidden;
}
.fx {
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2;
  bottom: 20px;
}

.fx ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  text-align: center;
  height: 500px;
  width: 20%;
  position: relative;
  z-index: 10;
}
.fx ul li {
  display: inline-block;
  z-index: 3;
  width: 100%;
  background: rgba(224, 233, 237, 0.52);
  height: 500px;
  border-radius: 0px 0px 50% 50%;
  box-shadow: inset 150px 400px 100px #70daf5;
  filter: blur(35px);
}

.container {
  width: 100%;
  position: relative;
  perspective: 3000px;
  left: 50%;
  right: 50%;
}
article {
  width: 100%;
}
#carousel {
  width: 100%;
  height: 100%;
  position: relative;
  transform: scale(0.1) translateY(600px);
}

img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 10%;
}
#carousel figure {
  display: block;
  animation: rotate 30000ms ease-in-out infinite;
  position: absolute;
  text-align: center;
  border-radius: 10%;
  min-width: 80%;
  z-index: 4;
}
#carousel figure:nth-child(0) {
  animation-delay: -30000ms;
}
#carousel figure:nth-child(1) {
  animation-delay: -22500ms;
}
#carousel figure:nth-child(2) {
  animation-delay: -15000ms;
}
#carousel figure:nth-child(3) {
  animation-delay: -7500ms;
}
#carousel figure:nth-child(4) {
  animation-delay: 0ms;
}
#carousel figure:nth-child(5) {
  animation-delay: 7500ms;
}
#carousel figure:nth-child(6) {
  animation-delay: 15000ms;
}

@keyframes rotate {
  0%,
  20%,
  99.7619047619%,
  100% {
    transform: rotateY(45deg) scale(0.6);
    right: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: -1;
    -webkit-filter: opacity(100%) blur(3px);
  }
  24.7619047619%,
  45% {
    transform: rotateY(0deg) scale(1);
    right: 40%;
    box-shadow: 0 0 20px black;
    z-index: 100;
    -webkit-filter: opacity(100%) blur(0px);
  }
  49.7619047619%,
  70% {
    transform: rotateY(-45deg) scale(0.6);
    right: 81%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: -1;
    -webkit-filter: opacity(100%) blur(3px);
  }
  74.7619047619%,
  95% {
    transform: rotateY(-90deg) scale(0);
    right: 0%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0);
    z-index: 0;
    -webkit-filter: opacity(0%) blur(0px);
  }
}

#volume_slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 10px;
  width: 100%;
  background: black;
  border-radius: 30%;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}
#volume_slider:hover {
  opacity: 1;
  cursor: pointer;
}

#seek_slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 70%;
  background: rgb(10, 149, 236);
  height: 2%;
  position: absolute;
  bottom: 35%;
  border-radius: 60%;
  z-index: 1200;
}
#seek_slider:hover {
  opacity: 1;
  cursor: pointer;
}
#current-time {
  position: absolute;
  left: 2%;
  bottom: 35%;
  z-index: 1200;
}
#total-duration {
  position: absolute;
  right: 2%;
  bottom: 35%;
  z-index: 1200;
}
.slider_container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}