.banner {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.banner-inner {
  width: 950px;
  height: 150px;

  background: url("assets/images/kirbybanner.png") fixed;
  background-color: #ffffff;

  border: 1px dashed #000000;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;

  font-family:  monospace;

  image-rendering: pixelated;

  position: relative;
}
.banner-title {
  font-size: 22px;
  font-weight: normal;

  text-transform: lowercase;
  letter-spacing: 2px;

  padding: 10px 22px;

  background: #ffffff;
  border: 1px dashed #000000;

  position: relative;
  display: inline-block;

  font-family: "Dogica", monospace;

  image-rendering: pixelated;

  color: #000000;

  overflow: hidden;

  /* base terminal */
  animation: terminalFlicker 2.5s infinite steps(5, end);
}

/* pequeño efecto “retro UI box” */
.banner-title::before {
  font-weight: bold;
  content: "✦ ₊ ⊹　⁺ ";
}

@keyframes terminalFlicker {
  0% {
    color: #9c0cfc;
  }

  25% {
    color: #ff4fbf; /* rosa Y2K */
  }

  50% {
    color: #00d9ff; /* cyan CRT */
  }

  75% {
    color: #a855f7; /* morado pixel */
  }

  100% {
    color: #2d99ff;
  }
}

.banner-ribbon {
  width: 100%;
  display: flex;
  justify-content: center;

  margin-top: 4px;
  margin-bottom: 10px;
}

.ribbon-track {
  font-weight: bold;
  width: 950px;
  color: rgb(90, 54, 69);

  background: #ffffff;
  border: 1px dashed #000000;

  font-family: "Dogica", monospace;
  font-size: 10px;

  overflow: hidden;
  white-space: nowrap;

  position: relative;

  padding: 4px 0;
}

.ribbon-track span {
  display: inline-block;

  padding-left: 100%;

  animation: scrollText 40s linear infinite;
}

@keyframes scrollText {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}