* {
  margin: 0;
  padding: 0;
}
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: none;
  position: fixed;
  align-items: center;
  gap: 0px;
  cursor: url(default.png), default;
  border: 1px solid black;
}

a {text-decoration: none;}

@property --c1 {
  syntax: "<color>";
  inherits: false;
  initial-value: #ffffff;
}

@property --c2 {
  syntax: "<color>";
  inherits: false;
  initial-value: #ffffff;
}

@property --c3 {
  syntax: "<color>";
  inherits: false;
  initial-value: #000000;
}

@property --c4 {
  syntax: "<color>";
  inherits: false;
  initial-value: #000000;
}


.stripes {
  animation: ani-stripes 1s ease-in;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: steps(100);
  --c1: #ffffff;
  --c2: #ffffff;
  --c3: #000000;
  --c3: #000000;
  background: repeating-linear-gradient(
    90deg,
    var(--c1) 0,
    var(--c2) 5px,
    var(--c3) 5px,
    var(--c4) 10px
  );
}

@keyframes ani-stripes {
  from {--c1:  #ffffff;
        --c4: #000000;
  } to {--c1: #e1feff;
    --c4: #ffcdeb;}}

.audioPlayer {
  display: flex;
  gap: 0.5em;
  align-items: center;
  cursor: url(default.png), default;
  padding: 0px;
  border: 0px solid black;
}

.track-title-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.track-title {
  background: white;
  padding: 5px;
  mix-blend-mode: difference;
  font-size: 80%;
}

.track-title:hover {
  background: rgb(0, 0, 0);
  padding: 5px;
  color: rgb(255, 255, 255);
  mix-blend-mode: normal;
}


.playPauseButton {
  width: 20px;
  border: 0px solid rgb(255, 255, 255);
  background: white;
  padding: 5px;
  cursor: url(pointer.png), pointer;
  mix-blend-mode: difference;
}

.playPauseButton:hover {
  width: 20px;
  border: 0px solid rgb(0, 0, 0);
  background: rgb(255, 0, 0);
  padding: 5px;
  cursor: url(pointer.png), pointer;
  mix-blend-mode: darken;
}

.iconNone{
  display: none;
}

.iconFlex {
  display: flex;
}

.current-time-box {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgb(255, 255, 255);
  height: 22px;
  width: 22px;
  mix-blend-mode: difference;
}

.current-time-box:hover {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgb(255, 255, 255);
  height: 22px;
  width: 22px;
  mix-blend-mode: normal;
}

.current-time {
    color: rgb(0, 0, 0);
    font-size: 80%;
}

.track-duration-box {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: white;
  height: 22px;
  width: 22px;
  mix-blend-mode: difference;
}

.track-duration-box:hover {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgb(0, 0, 0);
  height: 22px;
  width: 22px;
  mix-blend-mode: normal;
}

.track-duration {
    color: rgb(0, 0, 0);
    font-size: 80%;
}

.track-duration:hover {
    color: rgb(255, 255, 255);
    font-size: 80%;
}

.progress-bar-box {
  border: 0px solid black;
  height: 15px;
  width: 250px;
  display: flex;
  align-items: center;
  mix-blend-mode: difference;

}


.progress-bar {
    appearance: none;
    width: 100%;
    height: 8px;
    background: rgb(255, 255, 255);
    border: 1px solid black;
    cursor: url(default.png), default;
}

.progress-bar::-webkit-slider-thumb {
    appearance: none;
    background: white;
    width: 22px;
    height: 22px;
    border: 1px solid black;
    cursor: url(pointer.png), pointer;
}

.progress-bar::-webkit-slider-thumb:hover {
    appearance: none;
    background: rgb(0, 0, 0);
    width: 22px;
    height: 22px;
    border: 1px solid rgb(255, 255, 255);
    cursor: url(pointer.png), pointer;
}

.progress-bar::-moz-range-thumb {
    appearance: none;
    background: white;
    width: 22px;
    height: 22px;
    border: 1px solid black;
    border-radius: 0%;
    cursor: url(pointer.png), pointer;}

.progress-bar::-moz-focus-outer {
  border: 0;
}

.link {
    text-decoration: none;
    font-size: 150%;
    background-color: black;
    color: rgb(255, 255, 255);
    cursor: url(pointer.png), pointer;
}

.link:hover {
    color: rgb(0, 0, 0);
    background-color: white;
}

a {text-decoration: none;
color: rgb(255, 255, 255);
cursor: url(pointer.png), pointer;
mix-blend-mode: difference;}

.home {position: fixed;
      z-index: 2000;}