.nav {
	height: 50px;
	border-bottom: 1px solid black;
	display: flex;
	align-items: center;
}

.title {
	text-align: center;
	font-size: 50px;
	font-weight: bold;
}

.subtitle {
	text-align: center;
	font-size: 20px;
	font-weight: 300;
}

.circle-container {
    position: relative;
    width: min(80vw, 80vh); /* 가로 또는 세로 중 작은 값 기준 */
    height: min(80vw, 80vh);
    max-width: 300px; /* 최대 크기 제한 */
    max-height: 300px;
    margin: 50px auto;
}

.circle-item {
    position: absolute;
    width: min(8vw, 8vh);  /* 요소 크기도 화면 비율에 맞게 조정 */
    height: min(8vw, 8vh);
    max-width: 40px;
    max-height: 40px;
    background-color: lightblue;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: min(3vw, 3vh);  /* 폰트 크기도 조정 */
    font-weight: bold;
}