@import url('https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,MONO@-15..0,300..1000,0..1,0..1,0..1&display=swap');

:root {
  font-size: 100%;
  font-family: 'Recursive', monospace;
}

/*https://codepen.io/elisabethdiang/pen/RwNXxyq*/

.var91 { color: black;
         font-size: 20px;}

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
    background: #f7f7f7;
}

#body{
	width: 100%;
	height: 80vh;
    padding-top: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Recursive', monospace;
	font-size: 42px;
	background: #f7f7f7;
}
span{
	margin: 0 15px;
    text-align: center;
	line-height: .7;
	text-shadow: 0 0 2px rgba(0, 0, 0, .45);
	animation: span 3s ease-in infinite alternate;
}
.main{
	display: flex;
	justify-content: center;
	align-items: flex-start;
    text-align: center;
  
  	
	@media(max-width: 600px){ transform: scale(.65); }
}
.letter{
	display: inline-flex;
	height: 30px;
	width: 27px;
	/* border: 2.5px solid #FF1EAD; */
	border: 2.35px solid black;
	border-radius: 14px;
	box-shadow:
		0 0 2px rgba(0, 0, 0, .75),
		inset 0 0 2px rgba(0, 0, 0, .45);

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