/* 1. 움직이는 그라데이션 배경 정의 */
.mainbgWrap {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 밝고 화사한 파스텔 톤 그라데이션 조합 */
    background: linear-gradient(-45deg, #ff9a9e, #fecfef, #a1c4fd, #c2e9fb);
    background-size: 400% 400%;
    animation: gradient-animation 12s ease infinite;

    overflow: hidden;
}

/* 2. 배너 내부 텍스트 스타일 */
.mainbgWrapContent {
    text-align: center;
    color: #333333;
    padding: 20px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    backdrop-filter: blur(5px);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
    width: 100%;
    max-width: 50%;
}


/* 메인 타이틀 */
.mainbgWrapContent h3 {
    font-size: 30rem;
    margin: 10px 0;
    font-weight: 800;
    letter-spacing: -1px;
}

/* 서브 텍스트 */
.mainbgWrapContent p {
    font-size: 20rem;
    margin: 0;
    opacity: 0.8;
}



li {
    /* 폰트 설정 (코딩 느낌을 주는 고정폭 폰트와 깔끔한 본문 폰트 조합) */
    font-family: 'Courier New', Courier, monospace, 'Malgun Gothic', sans-serif;
    display: inline-block;
    padding: 2px 12px;
    border-radius: 5px;
    margin-bottom: 1px;
    font-size: 14rem;
}

.stack li {
    /* background-color: #333333; */
    background-color: #585858;
    color: white;
}

.certi li {
    background-color: #a1c4fd;
}


/* 3. 배경 이동 애니메이션 */
@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}