body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: Arial, sans-serif;
}

body {
    display: grid;
    grid-template-rows: 5% 1fr 5%;
grid-gap: 2rem;
background-color: black;
}

.title-container {
display: flex;
align-items: center;
justify-content: center;
}

.title {
    font-size: 4em;
    color: #fff;
}


.tape-container {
position: relative;
overflow: hidden;
}

.tape {
  position: absolute;
    width: 200%;
    height: 100%;
    background: repeating-linear-gradient(
      -45deg,
      #ffcc00,
      #ffcc00 10px,
      #000 10px,
      #000 20px
    );
    top: 0;
    left: 0;
    animation: scrollTape 20s linear infinite;
}

.tape-2 {
animation-direction: reverse;
}

@keyframes scrollTape {
    0% {
      left: 0;
    }
    100% {
      left: -100%;
    }
}

.loading:after {
content: "...";
overflow: hidden;
display: inline-block;
vertical-align: bottom;
animation: ellipsis-dot 3s infinite .3s;
animation-fill-mode: forwards;
width: 1.25em;
}

@keyframes ellipsis-dot {
25% {
content: "";
}
50% {
content: ".";
}
75% {
content: "..";
}
100% {
content: "...";
}
}