#map {
    height: 500px;
    width: 100%;
}
#info-box {
    position: absolute;
    top: 220px;
    left: 50px;
    width: 280px;
    height: auto; /* 自动根据内容调整高度 */
    padding: 20px;
    background-color: white; /* 白色背景 */
    border-radius: 33px; /* 圆角效果 */
    border: 1px solid rgba(0, 0, 0, 0.1); /* 边框改为浅色 */
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5); /* 阴影效果 */
    color: var(--text-color); /* 字体颜色改为黑色 */
   
    font-size: 1em; /* 字体大小 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 增加动效 */
    z-index: 1000;
}

#info-box:hover {
    transform: scale(1.05); /* 鼠标悬停时放大 */
    box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.7); /* 鼠标悬停时阴影变大 */
}

h3 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    text-align: center;
    color: var(--button-color); /* 深灰色标题 */    
}


#info-box h4 {
    font-size: 1.2rem;
    color: var(--text-color); /* 深灰色标题 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* 轻微的文字阴影 */
}

#info-box p {
    margin: 5px 0;
    font-size: 1em;
    font-weight: 300; /* 字体较轻 */
    line-height: 1.5;
}
#sensor-btn {
    display: block;
    width: 100%;
    padding: 10px 0;
    margin-top: 20px;
    background-color: var(--button-color); /* 蓝色背景 */
    color: white; /* 白色文字 */
    border: 2px solid var(--button-color);
    border-radius: 33px; /* 圆角效果 */
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

#sensor-btn:hover {
    background-color: white;
  border: 2px solid var(--button-color);
  color: var(--text-color);
}

#h3-graf {
    margin-top: 2.5rem;
}

#battery-status{
    margin-bottom: 0.4rem;
}