*
{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Times New Roman', Times, serif;
}

html,body{
    background-color:#f5f2f2;
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}
body{
    font-family:'Times New Roman', Times, serif;
    overflow-x:hidden;
}


.hero-section{
    height: 100vh;
    position:relative;
    display: flex;
    align-items: center;
    justify-content:center;
    transform-style: preserve-3d;
    padding:2p0px;
    text-align:center;

}
.hero-bg{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-image:url(images/myhome.png);
    background-size: cover;
    background-attachment: scroll;
    background-position: center ;
    background-color: #f4eeee;
    z-index:-1;
    transform:translateZ(0);
    backface-visibility: hidden;
   
}



.hero-content{
    color:rgb(58, 132, 9);
    width:90%;
    max-width: 1200px;
    text-align:center;
    display:flex;
    flex-direction: column;
    align-items:center;
    gap:20px;
  
}

.main-title{
    font-family: 'Times New Roman', Times, serif;
    font-size: clamp(40px,10vw,1200px);
    font-weight: 1000;
    text-shadow: 3px 3px 8px rgba(97, 205, 97, 0.7);
    position:relative;
    animation: starTwinkle 2s ease-in-out infinite;
    display:inline-block;
    margin:0;
    white-space: normal;
    word-break:break-word;

    
    
}
.main-title::before{
    content:'★';
    position:absolute;
    top:10px;
    left:10px;
    font-size:40px;
    color:rgb(234, 211, 83);
    animation:starMove 3s ease-in-out infinite;
}
.main-title::after{
    content:'♪';
    color:rgb(236, 125, 188);
    position:absolute;
    bottom:10px;
    right:10px;
    font-size:40px;
    animation:starMove 3s ease-in-out infinite reverse;
}
@keyframes starTwinkle{
    0%,100%{
        text-shadow:3px 3px 8px rgb(22, 122, 32);}
    50%{
        text-shadow:
        0 0 10px rgba(255,255,255,0.8),
        0 0 20px rgba(36, 142, 117, 0.6),
        0 0 30px rgba(37,117,252,0.4);
    }
}
  

@keyframes starMove{
    0%,100%{
        transform:translateY(0)rotate(0deg);
        opacity:0.7;}
    50%{
        transform:translateY(-15px)rotate(360deg);
        opacity:1;
    }
    }
  
.subtitle {
            font-size: 1.4rem;
            margin-bottom: 50px;
            line-height: 1.6;
            color: #e0f7fa;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
        }
        
        /* 音乐主题按钮样式 */
        .music-start-btn {
            animation: musicStartBtnApper 2s ease-out forwards;
            display: inline-flex;
            align-self:center;
            align-items: center;
            justify-content: center;
            padding: 15px 20px;
            font-size: 1.3rem;
            font-weight: 700;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.4s ease;
            text-decoration: none;
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, #a4d898 0%, #5d8541 100%);
            color: #5a2a2a;
            box-shadow: 0 8px 25px rgba(255, 154, 158, 0.4);
            width:fit-content;
            min-width: auto;
         
            
          

        }
        
        .music-start-btn::before {
            content: '♪';
            position: absolute;
            left: 7px;
            font-size: 1.8rem;
            transition: transform 0.3s ease;
        }
        
        .music-start-btn::after {
            content: '♪';
            position: absolute;
            right: 6px;
            font-size: 1.8rem;
            transition: transform 0.3s ease;
        }
        
        .music-start-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(255, 154, 158, 0.6);
            background: linear-gradient(135deg, #b3d4a2 0%, #33da1a 100%);
        }
        
        .music-start-btn:hover::before {
            transform: translateX(-8px) rotate(-20deg);
        }
        
        .music-start-btn:hover::after {
            transform: translateX(8px) rotate(20deg);
        }
        
        .music-start-btn:active {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 154, 158, 0.4);
        }
        





@keyframes musicStartBtnApper{
    from{
        opacity:0;
        transform:translateY(30px);
    }
    to{
        opacity:0.9;
        transform:translateY(0) ;
    }
}