html, body {
    height: 100vh;
    margin: 0%;
    overflow: auto;
    background-color: rgb(235, 235, 235);
}


@font-face {
    font-family: 'HIDESerif';
    src: url('/font/HIDESerif 0.9.4.otf') format('opentype'); /* unified absolute path */
    font-weight: normal;
    font-style: normal;
}

/* 全局字体和字号统一 */
body, button, a, tspan, h1, h2, h3, p, .modal-label, .exit-text, * {
    font-family: 'HIDESerif', serif !important;
    font-weight: bold !important;
    color: #000000 !important;
    font-size: 1.5vw;
}

h1 {
    font-size: 1.6rem;
    font-style: italic;
    margin: 0;
    color: #bbbbbb !important;  /* 浅灰色，强制覆盖 */
}

@media only screen and (max-width: 600px) {
    h1 {
        font-size: 1.5rem !important;   /* 可根据需要调整 */
    }
}

h2 {
    font-size: 1.1rem;
    color: rgb(191, 191, 191);
    font-style: italic;
    margin: 0;
    font-family: 'HIDESerif', monospace;
    font-weight: 400;
    font-style: normal;
}

@media only screen and (max-width: 600px) {
    h2 {
        font-size: 1.1rem !important;
    }
}

h3 {
    font-size: 1.1rem;
    margin: 0;
}

p {
    font-family: 'HIDESerif', monospace;
    font-weight: 400;
    font-style: normal;
}

@media only screen and (max-width: 600px) {
    .scroll_container p {
        font-size: 1.1rem !important;
    }
}


#body-content {
    font-family: 'HIDESerif', monospace;
    font-weight: 400;
    font-style: normal;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5%;
    margin-right: 5%;
    height: 100%;
    opacity: 0; /* Initially set the content to be invisible */
    transform: translateY(-20px); /* Move the content up by a small amount */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

    #body-content.show-content {
        opacity: 1; /* When the show-content class is added, make the content visible */
        transform: translateY(0);
    }

.top_container {
    height: 50vh;
}

.navigation_container {
    height: 4vh;
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 1.1vw;
}

a {
    text-decoration: none;
    color: rgb(21, 21, 21);
}

@media only screen and (max-width: 600px) {
    .navigation_container {
        font-size: 1.6vw;
    }
}

.navigation_container a {
    font-size: 2.2vw !important;
    color: #000000 !important;
    font-family: 'HIDESerif', serif !important;
}

@media only screen and (max-width: 600px) {
    body, button, a, tspan, h1, h2, h3, p, .modal-label, .exit-text, * {
        font-size: 0.8rem !important;   /* 原来是1.5rem，改小 */
    }
    .navigation_container a {
        font-size: 1.5rem !important;   /* 原来是2.2rem，改小 */
    }
}

.navigation_container a:hover {
    font-style: italic;
}

@media only screen and (max-width: 600px) {
    .scroll_container {
        font-size: 1.7vw;
    }
}

.text_container {
    margin-top: 1%;
    display: flex;
    width: 100%;
    height: 46vh;
}

/* Mobile: tighten gap only on Hypersensitivity page */
@media only screen and (max-width: 600px) {
  .page-hypersensitivity .title_container {
    height: 12%;           /* was 25% */
    margin-bottom: 0.25rem; /* small spacing under title */
  }
  .page-hypersensitivity .scroll_container {
    height: 83%;           /* was 70%; fill space reclaimed from title */
    margin-top: 0;
    padding-top: 0;
  }
}

.description_container {
    width: 50%;
}

.title_container {
    width: 100%;
    height: 25%;
}

.scroll_container {
    width: 100%;
    height: 70%;
    overflow-y: auto;
    padding-left: 1%;
    padding-right: 1%;
}

.credit_container {
    width: 50%;
    padding-left: 2%;
}

.credit_container, .credit_container * {
  color: #6f6f6f !important;
  font-size: 0.8em ;   /* 更小的字体，可根据需要调整 */
}

@media only screen and (max-width: 600px) {
    .credit_container {
        font-size: 0.4vw !important;;
    }
}

.video_container {
    height: 40vh;
    display: flex;
    margin-bottom: 1%;
    overflow-x: auto;
}

@media only screen and (max-width: 600px) {
    .video_container {
        height: 27vh;
    }
}

.image_container {
    display: flex;
    overflow-x: auto;
    height: 48.5vh;
    margin-bottom: 1%;
}

@media only screen and (max-width: 600px) {
    .image_container {
        height: 30vh;
    }
}

img {
    margin-right: 0.5vw;
    height: 100%;
    cursor: pointer;
    transition: transform 0.2s ease;
}

    img:hover {
        transform: scale(1.1);
    }

video {
    height: 100%;
    margin-right: 1vw;
}

/* Modal styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Black background with transparency */
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

    .modal img {
        max-width: 90vw;
        max-height: 90vh;
        border-radius: 10px;
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    }




/* ��������������ʽ */
::-webkit-scrollbar {
    width: 8px; /* �������Ŀ��� */
    height: 8px; /* �������ĸ߶ȣ�����ˮƽ�������� */
}

/* ��������� */
::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #f9f9f9, #ececec); /* ���ӽ��䱳�� */
    border-radius: 8px; /* ����͵�Բ�� */
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); /* ��������ӰЧ�� */
}

/* �������Ļ��� */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #bbb, #999); /* ���ӽ���Ч�� */
    border-radius: 8px; /* ����Բ�� */
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); /* ��������Ӱ��������θ� */
    transition: background 0.3s ease, box-shadow 0.3s ease; /* ƽ������ͣ����Ч�� */
}

    /* ��������ͣʱ����ʽ */
    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #999, #777); /* ��ͣʱ����Ľ��� */
        box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3); /* ������Ӱ */
    }

/* ����������Ĺ����ʽ */
::-webkit-scrollbar-horizontal {
    height: 8px; /* ����������߶� */
}

/* ����������Ļ�����ʽ */
::-webkit-scrollbar-thumb-horizontal {
    background: linear-gradient(90deg, #bbb, #999); /* ���򻬿�Ľ��䷽�����Ϊˮƽ */
}

    /* ˮƽ�������Ļ�����ͣ��ʽ */
    ::-webkit-scrollbar-thumb-horizontal:hover {
        background: linear-gradient(90deg, #999, #777); /* �����ˮƽ���� */
    }

/* ֧�ְ�ɫģʽ */
@media (prefers-color-scheme: dark) {
    ::-webkit-scrollbar-track {
        background: linear-gradient(180deg, #333, #444); /* ��ɫ������� */
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
    }

    ::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #666, #444); /* ��ɫ���鱳�� */
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
    }

        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #444, #222); /* ��ɫ������ͣЧ�� */
        }
}

.others_text, .others_text * {
  color: #838383 !important; /* 或你喜欢的浅灰色 */
}

.description_container .title_container h2 tspan {
  color: #bbbbbb !important; /* 你想要的浅灰色 */
}