:root {
  --colour1: #f1c40f;
  --colour2: #2c3e50;
  --speed: 4s;
}

html,
body {
  height: 100%;
}

@keyframes slide {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: 113px;
  }
}
.container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.container .bar {
  min-height: 100px;
  border-radius: 10px;
  width: 452px;
  box-shadow: 0px 10px 13px -6px rgb(44, 62, 80);
  background-color: var(--colour2);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 40px, var(--colour1) 40px, var(--colour1) 80px);
  animation: slide var(--speed) linear infinite;
  will-change: background-position;
}
@media only screen and (max-width: 450px) {
  .container .bar {
    width: 339px;
  }
}
@media only screen and (max-width: 350px) {
  .container .bar {
    width: 226px;
  }
}

/*# sourceMappingURL=style.css.map */