.bass{
	max-width: 1600px;
	margin: 0 auto;
	padding: 0px 20px 0;
	text-align: center;
	.bass{
	margin-top: 0vh;
}
@media only screen and (max-width: 1200px){
.bass{
	max-width: 1600px;
}	
}

.hr{
border: 1px solid green;
}

#pun{
	font-weight: 900;
	color: black;
       font-size: 10px;
}
.pun{
	color: yellow;
}
.pun span{
	color: green;
}
p span{
	display: inline-block;
	position: relative;
	overflow: hidden;
	font-size: clamp(10px, 8vw, 50px);
}

p span::after {
       content: "";
       display: block;
       position: absolute;
       width: 100%;
       height: 100%;
       top: 0;
       left: 0;
       transform: translateX(-100%);
}

.pun:nth-child(1){
	font-weight: 300;
	animation: txt-appearance 2s 1s forwards;
}

#pun:nth-child(2){
	animation: txt-appearance 0s 1.25s forwards;
}

.pun:nth-child(1) span::after{
	background: blue;
	animation: slide-in 0.75s ease-out reverse,
       slide-out 0.75s 2s ease-out forwards;
}

#pun:nth-child(2) span::after{
	background: green;
	animation: slide-in 0.75s 0.3s ease-out forwards,
    slide-out 0.75s 1.3s ease-out forwards;
}

@keyframes slide-in{
	100%{
		transform: translateX(0%);
	}
}
@keyframes slide-out{
	100%{
		transform: translateX(100%);
	}
}
@keyframes txt-appearance{
	100%{
		color: darkblue;
	}
}




@media (max-width: 1200px){

p span{
	display: inline-block;
	position: relative;
	overflow: hidden;
	font-size: clamp(0px, 6vw, 50px);
}


}