<h1>Breathing</h1>

/* 
	Weight axis: 100 – 700
	Width axis: 85 – 100
*/
@font-face {
	font-family: "IBM Plex Sans Roman";
	src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/IBMPlexSansVar-Roman.ttf");
}

* {
	box-sizing: border-box;
}

body {
	font-family: "IBM Plex Sans Roman", Times;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 100vh;
	background-color: #B2DFDB;
}

h1 {
	font-weight: 100;
	font-size: 10vw;
	font-variation-settings: 'wght' 100, 'wdth' 85;
	animation: breathe 4000ms infinite forwards;
}

@keyframes breathe {
	60% {
		font-variation-settings: 'wght' 700, 'wdth' 100;
	}
	
	100% {
		font-variation-settings: 'wght' 100, 'wdth' 85;
	}
}