.tetris-container{
  width: 70%;
  height: 100%;

}

.tetris-text__wrapper{
  max-width: 320px;
  width: 30%;
  object-fit: scale-down;
}

.tetris-text {
    font-size: 3.317vw;
    display: flex;
    position: relative;
    overflow: hidden;
    user-select: none;
  cursor: pointer;
}

.tetris-text__wrapper .tetris-text:nth-child(even):hover {
color: var(--color-blue);

}

.tetris-text__wrapper .tetris-text:nth-child(even):focus{
  color: var(--color-blue);
 
}


.tetris-text__wrapper .tetris-text:nth-child(odd):hover {
  color: var(--color-yellow);

  }
  
  .tetris-text__wrapper .tetris-text:nth-child(odd):focus{
    color: var(--color-yellow);
  }
  .tetris-text__wrapper .tetris-text:nth-child(7):hover,
  .tetris-text__wrapper .tetris-text:nth-child(3):hover {
    color: var(--color-orange);
    }
    .tetris-text__wrapper .tetris-text:nth-child(7):focus,
    .tetris-text__wrapper .tetris-text:nth-child(3):focus{
      color: var(--color-orange);
    }


.tetris-text__group{
    display: flex;
    position: relative;
    overflow: hidden;
    user-select: none;
   
}

.tetris-text span {

    will-change: transform;
    padding-right: 10px;
    font-weight: 700;
    text-transform: uppercase;
    animation: scrollLeft 11s linear infinite;
    display: flex;
    flex-shrink: 0;
    flex-wrap: nowrap;
    justify-content: space-around;
    list-style: none;
   
}

.tetris-text__wrapper :nth-child(even) span{
    animation: scrollRight 11s linear infinite;
}

@keyframes scrollLeft {
    from {
      transform: translateX(0);
    }

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

@keyframes scrollRight {
    from {
      transform: translateX(-100%);
    }

    to {
      transform: translateX(calc(0));
    }
}

.tetris-text__wrapper :nth-child(2) .tetris-text__group :nth-child(1){
  margin-left: -42%;  
}

.tetris-text__wrapper :nth-child(4) .tetris-text__group :nth-child(1){
  margin-left: -72%;  
}

.tetris-text__wrapper :nth-child(6) .tetris-text__group :nth-child(1){
  margin-left: -74%;  
}

.tetris-text__wrapper :nth-child(10) .tetris-text__group :nth-child(1){
  margin-left: -72%;  
}

.tetris-text__wrapper :nth-child(14) .tetris-text__group :nth-child(1){
  margin-left: -77%;  
}

.tetris-text__wrapper :nth-child(3) .tetris-text__group :nth-child(1){
     margin-left: -10%;   
}

.tetris-text__wrapper :nth-child(5) .tetris-text__group :nth-child(1){
  margin-left: -50%;   
} 

.tetris-text__wrapper :nth-child(7) .tetris-text__group :nth-child(1){
  margin-left: -52%;   
} 


.tetris-text__wrapper :nth-child(13) .tetris-text__group :nth-child(1){
  margin-left: -42%;   
} 


.tetris-text__wrapper :nth-child(15) .tetris-text__group :nth-child(1){
  margin-left: -32%;   
}