#transcript {
  width: 100%;
  margin: auto;
  font-family: Arial, sans-serif;
    background-color:white;
    margin-top:10%; 
    float:right;
    position:relative;
}

.transcript-body {
  height: 300%;
  overflow-y: scroll;
    padding:1%;
}

@media only screen and (max-width:500px){
    .transcript-body{
        height:25%;
    }
}

@media only screen and (max-width:768px) and (min-width:500px){
    .transcript-body{
        height:25%;
    }
}

@media only screen and (max-width:100px) and (min-width:768px){
    .transcript-body{
        height:25%;
    }
}

.transcript-line {
  position: relative;
  padding: 3%;
  cursor: pointer;
  line-height: 100%;
}

.transcript-timestamp {
  position: absolute;
  display: inline-block;
  color: darkgrey;
  width: 15%;
    font-weight:bold;
}

.transcript-timestamp.is-active {
    color:white;
}

.transcript-text {
  display: block;
  margin-left: 15%;
    font-color:white;
}

.transcript-line:hover {
  background-color: darkblue;
    color:#ffffff;
}

.transcript-line.is-active {
  background-color: darkblue;
    color:#ffffff;
    
}


article {
    background-color:darkblue;
    color:white;
    padding:5%;
    position:static;
}

/*media queries*/

@media screen and (max-width: 500px) and (min-width: 0px) {
  .transcript-text {
margin-left: 20%;
  }
}

@media screen and (max-width:768px) and (min-width:500px) {
    .transcript-text {margin-left:20%;}
}

@media screen and (max-width: 1000px) and (min-width: 768px) {
  .transcript-text {
margin-left: 20%;
  }
}

@media screen and (max-width: 1500px) and (min-width: 1000px) {
  .transcript-text {
margin-left: 25%;
  }
}