body {
  background-image: linear-gradient(
    to right top,
    #051937,
    #224566,
    #437695,
    #6babc4,
    #99e3f2
  );
}

header {
  border-style: ridge;
  border-color: black;
  background: rgba(0, 0, 0, 0.5);
}

.vinyle {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-right: 50px;
}

.taillevinyle {
  height: 15vh;
}

#un:hover {
  transform: scale(1.2);
}
#deux:hover {
  transform: scale(1.2);
}
#trois:hover {
  transform: scale(1.2);
}
#quatre:hover {
  transform: scale(1.2);
}

#cinq:hover {
  transform: scale(1.2);
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.main {
  display: flex;
  flex-direction: row;
}

.music {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  border: solid;
  width: 40%;
  height: 60vh;
}

#titre {
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 1px black;
  width: 100%;
  height: 33%;
  background: rgba(0, 0, 0, 0.5);
  background-image: url("image/titre.png");
  background-position: right;
  background-size: 100px;
  background-repeat: no-repeat;
  color: white;
  font-family: "Mochiy Pop One";
}
#auteur {
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 1px black;
  width: 100%;
  height: 33%;
  background: rgba(0, 0, 0, 0.5);
  background-image: url("image/micro.png");
  background-position: right;
  background-size: 100px;
  background-repeat: no-repeat;
  color: white;
  font-family: "Mochiy Pop One";
}
#album {
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 1px black;
  width: 100%;
  height: 33%;
  background: rgba(0, 0, 0, 0.5);
  background-image: url("image/pochette.png");
  background-position: right;
  background-size: 100px;
  background-repeat: no-repeat;
  color: white;
  font-family: "Mochiy Pop One";
}

.gramaphone {
  display: flex;
  justify-content: center;
  border: solid 1px;
  align-items: center;
  width: 60%;
  background-image: url("image/chill.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.spider {
  position: absolute;
  margin-top: -46vh;
  margin-left: -100vh;
  filter: brightness(0.9);
}

.grama {
  display: flex;
  align-items: center;
}
#taille {
  position: relative;
  height: 15vh;
  width: 15vh;
  top: 9vh;
  left: 9vh;
  filter: drop-shadow(0.25rem 0.25rem 0.5rem #000000);
  filter: brightness(0.9);
}
.note {
  display: flex;
  margin-top: 15vh;
}
#note {
  position: relative;
  top: 1vh;
}
#note1 {
  position: relative;
}
#note2 {
  position: relative;
}
footer {
  display: flex;
  border: solid;
  height: 20vh;
}

button {
  border: solid 1px black;
  display: block;
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
  outline: none;
  overflow: hidden;
  position: relative;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.5);
  padding: 15px 50px;
  margin: 0 auto;
  width: 34%;
}
button:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 470%;
  width: 140%;
  background: rgba(0, 0, 0, 0.3);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  -webkit-transform: translateX(-100%) translateY(-25%) rotate(45deg);
  transform: translateX(-100%) translateY(-25%) rotate(45deg);
}
button:hover:after {
  -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
  transform: translateX(-9%) translateY(-25%) rotate(45deg);
}
button:active {
  box-shadow: 0 5px black;
  transform: 2s translateY(4px);
}

#stop {
  background-image: url("image/arret.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100px;
}

#pause {
  background-image: url("image/pause.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100px;
}

#reprise {
  background-image: url("image/reprise.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100px;
}

.music-note-one {
  position: relative;
  visibility: hidden;
}

@keyframes movenoteone {
  0% {
    transform: translateX(0px) translateY(0px);
    opacity: 0;
  }
  25% {
    transform: translateX(25px) translateY(-50px);
    opacity: 0.6;
  }
  50% {
    transform: translateX(0px) translateY(-100px);
    opacity: 0.8;
  }
  75% {
    transform: translateX(15px) translateY(-150px);
    opacity: 0.6;
  }
  100% {
    transform: translateX(0px) translateY(-200px);
    opacity: 0;
  }
}
.music-note-two {
  position: relative;
  visibility: hidden;
}

@keyframes movenotetwo {
  0% {
    transform: translateX(0px) translateY(0px);
    opacity: 0.1;
  }
  25% {
    transform: translateX(10px) translateY(-50px);
    opacity: 0.6;
  }
  50% {
    transform: translateX(-20px) translateY(-100px);
    opacity: 0.8;
  }
  75% {
    transform: translateX(-15px) translateY(-150px);
    opacity: 0.6;
  }
  100% {
    transform: translateX(0px) translateY(-200px);
    opacity: 0;
  }
}
.music-note-three {
  position: relative;
  visibility: hidden;
}

@keyframes movenotethree {
  0% {
    transform: translateX(0px) translateY(0px);
    opacity: 0.3;
  }
  25% {
    transform: translateX(20px) translateY(-50px);
    opacity: 0.6;
  }
  50% {
    transform: translateX(0px) translateY(-100px);
    opacity: 0.8;
  }
  75% {
    transform: translateX(20px) translateY(-150px);
    opacity: 0.6;
  }
  100% {
    transform: translateX(0px) translateY(-200px);
    opacity: 0.3;
  }
}

.test {
  animation-play-state: running;
  animation: 1s linear rotation infinite;
}

.testdeux {
  position: relative;
  animation: movenoteone 2000ms cubic-bezier(0.7, 1.51, 0.49, 0.99) infinite;
  animation-delay: 100ms;
  visibility: visible;
}

.testtrois {
  position: relative;
  animation: movenotetwo 2000ms cubic-bezier(0.7, 1.51, 0.49, 0.99) infinite;
  animation-delay: 700ms;
  visibility: visible;
  opacity: 0;
  filter: saturate(8), sepia(0);
}

.testquatre {
  position: relative;
  animation: movenotethree 2000ms cubic-bezier(0.7, 1.51, 0.49, 0.99) infinite;
  animation-delay: 1400ms;
  visibility: visible;
  opacity: 0;
}

.switch {
  position: relative;
  animation: none;
}

.flamme {
  position: relative;
  visibility: hidden;
  left: 28.2vh;
  bottom: 16vh;
  filter: sepia(0.2);
  filter: brightness(0.9);
}

.flammedeux {
  visibility: visible;
  animation: feu 2000ms infinite;
  animation-delay: 100ms;
}

@keyframes feu {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(2px);
  }
  75% {
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(2px);
  }
}
.horloge {
  display: flex;
  position: absolute;
  margin-left: 280px;
  margin-top: -230px;
}

#heure,
#minute,
#seconde {
  color: orange;
  padding: 5px;
  width: 10px;
  font-size: 10px;
}

.paused {
  position: relative;
  animation-play-state: paused;
}
.glowing-circle {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  left: 16vh;
  bottom: 9vh;
}

.glowing-circle2 {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  left: 16vh;
  bottom: 9vh;

  background-color: #fff;
  -webkit-animation: glowing 1s ease-in-out infinite alternate;
  -moz-animation: glowing 1s ease-in-out infinite alternate;
  animation: glowing 1s ease-in-out infinite alternate;
}
@keyframes glowing {
  from {
    box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #f0f, 0 0 40px #0ff,
      0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  to {
    box-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6,
      0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}

.neon1 {
  position: absolute;
  top: calc(36% - 20px);
  left: calc(58% - 10px);
  border-radius: 50%;
  box-shadow: -50px 50px 100px 30px rgb(233, 18, 11);
}

.neon2 {
  position: absolute;
  top: calc(36% - 20px);
  left: calc(58% - 10px);
  border-radius: 50%;
  box-shadow: -50px 50px 100px 30px rgb(3, 122, 9);
}

.neon3 {
  position: absolute;
  top: calc(36% - 20px);
  left: calc(58% - 10px);
  border-radius: 50%;
  box-shadow: -50px 50px 100px 30px rgb(228, 231, 44);
}

.neon4 {
  position: absolute;
  top: calc(36% - 20px);
  left: calc(58% - 10px);
  border-radius: 50%;
  box-shadow: -50px 50px 100px 30px rgb(24, 241, 241);
}

.neon5 {
  position: absolute;
  top: calc(36% - 20px);
  left: calc(58% - 10px);
  border-radius: 50%;
  box-shadow: -50px 50px 100px 30px rgb(247, 14, 122);
}

#plant {
  position: absolute;
  margin-top: 44vh;
  margin-left: -105vh;
  filter: brightness(0.7);
}