@font-face {
    font-family: "littlebit-dotty-variable";
    src: url("https://use.typekit.net/af/356cda/0000000000000000774c35c0/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),
         url("https://use.typekit.net/af/356cda/0000000000000000774c35c0/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),
         url("https://use.typekit.net/af/356cda/0000000000000000774c35c0/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
    font-variation-settings: "DOTS" 1;
}

@font-face {
    font-family: "littlebit-dotty-variable";
    src: url("https://use.typekit.net/af/356cda/0000000000000000774c35c0/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),
         url("https://use.typekit.net/af/356cda/0000000000000000774c35c0/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),
         url("https://use.typekit.net/af/356cda/0000000000000000774c35c0/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
    font-variation-settings: "DOTS" 1000;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh; /* 전체 높이를 100vh로 설정 */
    display: flex;
    flex-direction: column; /* 세로 방향으로 정렬 */
    justify-content: center; /* 부모 컨테이너에서 수직 가운데 정렬 */
    align-items: center; /* 가로 방향 가운데 정렬 */
}

#title {
    font-size: 2rem; /* 제목 크기 조정 */
    text-align: center; /* 텍스트 가운데 정렬 */
    font-family: 'littlebit-dotty-variable', sans-serif;
    font-style: normal;
    font-variation-settings: "Dots" 1;  
    position: absolute; /* 절대 위치 설정 */
    top: 10px; /* 상단에서의 거리 설정 */
    left: 50%; /* 가로 중앙 정렬 */
    transform: translateX(-50%); /* 중앙 정렬 보정 */
}

#text {
    font-size: 1.5rem; /* 텍스트 크기 조정 */
    display: flex;
    justify-content: center; /* 가로 가운데 정렬 */
    align-items: center; /* 수직 가운데 정렬 */
    height: 100%; /* 부모의 높이를 기준으로 설정 */
    text-align: center; /* 텍스트 가운데 정렬 */
    margin-top: 20px; /* 제목 아래 공간 추가 */
}

.tk-littlebit-loopy-variable { font-family: "littlebit-dotty-variable", sans-serif; }