.circle-wrapper {
    position: relative;
    width: min(80vw, 500px);
    height: min(80vw, 500px);
    margin: 40px auto;
}

/* center text */
.circle-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

/* circular menu container */
.circle-nav {
	position: absolute;
	width: 100%;
	height: 100%;
}

/* menu links */
.circle-nav a {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-decoration: none;
	font-size: 18px;
	color: #00007a;
	padding: 6px 12px;
}

/* highlight active page */
.circle-nav a.active {
	font-weight: bold;
	text-decoration: underline;
}