body {
  margin: 0;
  overflow: hidden;
  font-family: "Courier New", monospace;
  background-color: black;
}

.matrix-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.matrix-text {
  color: #00ff00;
  font-size: 24px;
  white-space: pre;
  position: absolute;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.matrix-text span {
  position: absolute;
  top: -50px;
  animation: matrix-fall 5s linear infinite;
}

.name-text {
  color: #00ff00;
  font-size: 24px;
  white-space: pre;
  position: absolute;
  overflow: hidden;
  height: 100%;
  width: 100%;
  display: flex; /* Use flexbox */
  align-items: flex-start;
  justify-content: center;
}

.name-text span {
  flex: 1;
  text-align: center;
  animation: matrix-fall 5s linear infinite;
}

@keyframes matrix-fall {
  to {
    transform: translateY(calc(100vh + 50px));
  }
}