#player {
  width: 800px;
  height: 600px;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
}

.roboto-text {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.video-container {
  flex-grow: 1;
}

.player-controls {
  background-color: black;
  display: flex;
}

.control-button {
  border: none;
  cursor: pointer;
  background-color: transparent;
  height: 35px;
  margin: 4.3px;
}

.control-icon {
  color: white;
  font-size: 20px;
}

.progress-component {
  display: flex;
  align-items: center;
  column-gap: 10px;
  flex-grow: 1;
}

.video-timer {
  color: white;
  font-size: 16px;
}

.progress-bar {
  flex-grow: 1;
  height: 5px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.progress-slider {
  background-color: red;
  height: 100%;
  width: 0%;
  border-radius: 10px;
  display: flex;
  align-items: center;
  position: relative;
}

.circle {
  height: 8px;
  width: 8px;
  background-color: red;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  transform: translateX(-50%);
  opacity: 0;
  transition-duration: .3s;
  transition-timing-function: ease-in;
}

.progress-bar:hover .circle {
  opacity: 1;
  transition-duration: .3s;
  transition-timing-function: ease-out;
}