* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body {

}
.container {
	width: 100%;
	padding: 0 20px;
	margin: 0 auto;
}
main {
	h1,
	h2 {
		margin: 20px 0;
	}
	.links {
		ul {
			display: flex;
			list-style: none;
			margin-bottom: 20px;
			li {
				margin: 0 10px;
			}
		}
	}
	.example-one {
		a[href] {
			color: #000;
			background-image: linear-gradient(#000);
			background-repeat: no-repeat;
			background-size: 0 0.1em;
			background-position: center bottom;
			text-decoration: none;
			transition: background-size 0.3s ease;
			&:is(:hover, :focus) {
				background-size: 100% 0.1em;
			}
		}
	}
	.example-two {
		a[href] {
			display: inline-block;
			position: relative;
			padding: 10px 20px;
			text-decoration: none;
			color: #003049;
			transition: color 0.3s;
			&:after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				display: block;
				width: 100%;
				height: 2px;
				background: #003049;
				z-index: -1;
				transition: height 0.3s;
			}
			&:is(:hover, :focus) {
				color: #fff;
				&:after {
					height: 100%;
				}
			}
		}
	}
}