/* 通用样式 */  
body, html {  
    margin: 0;  
    padding: 0;  
    width: 100%;  
    height: 100%;  
}  
.content {  
    text-align: center;  
    padding: 20px 0;  
    flex-grow: 1; /* 使内容区域占据剩余空间 */ 
    margin: 20%;
}  
a{text-decoration: none;text-align: center;color: #FFF;}
/* 初始按钮样式 */  
.main-button {  
    padding: 10px 20px;  
    font-size: 16px;  
    background-color: #007BFF;  
    color: white;  
    border: none;  
    border-radius: 5px;  
    cursor: pointer;  
    transition: all 0.3s ease;  
}  
  
/* 使用flexbox布局 */  
body {  
    display: flex;  
    flex-direction: column;  
}  
  
/* 响应式调整 */  
@media (max-width: 600px) {  
    .main-button {  
        padding: 8px 16px;  
        font-size: 14px;  
    }  
}  
  
@media (min-width: 601px) and (max-width: 900px) {  
    .main-button {  
        padding: 12px 24px;  
        font-size: 18px;  
    }  
}  
  
@media (min-width: 901px) {  
    .main-button {  
        padding: 16px 32px;  
        font-size: 20px;  
    }  
}