html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Poiret One', cursive;
	font-size: 1.3em;
	text-align: center;
}

body {
	transition: all 1s ease-in-out;
	overflow: hidden;
}

section {
	height: 100%;
	display:flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-content: space-around;
	align-items: center;
	
	> *:first-child {
		margin-top: 0;
	}
	
	> *:last-child {
		margin-bottom: 0;
	}
	
	h1 {
		font-size: 2em;
		font-variant: small-caps;
		text-transform: lowercase;
	}
	
	a {
		display: inline-block;
		color: black;
		text-decoration: none;
		transition: all 1s;
		
		&:after {
			content: "";
			display: block;
			width: 100%;
			height: 1px;
			background-color: #000;
			transform: scaleX(0);
			transition: all 1s;
		}
		
		&:hover:after {
			transform: scaleX(1);
		}
	}
}

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Poiret One', cursive;
	font-size: 1.3em;
	text-align: center;
}

body {
	transition: all 1s ease-in-out;
	overflow: hidden;
}

section {
	height: 100%;
	display:flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-content: space-around;
	align-items: center;
	
	> *:first-child {
		margin-top: 0;
	}
	
	> *:last-child {
		margin-bottom: 0;
	}
	
	h1 {
		font-size: 2em;
		font-variant: small-caps;
		text-transform: lowercase;
	}
	
	a {
		display: inline-block;
		color: black;
		text-decoration: none;
		transition: all 1s;
		
		&:after {
			content: "";
			display: block;
			width: 100%;
			height: 0.03em;
			background-color: #000;
			transform: scaleX(0);
			transition: all 1s;
		}
		
		&:hover:after {
			transform: scaleX(1);
		}
	}
}

Make the underlining effect height dynamic
Make the underlining effect height dynamic
