cm.css

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

*{
  padding: 0;
  margin: 0;
  font-family: Poppins;
}
body {
  background: #0a1624;
  background: linear-gradient(to right, rgb(4, 21, 44), rgb(2, 71, 83));
}

.line {
  background: linear-gradient(-135deg, #c850c0, #4158d0);
  width: 100%;
  display: block;
  height: 2px;
}
#scrollbar {
  position: absolute;
  height: 2px;
  width: 100%;
  background: linear-gradient(375deg, #1cc7d0, #2ede98);
  z-index: 999;
}
#completed {
  position: absolute;
  height: 4px;
  width: 50%;
  background: linear-gradient(-135deg, #c850c0, #4158d0);
  z-index: 999;
}
video {
  position: absolute;
  width: 100%;
  height: 100%;
}
.controls {
  position: absolute;
  bottom: 2px;
}
button{
  z-index: 999;
}
#playpause {
  position: fixed;
  width: 200px;
  height: 200px;
  background: transparent;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%)
}

#next {
  position: absolute;
  width: 50%;
  height: 100%;
  background: transparent;
  right: 0;
  top: 0;
}
#prev {
  position: absolute;
  width: 50%;
  height: 100%;
  background: transparent;
  left: 0;
  top: 0;
}
#title {
  color: whitesmoke;
  background: linear-gradient(375deg, #3d1cd0, #debe2e);
  padding: 4px;
  border-radius: 8px;
  position: fixed;
  bottom: 4px;
  z-index: 400;
}
#share {
    color: #ffe882;
    width: 40px;
    bottom: 4px;
}
#reset img {
  transform: rotate(
90deg
);
}
#loader {
  position: absolute;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(-135deg, #c850c0, #4158d0);
  z-index: 999;
}
#ad {
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
  left: 0;
  top: 0;
  display: none;
}