/* Style 1: Racing Stripe */
.racing-stripe {
  font-family: var(--font-body);
  font-size: 3rem;
  font-weight: 900;
  text-transform: uppercase;
  background: linear-gradient(135deg, #1b2cefc9, #906be7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
  animation: speed 2s ease-in-out infinite; }

.racing-stripe::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -20px;
  right: -20px;
  height: 5px;
  background: linear-gradient(90deg, transparent, #3480cd, transparent);
  transform: translateY(-50%);
  animation: stripe 3s linear infinite; }

@keyframes speed {
  0%, 100% {
    transform: skewX(-3deg); }
  50% {
    transform: skewX(3deg); } }

@keyframes stripe {
  0% {
    transform: translateX(-100%) translateY(-50%); }
  100% {
    transform: translateX(100%) translateY(-50%); } }

.title_container {
  position: relative;
  padding: 2rem;
  margin: 2rem 0;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px; }

/* Speed Lines - With Wide Racing Stripes */
.speed-lines {
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  position: relative;
  padding: 0.15rem 0.1rem;
  isolation: isolate; }

.speed-lines::before {
  content: '';
  position: absolute;
  inset: -10%;
  background: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(255, 255, 255, 0.15) 20px, rgba(255, 255, 255, 0.15) 40px);
  animation: speed-lines 1.5s linear infinite;
  z-index: -1; }

.speed_lines_container {
  position: inherit;
  display: inline-block;
  padding: 0rem;
  margin: 1rem; }

@media (max-width: 768px) {
  .racing-stripe {
    font-size: 1.5rem; } }
