body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#container {
    max-width: 100%;
    margin: 0 auto;
    padding: 10px;
    text-align: center;
}

#photo-container, #frame-container {
    display: inline-block;
    position: relative;
}

#apply {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 20px;
    background-color: #12202b; /*#007bff*/
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#frame-selector, button, #photo-input {
    padding: 10px 20px; /* 调整按钮的内边距 */
    font-size: 50px; /* 调整按钮的字体大小 */
}

#title {
    color: white;
    text-align: center;
    font-size: 5rem; /* 修正为 font-size */
}

#titlediv {
    background-color: #12202b;
    padding: 30px;
    width: 100%;
}

#butt {
    padding: 20px;
}

#int, #sel, #dow {
    margin: 20px;
}

@media (max-width: 768px) {
    #photo {
        max-width: 100%;
        height: auto;
    }
    #canvas {
        max-width: 100%;
        height: auto;
    }

    #photo-input, #frame-selector, button {
        padding: 10px 15px; /* 减少内边距以适应小屏幕 */
        font-size: 25px; /* 减小字体 */
    }

    #title {
        font-size: 5rem; /* 调整标题字体大小 */
    }

    #titlediv {
        padding: 10px;
    }

    #butt {
        background-color: #070302;
        padding: 20px; /* 调整按钮的内边距以适应手机 */
    }
}