const stylesheet = new CSSStyleSheet()

stylesheet.replaceSync(`
:host {
  align-items: center;
  background-color: #000;
  display: flex;
  height: 100%;
  position: absolute;
  width: 100%;
}

.container {
  font-size: 0.5vh;
  margin: auto;
}

.barcode {
  margin: 0 auto;
  position: relative;
}

.barcode > div {
  float: left;
  margin-right: 2em;
  transform-origin: 0 0;
}
.barcode > div:nth-child(1) {
  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 0%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 3.4482758621%);
}
.barcode > div:nth-child(2) {
  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 3.4482758621%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 6.8965517241%);
}
.barcode > div:nth-child(3) {
  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 6.8965517241%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 10.3448275862%);
}
.barcode > div:nth-child(4) {
  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 10.3448275862%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 13.7931034483%);
}
.barcode > div:nth-child(5) {
  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 13.7931034483%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 17.2413793103%);
}
.barcode > div:nth-child(6) {
  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 17.2413793103%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 20.6896551724%);
}
.barcode > div:nth-child(7) {
  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 20.6896551724%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 24.1379310345%);
}
.barcode > div:nth-child(8) {
  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 24.1379310345%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 27.5862068966%);
}
.barcode > div:nth-child(9) {
  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 27.5862068966%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 31.0344827586%);
}
.barcode > div:nth-child(10) {
  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 31.0344827586%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 34.4827586207%);
}
.barcode > div:nth-child(11) {
  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 34.4827586207%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 37.9310344828%);
}
.barcode > div:nth-child(12) {
  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 37.9310344828%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 41.3793103448%);
}
.barcode > div:nth-child(13) {
  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 41.3793103448%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 44.8275862069%);
}
.barcode > div:nth-child(14) {
  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 44.8275862069%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 48.275862069%);
}
.barcode > div:nth-child(15) {
  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 48.275862069%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 51.724137931%);
}
.barcode > div:nth-child(16) {
  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 51.724137931%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 55.1724137931%);
}
.barcode > div:nth-child(17) {
  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 55.1724137931%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 58.6206896552%);
}
.barcode > div:nth-child(18) {
  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 58.6206896552%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 62.0689655172%);
}
.barcode > div:nth-child(19) {
  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 62.0689655172%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 65.5172413793%);
}
.barcode > div:nth-child(20) {
  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 65.5172413793%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 68.9655172414%);
}
.barcode > div:nth-child(21) {
  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 68.9655172414%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 72.4137931034%);
}
.barcode > div:nth-child(22) {
  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 72.4137931034%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 75.8620689655%);
}
.barcode > div:nth-child(23) {
  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 75.8620689655%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 79.3103448276%);
}
.barcode > div:nth-child(24) {
  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 79.3103448276%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 82.7586206897%);
}
.barcode > div:nth-child(25) {
  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 82.7586206897%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 86.2068965517%);
}
.barcode > div:nth-child(26) {
  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 86.2068965517%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 89.6551724138%);
}
.barcode > div:nth-child(27) {
  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 89.6551724138%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 93.1034482759%);
}
.barcode > div:nth-child(28) {
  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 93.1034482759%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 96.5517241379%);
}
.barcode > div:nth-child(29) {
  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 96.5517241379%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 100%);
}
.barcode > div:nth-child(30) {
  background: linear-gradient(90deg, oklch(80% 0.3 240deg) 100%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 103.4482758621%);
}

.barcode div:nth-child(1),
.barcode div:nth-child(2),
.barcode div:nth-child(15),
.barcode div:nth-child(16),
.barcode div:nth-child(29),
.barcode div:nth-child(30) {
  height: 27em;
}

.barcode div:nth-child(1),
.barcode div:nth-child(2),
.barcode div:nth-child(3),
.barcode div:nth-child(5),
.barcode div:nth-child(8),
.barcode div:nth-child(10),
.barcode div:nth-child(12),
.barcode div:nth-child(13),
.barcode div:nth-child(15),
.barcode div:nth-child(16),
.barcode div:nth-child(18),
.barcode div:nth-child(19),
.barcode div:nth-child(22),
.barcode div:nth-child(25),
.barcode div:nth-child(27),
.barcode div:nth-child(28),
.barcode div:nth-child(29),
.barcode div:nth-child(30) {
  width: 0.6em;
}

.barcode div:nth-child(3),
.barcode div:nth-child(4),
.barcode div:nth-child(5),
.barcode div:nth-child(6),
.barcode div:nth-child(7),
.barcode div:nth-child(8),
.barcode div:nth-child(9),
.barcode div:nth-child(10),
.barcode div:nth-child(11),
.barcode div:nth-child(12),
.barcode div:nth-child(13),
.barcode div:nth-child(14),
.barcode div:nth-child(17),
.barcode div:nth-child(18),
.barcode div:nth-child(19),
.barcode div:nth-child(20),
.barcode div:nth-child(21),
.barcode div:nth-child(22),
.barcode div:nth-child(23),
.barcode div:nth-child(24),
.barcode div:nth-child(25),
.barcode div:nth-child(26),
.barcode div:nth-child(27),
.barcode div:nth-child(28) {
  height: 24em;
}

.barcode div:nth-child(6),
.barcode div:nth-child(7),
.barcode div:nth-child(9),
.barcode div:nth-child(11),
.barcode div:nth-child(14),
.barcode div:nth-child(23),
.barcode div:nth-child(24) {
  width: 1.2em;
}

.barcode div:nth-child(17),
.barcode div:nth-child(20),
.barcode div:nth-child(21),
.barcode div:nth-child(26) {
  width: 1.8em;
}

.barcode div:nth-child(4) {
  width: 2.4em;
}

.barcode div:nth-child(1),
.barcode div:nth-child(2),
.barcode div:nth-child(3),
.barcode div:nth-child(4),
.barcode div:nth-child(6),
.barcode div:nth-child(7),
.barcode div:nth-child(8),
.barcode div:nth-child(11),
.barcode div:nth-child(13),
.barcode div:nth-child(14),
.barcode div:nth-child(15),
.barcode div:nth-child(16),
.barcode div:nth-child(18),
.barcode div:nth-child(19),
.barcode div:nth-child(22),
.barcode div:nth-child(24),
.barcode div:nth-child(25),
.barcode div:nth-child(29),
.barcode div:nth-child(30) {
  margin-right: 0.6em;
}

.barcode div:nth-child(12),
.barcode div:nth-child(17),
.barcode div:nth-child(20),
.barcode div:nth-child(21),
.barcode div:nth-child(23),
.barcode div:nth-child(26),
.barcode div:nth-child(28) {
  margin-right: 1.2em;
}

.barcode div:nth-child(5),
.barcode div:nth-child(9),
.barcode div:nth-child(10),
.barcode div:nth-child(27) {
  margin-right: 1.8em;
}

@keyframes bar-1 {
  0%, 16% {
    transform: scaleY(0);
  }
  66% {
    transform: scaleY(1);
  }
  81% {
    opacity: 1;
  }
  91% {
    opacity: 0;
  }
  99.5% {
    transform: scaleY(1);
    opacity: 0;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
.barcode > div:nth-child(1) {
  animation: bar-1 5s ease-out infinite forwards;
}

@keyframes bar-2 {
  0%, 24% {
    transform: scaleY(0);
  }
  61% {
    transform: scaleY(1);
  }
  81% {
    opacity: 1;
  }
  93% {
    opacity: 0;
  }
  99.5% {
    transform: scaleY(1);
    opacity: 0;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
.barcode > div:nth-child(2) {
  animation: bar-2 5s ease-out infinite forwards;
}

@keyframes bar-3 {
  0%, 18% {
    transform: scaleY(0);
  }
  61% {
    transform: scaleY(1);
  }
  72% {
    opacity: 1;
  }
  93% {
    opacity: 0;
  }
  99.5% {
    transform: scaleY(1);
    opacity: 0;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
.barcode > div:nth-child(3) {
  animation: bar-3 5s ease-out infinite forwards;
}

@keyframes bar-4 {
  0%, 3% {
    transform: scaleY(0);
  }
  47% {
    transform: scaleY(1);
  }
  81% {
    opacity: 1;
  }
  88% {
    opacity: 0;
  }
  99.5% {
    transform: scaleY(1);
    opacity: 0;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
.barcode > div:nth-child(4) {
  animation: bar-4 5s ease-out infinite forwards;
}

@keyframes bar-5 {
  0%, 2% {
    transform: scaleY(0);
  }
  67% {
    transform: scaleY(1);
  }
  73% {
    opacity: 1;
  }
  93% {
    opacity: 0;
  }
  99.5% {
    transform: scaleY(1);
    opacity: 0;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
.barcode > div:nth-child(5) {
  animation: bar-5 5s ease-out infinite forwards;
}

@keyframes bar-6 {
  0%, 14% {
    transform: scaleY(0);
  }
  54% {
    transform: scaleY(1);
  }
  74% {
    opacity: 1;
  }
  93% {
    opacity: 0;
  }
  99.5% {
    transform: scaleY(1);
    opacity: 0;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
.barcode > div:nth-child(6) {
  animation: bar-6 5s ease-out infinite forwards;
}

@keyframes bar-7 {
  0%, 9% {
    transform: scaleY(0);
  }
  60% {
    transform: scaleY(1);
  }
  76% {
    opacity: 1;
  }
  89% {
    opacity: 0;
  }
  99.5% {
    transform: scaleY(1);
    opacity: 0;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
.barcode > div:nth-child(7) {
  animation: bar-7 5s ease-out infinite forwards;
}

@keyframes bar-8 {
  0%, 27% {
    transform: scaleY(0);
  }
  48% {
    transform: scaleY(1);
  }
  73% {
    opacity: 1;
  }
  93% {
    opacity: 0;
  }
  99.5% {
    transform: scaleY(1);
    opacity: 0;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
.barcode > div:nth-child(8) {
  animation: bar-8 5s ease-out infinite forwards;
}

@keyframes bar-9 {
  0%, 16% {
    transform: scaleY(0);
  }
  50% {
    transform: scaleY(1);
  }
  73% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  99.5% {
    transform: scaleY(1);
    opacity: 0;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
.barcode > div:nth-child(9) {
  animation: bar-9 5s ease-out infinite forwards;
}

@keyframes bar-10 {
  0%, 9% {
    transform: scaleY(0);
  }
  57% {
    transform: scaleY(1);
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  99.5% {
    transform: scaleY(1);
    opacity: 0;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
.barcode > div:nth-child(10) {
  animation: bar-10 5s ease-out infinite forwards;
}

@keyframes bar-11 {
  0%, 14% {
    transform: scaleY(0);
  }
  58% {
    transform: scaleY(1);
  }
  75% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  99.5% {
    transform: scaleY(1);
    opacity: 0;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
.barcode > div:nth-child(11) {
  animation: bar-11 5s ease-out infinite forwards;
}

@keyframes bar-12 {
  0%, 15% {
    transform: scaleY(0);
  }
  60% {
    transform: scaleY(1);
  }
  75% {
    opacity: 1;
  }
  93% {
    opacity: 0;
  }
  99.5% {
    transform: scaleY(1);
    opacity: 0;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
.barcode > div:nth-child(12) {
  animation: bar-12 5s ease-out infinite forwards;
}

@keyframes bar-13 {
  0%, 8% {
    transform: scaleY(0);
  }
  53% {
    transform: scaleY(1);
  }
  75% {
    opacity: 1;
  }
  91% {
    opacity: 0;
  }
  99.5% {
    transform: scaleY(1);
    opacity: 0;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
.barcode > div:nth-child(13) {
  animation: bar-13 5s ease-out infinite forwards;
}

@keyframes bar-14 {
  0%, 17% {
    transform: scaleY(0);
  }
  47% {
    transform: scaleY(1);
  }
  76% {
    opacity: 1;
  }
  91% {
    opacity: 0;
  }
  99.5% {
    transform: scaleY(1);
    opacity: 0;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
.barcode > div:nth-child(14) {
  animation: bar-14 5s ease-out infinite forwards;
}

@keyframes bar-15 {
  0%, 26% {
    transform: scaleY(0);
  }
  49% {
    transform: scaleY(1);
  }
  81% {
    opacity: 1;
  }
  89% {
    opacity: 0;
  }
  99.5% {
    transform: scaleY(1);
    opacity: 0;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
.barcode > div:nth-child(15) {
  animation: bar-15 5s ease-out infinite forwards;
}

@keyframes bar-16 {
  0%, 21% {
    transform: scaleY(0);
  }
  55% {
    transform: scaleY(1);
  }
  72% {
    opacity: 1;
  }
  92% {
    opacity: 0;
  }
  99.5% {
    transform: scaleY(1);
    opacity: 0;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
.barcode > div:nth-child(16) {
  animation: bar-16 5s ease-out infinite forwards;
}

@keyframes bar-17 {
  0%, 23% {
    transform: scaleY(0);
  }
  50% {
    transform: scaleY(1);
  }
  77% {
    opacity: 1;
  }
  88% {
    opacity: 0;
  }
  99.5% {
    transform: scaleY(1);
    opacity: 0;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
.barcode > div:nth-child(17) {
  animation: bar-17 5s ease-out infinite forwards;
}

@keyframes bar-18 {
  0%, 21% {
    transform: scaleY(0);
  }
  68% {
    transform: scaleY(1);
  }
  81% {
    opacity: 1;
  }
  91% {
    opacity: 0;
  }
  99.5% {
    transform: scaleY(1);
    opacity: 0;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
.barcode > div:nth-child(18) {
  animation: bar-18 5s ease-out infinite forwards;
}

@keyframes bar-19 {
  0%, 8% {
    transform: scaleY(0);
  }
  68% {
    transform: scaleY(1);
  }
  81% {
    opacity: 1;
  }
  93% {
    opacity: 0;
  }
  99.5% {
    transform: scaleY(1);
    opacity: 0;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
.barcode > div:nth-child(19) {
  animation: bar-19 5s ease-out infinite forwards;
}

@keyframes bar-20 {
  0%, 2% {
    transform: scaleY(0);
  }
  67% {
    transform: scaleY(1);
  }
  79% {
    opacity: 1;
  }
  89% {
    opacity: 0;
  }
  99.5% {
    transform: scaleY(1);
    opacity: 0;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
.barcode > div:nth-child(20) {
  animation: bar-20 5s ease-out infinite forwards;
}

@keyframes bar-21 {
  0%, 16% {
    transform: scaleY(0);
  }
  53% {
    transform: scaleY(1);
  }
  73% {
    opacity: 1;
  }
  89% {
    opacity: 0;
  }
  99.5% {
    transform: scaleY(1);
    opacity: 0;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
.barcode > div:nth-child(21) {
  animation: bar-21 5s ease-out infinite forwards;
}

@keyframes bar-22 {
  0%, 25% {
    transform: scaleY(0);
  }
  56% {
    transform: scaleY(1);
  }
  78% {
    opacity: 1;
  }
  88% {
    opacity: 0;
  }
  99.5% {
    transform: scaleY(1);
    opacity: 0;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
.barcode > div:nth-child(22) {
  animation: bar-22 5s ease-out infinite forwards;
}

@keyframes bar-23 {
  0%, 7% {
    transform: scaleY(0);
  }
  61% {
    transform: scaleY(1);
  }
  73% {
    opacity: 1;
  }
  92% {
    opacity: 0;
  }
  99.5% {
    transform: scaleY(1);
    opacity: 0;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
.barcode > div:nth-child(23) {
  animation: bar-23 5s ease-out infinite forwards;
}

@keyframes bar-24 {
  0%, 1% {
    transform: scaleY(0);
  }
  59% {
    transform: scaleY(1);
  }
  81% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  99.5% {
    transform: scaleY(1);
    opacity: 0;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
.barcode > div:nth-child(24) {
  animation: bar-24 5s ease-out infinite forwards;
}

@keyframes bar-25 {
  0%, 19% {
    transform: scaleY(0);
  }
  52% {
    transform: scaleY(1);
  }
  80% {
    opacity: 1;
  }
  93% {
    opacity: 0;
  }
  99.5% {
    transform: scaleY(1);
    opacity: 0;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
.barcode > div:nth-child(25) {
  animation: bar-25 5s ease-out infinite forwards;
}

@keyframes bar-26 {
  0%, 5% {
    transform: scaleY(0);
  }
  62% {
    transform: scaleY(1);
  }
  78% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  99.5% {
    transform: scaleY(1);
    opacity: 0;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
.barcode > div:nth-child(26) {
  animation: bar-26 5s ease-out infinite forwards;
}

@keyframes bar-27 {
  0%, 13% {
    transform: scaleY(0);
  }
  68% {
    transform: scaleY(1);
  }
  79% {
    opacity: 1;
  }
  88% {
    opacity: 0;
  }
  99.5% {
    transform: scaleY(1);
    opacity: 0;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
.barcode > div:nth-child(27) {
  animation: bar-27 5s ease-out infinite forwards;
}

@keyframes bar-28 {
  0%, 11% {
    transform: scaleY(0);
  }
  62% {
    transform: scaleY(1);
  }
  77% {
    opacity: 1;
  }
  91% {
    opacity: 0;
  }
  99.5% {
    transform: scaleY(1);
    opacity: 0;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
.barcode > div:nth-child(28) {
  animation: bar-28 5s ease-out infinite forwards;
}

@keyframes bar-29 {
  0%, 3% {
    transform: scaleY(0);
  }
  55% {
    transform: scaleY(1);
  }
  73% {
    opacity: 1;
  }
  88% {
    opacity: 0;
  }
  99.5% {
    transform: scaleY(1);
    opacity: 0;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
.barcode > div:nth-child(29) {
  animation: bar-29 5s ease-out infinite forwards;
}

@keyframes bar-30 {
  0%, 13% {
    transform: scaleY(0);
  }
  49% {
    transform: scaleY(1);
  }
  79% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  99.5% {
    transform: scaleY(1);
    opacity: 0;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
.barcode > div:nth-child(30) {
  animation: bar-30 5s ease-out infinite forwards;
}
`)
class ScanLoadingScreen extends HTMLElement {
    
    constructor() {
        super();
        const shadowRoot = this.attachShadow({mode: 'open'});
        shadowRoot.adoptedStyleSheets = [stylesheet]
        const container = document.createElement('div');
        container.classList.add('container');
        const barcode = document.createElement('div');
        barcode.classList.add('barcode');
        for(let i = 0; i < 30; i++) {
            const div = document.createElement('div');
            barcode.appendChild(div);
        }
        container.appendChild(barcode);
        shadowRoot.appendChild(container);
    }
}
customElements.define('scan-loading-screen', ScanLoadingScreen);