body, html {
    height: 100%;
    margin: 0;
    background-color: black; /* 배경색을 검은색으로 설정 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg); /* 중앙에 배치 후 90도 회전 */
    z-index: -1; /* 동영상을 텍스트 뒤로 보내기 위함 */
}

.content {
    position: absolute;
    z-index: 1; /* 텍스트를 동영상 위로 보내기 위함 */
    color: white; /* 텍스트 색상 설정 */
    text-align: center;
    /* 애니메이션 수정 */
    animation: textGrow 2s forwards; /* 지속 시간을 2초로 설정 */
}

@keyframes textGrow {
    0% {
        font-size: 1.2em; /* 초기 크기 (8em의 15%) */
        opacity: 1; /* 투명도 100% */
    }
    100% {
        font-size: 8em; /* 최종 크기 (8em의 100%) */
        opacity: 0.6; /* 투명도 60% */
    }
}