
@media (prefers-reduced-motion: no-preference) {
  .App-logo {
      animation: App-logo-spin infinite 20s linear;
    }
  
  /*
  TODO look into here for improved text width 
    https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container
  */
  .header_scroller {
    position:absolute;
    display: inline-block;
    letter-spacing: 2rem;
    font-size: calc((75vw - 4.5rem) / 6);
    font-family: Arial, Helvetica, sans-serif;
    /* Disable selectable */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
  }
  
  .rolling-translate{
    animation: rolling-translate infinite 5s linear;
  
  }
  .rolling-translate_2{
    animation: rolling-translate_2 infinite 5s linear;
  }
  }


  @keyframes rolling-translate {
    0% {
      transform: translate(75vw);
    }
    100% {
      transform: translate(-100vw);
    }
  }
  @keyframes rolling-translate_2 {
    0% {
      transform: translate(-100vw);
    }
    100% {
      transform: translate(-275vw);
    }
  }