/* 主标题样式 */
h1 {
    color: #333;
    font-size: 2.5em;
    margin-bottom: 20px;
    word-wrap: break-word; /* 允许长单词换行 */
    text-decoration: none; /* 去掉下划线 */
}

h1 a {
    text-decoration: none;  /* 移除底線 */
    color: inherit;         /* 繼承 h1 的文字顏色 */
}
  

/* flash message */
.flash {
    color: #325fc0;
    font-size: clamp(0.5rem, 2vw, 1rem);
    text-align: center;
    margin-top: 1vh;
    margin-bottom: 1vh;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    padding: 20px;
    text-align: center;
    max-width: 100%;
    overflow-x: hidden;
}

/* hightlight */
body.highlight {
    position: relative;
    background-color: #f4f4f4;
}
body.highlight::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(12, 12, 12, 0.3); /* 调低透明度 */
    -webkit-backdrop-filter: blur(5px);       /* 背景模糊效果 */
    backdrop-filter: blur(5px);               /* 背景模糊效果 */
    z-index: 999;                             /* 确保模糊背景在弹窗下层 */
}
body.highlight::after {
    content: "drop your file here";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(92, 92, 92, 0.685); /* 更深的背景颜色 */
    color: #fff;
    padding: 60px 80px;                        /* 调整内边距以改变框框大小 */
    border-radius: 15px;                       /* 更大的圆角 */
    font-size: 2.5em;                          /* 更大的字体 */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);  /* 添加阴影 */
    z-index: 1000;                             /* 确保弹窗在最上层 */
    border: 2px dashed #fff;                   /* 添加虚线边框 */
}