html,
body {
	width: 100%;
	height: 100%;
	font-size: 100%;
}

body {
	background-color: navy;
}

#wrapper {
	width: 20%;
	min-width: min-content;
	height: 100%;
	margin: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

#wrapper a {
	width: 100%;
	height: auto;
	padding: 1rem 0;
	margin: 1rem 0;
	font-size: 1.2rem;
	background-color: #fff;
	border-radius: 100vw;
	color: navy;
	position: relative;
	text-decoration: none;
	white-space: nowrap;
	/* ????? */
	overflow: hidden;
	/* ??: ::before ? ::after ??????????? */
}

#wrapper a:hover {
	width: 80%;
	border-radius: 0%;
	background-color: navy;
	color: #fff;
}

#wrapper a:active{
	transform: scale(0.9);
}

#wrapper a::before,
#wrapper a::after {
	content: "";
	position: absolute;
	height: 0.1rem;
	width: 0;
	transition: width 0.5s;
	/* ????????????? */
	background-color: #fff;
}

#wrapper a::before {
	top: 0;
	left: 0;
}

#wrapper a::after {
	bottom: 0;
	right: 0;
}

#wrapper a:hover::before,
#wrapper a:hover::after {
	width: 100%;
}