body {
  font-family: "SST", sans-serif;
  font-weight: lighter;
  font-size: 10px;
  user-select: none;

}

@media only screen and (max-width: 600px) {

  .main {
    display: flex;
    justify-content: center;
    margin: 20px;
    margin-top: 10vh;
  }

}

@font-face {
  font-family: SST;
  src: url("../fonts/SST.TTF");
}

.mp4-player {
  background-image: url("../images/mp4.png");
  width: 191px;
  height: 366px;
  position: relative;
}

.mp4-screen {
  width: 136px;
  height: 179px;
  background-color: black;
  position: relative;
  top: 34px;
  left: 28px;
  color: white;
  background: linear-gradient(black, black, black, #140756);
  border: solid black 1px;
  animation: flicking 0.2s infinite;
}

@keyframes flicking {
  0% {
    filter: brightness(1.04);
  }

  50% {
    filter: brightness(1);
  }

  100% {
    filter: brightness(1.04);
  }
}

.header,
.footer {
  position: absolute;
  width: 136px;
  min-height: 16px;
  display: flex;
  flex-direction: row;
  z-index: 10;
}

.header {
  top: 0;
  text-align: center;
  justify-content: center;
  background: linear-gradient(#282828, #858585);
}

.footer {
  bottom: 0;
  justify-content: space-between;
  background: linear-gradient(#858585, #282828);
}

.footer-title {
  position: relative;
  padding: 1px;
  direction: rtl;
  text-wrap-mode: nowrap;
  width: fit-content;
}

.footer-title-box {
  max-width: 80px;
  overflow: hidden;
  margin-left: 18px;
}

@keyframes defilement-rtl {
  0% {
    left: 0px;
  }

  90% {
    left: -200%;
  }

  90.1% {
    left: 0px;
  }

  100% {
    left: 0px;
  }
}

.footer-state {
  margin-left: 6px;
  margin-right: 0px;
}

.footer-mode {
  display: none;
}

.battery {
  height: 9px;
}

.menu {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.menu-title {
  margin-bottom: 30px;
}

.menu-icons img {
  width: 15px;
  margin: 11px 14px;
  filter: invert();
  transition: ease-in-out 0.2s;
}

.hover-icon {
  scale: 1.5;
  animation: clignotement 1s infinite;
  transition: ease-in-out 0.2s;
}

@keyframes clignotement {
  0% {
    filter: invert() drop-shadow(0 0 2px orange);
  }

  50% {
    filter: invert();
  }

  100% {
    filter: invert() drop-shadow(0 0 2px orange);
  }
}

.menu-icons {
  position: absolute;
  top: 16px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}

.button,
.arrow {
  cursor: pointer;
  z-index: 2;
  position: absolute;
  /* background-color: aqua; */
  filter: blur(10px);
}

.button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.arrow {
  position: absolute;
}

.button:hover,
.arrow:hover {
  background-color: rgba(240, 248, 255, 0.397);
}

.button:active,
.arrow:active {
  background-color: rgba(199, 199, 199, 0.04);
}

.back {
  bottom: 76px;
  left: 28px;
}

.option {
  bottom: 76px;
  right: 28px;
}

.play {
  width: 48px;
  height: 48px;
  left: 73px;
  bottom: 38px;
}

.up {
  width: 56px;
  height: 30px;
  left: 69px;
  bottom: 85px;
}

.down {
  width: 56px;
  height: 30px;
  left: 69px;
  bottom: 10px;
}

.left {
  height: 56px;
  width: 30px;
  left: 40px;
  bottom: 15px;
}

.right {
  height: 56px;
  width: 30px;
  right: 40px;
  bottom: 15px;
}

.musique {
  position: absolute;
  top: 18px;
  width: 100%;
  background-color: black;
  height: 145px;
  display: none;
}

.musique-li {
  margin: 0px 3px;
  padding: 1px;
  border: solid 1px rgba(255, 166, 0, 0);
}

.hover-musique-li {
  border: solid 1px orange;
  color: black;
  background: linear-gradient(white, yellow);
}

.music-player {
  position: absolute;
  top: 18px;
  width: 100%;
  background-color: black;
  height: 145px;
  display: none;
}

.music-title img {
  width: 10px;
  vertical-align: middle;
  filter: invert();
  margin-right: 2px;
}

.music-cover {
  width: 50px;
  margin: 5px;
}

.music-infos {
  border-top: solid 0.1px #858585;
  margin: 3px;
}

.music-count {
  position: absolute;
  right: 10px;
  top: 60px;
}

.music-progress-bar-bg,
.music-progress-bar {
  position: absolute;
  bottom: 1px;
  height: 4px;
}

.music-progress-bar-bg {
  background: linear-gradient(#282828, #858585);
  width: 100%;
}

.music-progress-bar {
  background: linear-gradient(#86a0ff, #4576ff, #9fd3ff);
  width: 0%;
}

.clock {
  background-color: black;
  height: 179px;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.clock-shadow {
  position: absolute;
  filter: blur(2px);
  z-index: 1;
}

.clock-body {
  z-index: 2;
}

h2 {
  font-size: 15px;
  font-weight: lighter;
  margin: 0;
}

h3 {
  font-weight: lighter;
  font-size: 10px;
  margin: 0;
}

.hour {
  position: absolute;
  text-align: center;
  top: 62px;
  font-weight: 100;
}

.aiguille-h {
  position: absolute;
  z-index: 10;
  top: 22px;
}

.aiguille-m {
  position: absolute;
  z-index: 10;
  rotate: 360deg;
  top: 22px;
}

.all-musique {
  position: absolute;
  top: 18px;
  width: 100%;
  background-color: black;
  height: 145px;
  display: none;
}

.scrollbar {
  position: absolute;
  right: 2px;
  width: 1px;
  height: 100%;
  background-color: rgb(202, 202, 202);
  display: none;
}

.scrollbar-body {
  position: relative;
  right: 2px;
  width: 4px;
  height: 10%;
  background-color: rgb(255, 255, 255);

}

.message-voile {
  background-color: #00000075;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  display: none;
}

.message {
  color: white;
  margin: 9px;
  padding: 3px;
  background-color: black;
  z-index: 15;
  border: solid 2px white;
  position: absolute;
  height: 60%;
  text-align: center;
  top: 20px;
  overflow-y: scroll;
  scrollbar-width: thin;

}

.music-data-icon {
  width: 9px;
}

.battery {
  animation: none
}

@keyframes battery-flash {
  0% {
    opacity: 0%;
  }

  50% {
    opacity: 100%;
  }

  100% {
    opacity: 0%;
  }
}

.all-photos {
  display: none;
  position: absolute;
  top: 18px;
  width: 100%;
  background-color: black;
  height: 145px;
  color: white;
}

.photo-li {
  margin: 0px 3px;
  padding: 1px;
  border: solid 1px rgba(255, 166, 0, 0);
}

.hover-photo-li {
  border: solid 1px orange;
  color: black;
  background: linear-gradient(white, yellow);
}

.preview-photo-li {
  height: 21px;
  width: 30px;
  vertical-align: middle;
  border: solid 1px gray;
  margin: 1px;
}

.photo-player {
  background-color: #000000;
  width: 100%;
  position: absolute;
  top: 0;
  justify-content: flex-start;

  height: 100%;
  display: none;


}


.current-photo-box {
  display: flex;
  position: absolute;
  justify-content: center;
  top: 40px;
  width: 100%;


}

.current-photo {
  max-width: 100%;
  position: absolute;
  max-height: 120px;


}


.footer-toggle-icon {
  height: 8px;
  margin-top: 4px;
  vertical-align: middle;
  position: absolute;
  left: 20px;
}

.ligne-titre-photo {
  display: flex;
  position: absolute;
  top: 20px;
}

.photo-icon {
  filter: invert();
  height: 14px;
  vertical-align: middle;
  padding: 1px;
}

.titre-photo-box {
  overflow: hidden;
  max-width: 110px;
  margin-left: 4px;

}

.titre-photo {
  color: white;
  position: relative;
  text-align: left;
  animation: defilement-rtl 20s infinite linear;
  padding: 1px;
  direction: rtl;
  text-wrap-mode: nowrap;
  width: fit-content;
}