.subpage-main {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 160px; /* offset for left nav */
    box-sizing: border-box;
}

.subpage-content {
    text-align: center;
}

.subpage-title {
    font-family: Kanit, sans-serif;
    font-size: clamp(60px, 10vw, 140px);
    font-weight: 700;
    margin: 0 0 20px 0;
    background: linear-gradient(90deg, #fff 0, #e0e0e0 30%, #aaa 60%, #fff 100%);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: subpageFadeIn .7s ease-out forwards, rgbAnimation 5s linear infinite;
}

.subpage-desc {
    font-family: Poppins, Arial, sans-serif;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    animation: subpageFadeIn .9s ease-out .2s both;
}

nav ul li a.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 6px;
}

nav ul li a.active::after {
    transform: scaleX(1) !important;
}

@keyframes subpageFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes rgbAnimation {
    0%,100% { background-position: 0 0; }
    50%      { background-position: 100% 100%; }
}