Почему не работает анимация при маленьком окне?

Question

[proschedelay]

Вот строки, только учусь делать, нигде ответа не нашел. При полном окне анимации работают как надо, как только окно уменьшаешь, то "PROSCHE" перестает работать и смещается влево.

<main>
            <div class="name-center">
            <h1 class="text-center">PROSCHE</h1>
            <h2 class="text-undercenter">DELAY</h2>
        </div>
        </main>

main {
	position: relative;
	padding: 0 auto;
	margin: 0 auto;
  }

  .text-center {
	text-align: center;
	font-size: 72px;
	background: linear-gradient(to right, #FFF 20%, rgb(157, 255, 0) 40%, rgb(179, 255, 0) 60%, #FFF 80%);
	background-size: 200% auto;

	color: #000;
	background-clip: text;
	text-fill-color: rgba(128, 128, 128, 0.082);
	-webkit-background-clip: text;
	-webkit-text-fill-color: rgba(128, 128, 128, 0.192);
	
	animation: shine 5s linear infinite; }

	@keyframes shine {
	  to {
		background-position: 200% auto;
	  }
	}
}

  .text-undercenter {
	text-align: center;
	margin-top: 20px;
	background: linear-gradient(to right, #FFF 20%, rgb(0, 195, 255) 40%, rgb(0, 247, 255) 60%, #FFF 80%);
	background-size: 200% auto;
	
	color: #000;
	background-clip: text;
	text-fill-color: rgba(128, 128, 128, 0.158);
	-webkit-background-clip: text;
	-webkit-text-fill-color: rgba(128, 128, 128, 0.192);
	
	animation: shine 5s linear infinite; }

	@keyframes shine {
		to {
		  background-position: 200% center;
		}
	  }

Comments

[Ivan Ustûžanin]

после разборок с фигурными скобками и оставление одного @keyframes приведённый код работает вне зависимости от размера вьюпорта