.wrapper {
    width: 90%;
    height: 90%;
}
.box {
    object-fit: contain;
}
.player {
    visibility: hidden;
    position: absolute;
    top: 10%;
    left: 10%;
    border: 5px solid white;
    background-color: gray;
}
#scroll-container {
  border: 3px solid black;
  border-radius: 5px;
  height: 100px;
  width: 500px;
  overflow: hidden;
}

#scroll-text {
  height: auto;
  text-align: center;
  overflow: visible;
  
  /* animation properties */
  -moz-transform: translateY(100%);
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  
  -moz-animation: my-animation 22s linear infinite;
  -webkit-animation: my-animation 22s linear infinite;
  animation: my-animation 22s linear infinite;
}

/* for Firefox */
@-moz-keyframes my-animation {
  from { -moz-transform: translateY(100%); }
  to { -moz-transform: translateY(-100%); }
}

/* for Chrome */
@-webkit-keyframes my-animation {
  from { -webkit-transform: translateY(100%); }
  to { -webkit-transform: translateY(-100%); }
}

@keyframes my-animation {
  from {
    -moz-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  to {
    -moz-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}

#datedisplay {
border: 3px solid black;
border-radius: 5px;
height: 50px;
width: 800px;
overflow: hidden;
}

#datedisplaytext {
  text-align: center;
  vertical-align: center;
  font-size: 1.5em;
}