body{
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Quicksand', sans-serif;
}
span{
	margin: 0 15px;
	line-height: .7;
	text-shadow: 0 0 2px rgba(0, 0, 0, .45);
	animation: span 5s ease-in infinite alternate;
}
.main{
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 5%;
	padding-bottom: 5%;
	font-size: 40px;
}
.letter{
	display: inline-flex;
	height: 27.5px;
	width: 25px;
	border: 3px solid white;
	border-radius: 18px;
	box-shadow:
		0 0 2px rgba(0, 0, 0, .75),
		inset 0 0 2px rgba(0, 0, 0, .45);

	animation: letter 5s ease-in-out infinite alternate;
}
@keyframes span {
	0%,30%{ margin: 0 15px; }
	60%,100%{ margin: 0 5px; }
}
@keyframes letter {
	0%,30%{ width: 27px; }
	60%,100%{ width: 30vw; }
}

@media only screen and (max-device-width: 480px) {
	.letter{
		display: inline-flex;
		height: 27.5px;
		width: 25px;
		border: 3px solid white;
		border-radius: 18px;
		box-shadow:
			0 0 2px rgba(0, 0, 0, .75),
			inset 0 0 2px rgba(0, 0, 0, .45);
	
		animation: letter 5s ease-in-out infinite alternate;
	}
	@keyframes span {
		0%,30%{ margin: 0 15px; }
		60%,100%{ margin: 0 5px; }
	}
	@keyframes letter {
		0%,30%{ width: 27px; }
		60%,100%{ width: 30vw; }
	}
  }