.video-container{
  width: min-content;
  /* border: 1px solid #00B4D8; */

  /* width: 80%; */
  margin: auto;
  margin-top: 10vh;
    margin-bottom: 10vh;
  /* height: 20vh; */
  /* width: auto; */
}

.video-container iframe{
  width: 640px;
  height: 360px;

}

.content{
  margin-bottom: 10vh;
}

.content a{
  width: auto; 
  color: #ea00a0;
  text-decoration: underline;
  font-style:italic;
  font-weight: 400;
}

.highlight-vid{
  color: #cdd800;
  font-style:italic;
}

.italic{
  font-style: italic;
}

.SCLOrk-title{
  text-align: center;
  font-size: 3rem;
  color: #a6d800;
  font-weight: 400;
  margin-top: 20px;
}

  .SCLOrk-title {
    font-family: monospace, sans-serif;
    white-space: pre; /* preserve spaces if needed */
    margin-bottom: 30px;
  }

  /* flashing bar caret */
  .SCLOrk-title.typing::after {
    content: '|';
    display: inline-block;
    margin-left: 2px;
    animation: blink-caret 0.7s step-end infinite;
  }

  @keyframes blink-caret {
    0%, 100% { opacity: 0; }
    50%      { opacity: 1; }
  }

.description{
  width: 80%;
  margin: auto;
  font-size: 1.2rem;
  color: #a6d800;
  /* font-weight: 400; */
  margin-bottom: 20px;
}

.highlight{
  color: #fbff00;
  font-weight: 400;
}


.audio-file {
  cursor: pointer;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 5px;
  width: max-content;
  font-size: 0.8rem;
}

.highlight-vmeste{
  color: rgb(255, 154, 54);
  /* font-style:italic; */
}

.highlight-ew{
  color: rgb(99, 99, 99);
  /* font-style:italic; */
}

.highlight-escape{
  color: rgb(187, 152, 116);
}

.vmeste-box{
  background-image: url('imgs/reilly.png');
  background-size: contain;
}

.live-subtitle{
  padding: 20px;
  color: #a6d800;
  /* text-decoration:line-through; */
  font-weight: 400;
}

.ew-subtitle{
  padding: 20px;
  color: #424242;
  /* text-decoration:line-through; */
  font-weight: 400;
}

.bold{
  font-weight: 600;
}



.live-image{
  width: 60%;
  margin: auto;
  /* height: 50vh; */
  /* width: min-content; */
  border: 1px solid #a6d800;
  margin-bottom: 5vh;
}



.live-image img{
  /* right: 0; */
  /* height: 100%; */
  width: 100%;
  object-fit: cover;
}









#player {
  position: fixed;
  bottom: 0;
  left: 30%;
  /* transform-translate: 0, 100%; */
  width: 40%;
  margin: 0;
  /* margin: auto; */
  background-color: rgb(7, 0, 19);
  /* text-align: center; */
  /* padding: 10px 0; */
  /* padding-bottom: 10px; */
  /* border-top: 1px solid #ddd; */
}

.playerbg{
  position: absolute;
  /* left: 0; */
  margin: 0;
  background-color: rgb(7, 0, 19);
  /* border: 1px solid red; */
  height: 100%;
  z-index: -10;
  transform: translate(-25%, 0);
  
  width: 200vw;
}

#player-controls {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: 20px;
}

#playPauseBtn {
  color: white;
  color: rgb(29, 165, 255);
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

#seekBar {
  width: 80%;
  -webkit-appearance: none; /* Override for Chrome & Safari */
  appearance: none;
}


#seekBarContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px; /* Adds padding around the seek bar and duration for spacing */
}

#audioDuration {
    margin-left: 10px;
}

/* General Styles for the Seek Bar */
#seekBar {
  -webkit-appearance: none;  /* Removes default styling for WebKit browsers */
  width: 100%;
  height: 1px; /* Makes the bar thinner */
  background: #ffffff; /* Background of the bar */
  cursor: pointer;
  
}

/* Styles for the Thumb (The Dot) */
#seekBar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px; /* Smaller width */
  height: 8px; /* Smaller height */
  background: rgb(29, 165, 255); /* White background */
  margin-top: 6px;
  cursor: pointer;
  border: none; /* Remove borders */
  border-radius: 20%; /* Makes it circular */
}

#seekBar::-moz-range-thumb {
  width: 12px; /* Smaller width */
  height: 12px; /* Smaller height */
  background: #fff; /* White background */
  cursor: pointer;
  border: none; /* Remove borders */
  
  border-radius: 50%; /* Makes it circular */
}

/* Styles for the Track (Part of the bar that shows progress) */
#seekBar::-webkit-slider-runnable-track {
  width: 100%;
  height: 20px;
  
  /* background: #bbb; */
}

#seekBar::-moz-range-track {
  width: 100%;
  
  height: 2px;
  background: #bbb;
}

#seekBar::-moz-range-progress {
  background: #bbb; /* Color of the progress part */
  
}

#seekBar::-webkit-progress-value {
  background: #bbb; /* Color of the progress part; for WebKit browsers */
}









@media (max-width: 900px) {
  html, body {
    overflow-x: hidden;
  }

  .content {
    column-count: 1; /* Switch to a single column on smaller screens */
  }

  .live-image {
    width: 90%;
    margin: auto;
    /* height: 50vh; */
    /* width: min-content; */
    border: 1px solid #a6d800;
    margin-bottom: 5vh;
  }

  .video-container {
    width: 90%;
    margin: auto;
    margin-top: 10vh;
    margin-bottom: 10vh;
  }

.video-container iframe{
  width: 90%;
  height: auto;

}

  .musbox-title{
    font-size: 4vw;
  }

  .score-title{
    font-size: 4vw;
  }

  .score-subtitle{
    font-size: 3vw;
  }

  .score-info{
    padding: 1px;
    font-size: 2.9vw;
  }

  .audio-file {
    font-size: 0.7rem;
  }

  #player{
    width: 100%;
    left: 0;
  }
}