@media screen and (max-width: 768px) {
    .intro {
        margin-top: 0%;
        height: 400px;
        flex-direction: column; /* 垂直展示以适配移动端 */
        justify-content: end;   /* 使元素底部与底部对齐 */
        align-items: center;  /* 水平展示以适配移动端 */
    }

    .intro-avatar {
        margin-right: 0;
    }

    .Easter-egg {
        position: absolute;
        top: 20px;
        height: 2rem;
        width: 0rem; 
    }

    .card {
        flex-direction: column;
    }

    .card1 {
        width: 100%;
    }
    
    .sites-square {
        transform: scale(0.8);
        transform-origin: left center;/* 对称中心 */
    }

    .detail {
        transform: scale(0.8);
        transform-origin: right center;
    }

    .works1 {
        height: 115.2px;
        width: 204.8px;
    }
    
    .caption {
        font-size: 0.8rem;
        padding: 8px 8px 8px 1rem;
    }
    
    .anime1 .caption {
        font-size: 0.65rem;
    }

    .tips {
        font-size: 0.64rem;
    }

    .year , .month{
        display: none;   
    }
    
    .month-mobile {
        white-space: nowrap;
        display: block;
    }
    .anime1 {
        width: 128px;
        height: 192px;
    }

}

@media screen and (min-width: 4000px) {
    .main {
        padding: 0 30%;
    }
}