* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'poppins', sans-serif;
  border-radius: 15px;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.container {
  display: flex;
  gap: 15px;
  margin: 20px 10px;
  background-color: rgba(137, 203, 122, 0.723);
  padding: 10px;
}

.main-video-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  box-shadow: 0 1px 2px rgba(13, 13, 13, 0);
}

.main-video-content video {
  width: 600px;
}

.playlist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
  max-height: 400px;
  padding: 2px;
}

.playlist::-webkit-scrollbar {
  width: 6px;
}
.playlist::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: rgba(10, 10, 10, 0.893); 
}

.playlist-video {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  box-shadow: 0 1px 2px rgb(7, 7, 7);
  margin-right: 5px;
  cursor: pointer;
}

.active {
  background-color: #3f3ff6;
  color:#97ba78 ;
}

.playlist-video video{
  width: 100px;
}

@media (max-width: 900px) {
  .container {
    flex-direction: column;
    margin-top: 60px;
    height: -webkit-fill-available;
  }

  .container, .main-video-content video {
    width: 100%;
  }
}