.container {
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
    width: 100%;

}

@media (min-width:576px) {
    .container {
        max-width: 440px;
    }
}

@media (min-width:768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width:992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width:1200px) {
    .container {
        max-width: 1140px;
    }
}

#btn {
    position: fixed;
    bottom: 65px;
    /* 根据需要调整距离页面底部的距离 */
    left: 50%;
    /* 将左边缘移动到页面宽度的50% */
    transform: translateX(-50%);
    /* 将按钮本身向左移动其宽度的一半，以实现水平居中 */
    display: inline-block;
    /* 使用inline-block而不是block，因为block会占据整行 */
    text-align: center;
    width: 250px;
    height: 60px;
    /* margin-left: 25%; 这将不再需要，因为我们使用left和transform来居中 */
    border: none;
    border-radius: 40px;
    font-size: 20px;
    background: #1aaf5d;
    color: #fff;
    cursor: pointer;
    transition: font-size 0.5s ease-in-out;
    transition: border-radius 0.1s ease-in-out;

}

#btn:hover {
    color: rgb(3, 1, 14);
    font-size: 24px;
    border-radius: 0px;
    box-shadow: 0 10px 16px rgba(0, 0, 0, 0.3);
}

#btn:visited {
    color: #fff;
    font-size: 20px;
    box-shadow: none;
    border-radius: 40px;
}

#content {
    max-height: 200px;
}

#content2 {
    max-height: 180px;
}

#content3 {
    max-height: 90px;
}

#content4 {
    max-height: 70px;
}

#content5 {
    max-height: 110px;
}

@keyframes fontSizeChange {
    0% {
        /* transform: scale(0.90);  */
        transform-origin: center;
        color: greenyellow;
    }
    25% {
        /* transform: scale(0.92); */
        transform-origin: center;
        color:crimson;
        
    }
    50% {
        /* transform: scale(0.94); */
        transform-origin: center;
        color:cyan; /* 过渡颜色变化 */
    }
    75% {
        /* transform: scale(0.96); */
        transform-origin: center;
        color:#1aaf5d; /* 继续过渡颜色 */
    }

    100% {
        /* transform: scale(1.0); */
        transform-origin: center;
        color:deeppink;
    }
}

#content,#content2,#content3,#content4,#content5{
    width: 100%;
    margin: auto;
    text-align: center !important;
    font-size: 18px;
    color: white;
    overflow-y: auto;
    /* 设置容器最大高度，根据需要调整 */
    padding: 10px;
    /* 添加一些内边距，使文本不紧贴容器边缘 */
    box-sizing: border-box;
    /* 确保宽度和高度包括内边距和边框 */

    animation-name: fontSizeChange;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve - 3d;
    transform-style: preserve - 3d;
    display: inline-block;
}

.fade {
    color: #888;
    /* 浅灰色 */
    /* 你也可以添加其他样式，比如字体大小、背景色等 */
}


.tool-title {
    position: fixed;
    top: 30px;
    /* 固定在页面顶部 */
    left: 0;
    /* 不需要左对齐50% */
    width: 100%;
    /* 占据整个页面宽度 */
    height: 100px;

    overflow: auto;
    /* 设定高度 */
    display: flex;
    /* 使用 Flexbox 布局 */
    justify-content: space-between;
    /* 两端对齐子元素 */
    align-items: center;
    /* 垂直居中子元素 */
    padding: 0 20px;
    /* 可选：增加内边距以避免内容紧贴边缘 */
    box-sizing: border-box;
    /* 确保内边距和边框不会增加额外宽度 */
    background-color: #fff;
    /* 可选：设置背景颜色 */
    /* border-bottom: 1px solid #ccc; */
    /* 可选：添加底部边框 */
    font-size: 20px;


}


#btn-like {
    background-color: #fff;
    border: 1px solid gray;
    border-radius: 50px;
    cursor: pointer;
}

#bottom {
    text-align: center;
    position: fixed;
    bottom: 0.3125rem;
    color: white;

}

.nav-toggle-btn {
    position: fixed;
    top: 30px;
    left: 20px;
    border-radius: 20px;
    padding: 10px;
    background-color: #fff;
    border: none;
    cursor: pointer;
    font-size: 24px;
    z-index: 1000;
    /* 确保按钮在最上层 */
}

.nav-toggle-btn:hover {
    color: rgb(0, 17, 255);
}

.nav-container {
    position: fixed;
    top: 0px;
    /* 调整位置以适应按钮 */
    left: 0;
    width: 100%;
    height: 0;
    /* 初始高度为0，即隐藏 */
    overflow: auto;
    /* scrollbar-width:thin; */
    transition: height 0.3s ease;
    /* 添加过渡效果 */
    display: flex;
    line-height: 0.9em;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    z-index: 999;
    /* 确保导航栏在内容上层 */
}

.nav-container.expanded {
    /* 展开后的高度，可以根据需要调整   */
    height: 42.000rem;
    padding-top: 20px;
    overflow: auto;
}

.tool-name {
    margin: 10px 0;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.tool-name a {
    text-decoration: none;
    color: #333;
    border: none;
    transition: font-size 0.1s ease-in-out;
}


.tool-name a:hover {
    color: deeppink !important;
    /* 使用!important可以增加样式的优先级，但通常不推荐除非必要 */
    text-decoration: none;
    /* 去掉下划线，如果需要的话 */
    font-size: 24px;
    box-shadow: 0 8px 16px rgba(225, 20, 147, 0.5);
    border-radius: 15px;
}

#queryInput0 {
    bottom: 200px;
    left: 50%;
    width: 260px;
    /* 设置宽度 */
    border-radius: 15px;
    /* 设置边框圆角 */
    text-align: center;
}

/* 为输入框添加样式 */
#queryInput {
    bottom: 130px;
    left: 35%;
    width: 60px;
    /* 设置宽度 */
    border-radius: 5px;
    cursor: pointer;
}

/* 为输入框添加样式 */
#queryInput2 {
    bottom: 130px;
    left: 65%;
    width: 60px;
    /* 设置宽度 */
    border-radius: 5px;
    /* 设置边框圆角 */
    cursor: pointer;
}

#queryInput0,#queryInput,#queryInput2{
    position: fixed;
    /* 将左边缘移动到页面宽度的50% */
    transform: translateX(-50%);
    /* 将按钮本身向左移动其宽度的一半，以实现水平居中 */
    display: inline-block;
    padding: 10px;
    /* 设置内边距 */
    font-size: 16px;
    /* 设置字体大小 */
    border: 2px solid #ccc;
    /* 设置边框 */
    box-sizing: border-box;
    /* 确保内边距和边框不会增加额外宽度 */
    outline: none;
    /* 移除默认焦点样式 */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    /* 添加过渡效果 */
}

#queryInputA {
    left: 20%;
}

#queryInputB {
    left: 40%;
}

#queryInputC {
    left: 60%;
}

#queryInputD {
    left: 80%;
}

#queryInputA,#queryInputB,#queryInputC,#queryInputD{
    position: fixed;
    /* 将左边缘移动到页面宽度的50% */
    bottom: 130px;
    width: 60px;
    /* 设置宽度 */
    transform: translateX(-50%);
    /* 将按钮本身向左移动其宽度的一半，以实现水平居中 */
    display: inline-block;
    /* 使用inline-block而不是block，因为block会占据整行 */
    text-align: center;
    padding: 10px;
    /* 设置内边距 */
    font-size: 16px;
    /* 设置字体大小 */
    border: 2px solid #ccc;
    /* 设置边框 */
    border-radius: 5px;
    /* 设置边框圆角 */
    box-sizing: border-box;
    /* 确保内边距和边框不会增加额外宽度 */
    outline: none;
    /* 移除默认焦点样式 */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    /* 添加过渡效果 */
    cursor: pointer;
}

/* 当输入框获得焦点时，改变边框颜色和添加阴影 */
#queryInput0:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* 当输入框获得焦点时，改变边框颜色和添加阴影 */
#queryInput:focus,#queryInput2:focus {
    border-color: #007bff;
    background-color: brown;
    color: #fff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* 当输入框获得焦点时，改变边框颜色和添加阴影 */
#queryInputA:focus,#queryInputB:focus,#queryInputC:focus,#queryInputD:focus {
    border-color: #007bff;
    background-color: brown;
    color: #fff ;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

#queryInput.clicked, #queryInput2.clicked {
    border-color: #007bff;
    background-color: brown;
    color: #fff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

#queryInputA.clicked, #queryInputB.clicked,#queryInputC.clicked,#queryInputD.clicked {
    border-color: #007bff;
    background-color: brown;
    color: #fff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* 如果你想要为特定的按钮设置不同的禁用样式，你可以使用类选择器 */
.my-button-class:disabled { 
    /* background-color: brown; 例如，设置为红色背景 */
    color: #fff; 
 }