.nopadding {
  padding: 0 !important;
  margin: 0 !important;
}

.flex {
 display: flex;
}

.paper-btn {
 position: relative;
 text-align: center;

 display: inline-block;
 margin: 8px;
 padding: 8px 8px;

 border-width: 0;
 outline: none;
 border-radius: 10px;
 
 background-color: #3e3e40;
 color: white !important;
 font-size: 16px;
 width: 200px;
 font-weight: 350;
}
.paper-btn-parent {
   display: flex;
   justify-content: center;
   margin: 16px 0px;
}
.paper-btn:hover {
   opacity: 0.80;
}

.video {
 width: 100%;
 height: auto;
}

.hover-overlay {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 80%;
 height: auto;
 opacity: 1;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 font-family: Chalkduster;
 font-size: 16px;
 text-align: center;
 transition: opacity 0.3s ease-in-out;
}

div.scroll-container {
 background-color: #3e3e40;
 overflow: auto;
 white-space: nowrap;
 margin-top: 25px;
 margin-bottom: 25px;
 padding: 7px 7.5px 2.5px 9px;
}

.youtube-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}
.youtube-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.image-set {
  width: 80%
}
.image-set img {
  cursor: pointer;
  border: 0px solid transparent;
  opacity: 0.5;
  height: min(90px, 6vw);
  transition: opacity 0.3s ease; /* Smooth transition */
}
.image-set img.selected {
  opacity: 1.0;
}
.image-set img:hover {
  opacity: 1.0;
}

.show-neighbors {
  overflow: hidden;
}

.show-neighbors .carousel-indicators {
  margin-right: 15%;
  margin-left: 15%;
}
.show-neighbors .carousel-control-prev,
.show-neighbors .carousel-control-next {
  height: 80%;
  width: 15%;
  z-index: 11;
  /* .carousel-caption has z-index 10 */
}
.show-neighbors .carousel-inner {
  width: 200%;
  left: -50%;
}
.show-neighbors .carousel-item-next:not(.carousel-item-left),
.show-neighbors .carousel-item-right.active {
  -webkit-transform: translate3d(33%, 0, 0);
  transform: translate3d(33%, 0, 0);
}
.show-neighbors .carousel-item-prev:not(.carousel-item-right),
.show-neighbors .carousel-item-left.active {
  -webkit-transform: translate3d(-33%, 0, 0);
  transform: translate3d(-33%, 0, 0);
}
.show-neighbors .item__third {
  display: block !important;
  float: left;
  position: relative;
  width: 33.333333333333%;
  padding: 0.5%;
  text-align: center;
}

.custom-button {
  color: white !important;
  text-decoration: none !important;
  background-color: #2f2f30;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  cursor: pointer;
  opacity: 0.7; /* Initial opacity */
  transition: opacity 0.3s ease; /* Smooth transition */
}
.custom-button:hover {
  opacity: 1.0; /* Increased opacity on hover */
}

.block-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5%;
}

@media screen and (max-width: 1024px)  {
  .mobile-break { display: block; }
}

/* ===== 视频背景 Section 的完整正确样式 ===== */

/* 1. 父容器 (#intro) 作为定位的“舞台” */
#intro {
    position: relative; /* 关键：为内部绝对定位的元素提供参考系 */
    width: 100%;
    height: 100vh; /* 让 section 高度占满整个屏幕视口 */
    display: flex; /* 使用 Flexbox 来轻松实现内容的垂直和水平居中 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    text-align: center;
    overflow: hidden; /* 确保视频不会溢出边界 */
    color: #ffffff; /* 默认文字颜色为白色 */
}

/* 2. 视频层 (#background-video) 作为背景 */
#background-video {
    position: absolute; /* 关键：脱离文档流，成为可定位的图层 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 关键：像 background-size: cover 一样铺满容器，不变形 */
    z-index: 1; /* 关键：将视频放在图层 1 */
}

/* 3. 内容层 (.intro-content) 浮于视频之上 */
.intro-content {
    position: relative; /* 关键：让内容也参与堆叠 */
    z-index: 2; /* 关键：将内容放在图层 2，确保在视频之上 */
    
    /* (可选) 添加一个半透明背景和内边距，形成一个漂亮的“卡片”效果 */
    background: rgba(0, 0, 0, 0.5); /* 50% 透明度的黑色背景，增强文字可读性 */
    padding: 30px 50px; /* 卡片内部的留白 */
    border-radius: 15px; /* 卡片的圆角 */
    max-width: 80%; /* 限制卡片最大宽度，防止在宽屏上过长 */
}



.force-center-text {
    text-align: center !important;
}

.bibtex-title-align-left {
    position: relative; 
    left: -24px;        
}

.bibtex-container {
    position: relative; 
}

.bibtex-box {
    /* The key change is here! */
    background-color: rgba(147, 145, 145, 0.97); /* 10% opaque white */

    border: 1px solid #555; /* Changed border to a slightly lighter gray for better contrast on black */
    border-radius: 5px;
    padding: 20px;
    font-family: 'Courier New', Courier, monospace;
    white-space: pre-wrap;
    word-break: break-all;
    font-size: 14px;
    padding-top: 45px; 
}


.bibtex-box pre {
    margin: 0;
    padding: 0;
    background-color: transparent;
}

/* Copy Button Styling */
.copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    font-size: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.copy-btn:hover {
    background-color: #0056b3;
}

@keyframes shine {
  from {
    background-position: 200% center;
  }
  to {
    background-position: -200% center;
  }
}


.title-art strong {
  color: #fff; /* 文字本身是白色 */
  
  /* 只设置 text-shadow，不使用 animation */
  text-shadow: 
    0 0 8px rgba(255, 255, 255, 1),   /* 最内层，最亮的白色光 */
    0 0 16px rgba(255, 255, 255, 0.8), /* 中间层，扩散的白光 */
    0 0 32px rgba(255, 105, 180, 0.6); /* 最外层，柔和的粉色光晕 */
}




.footer {
    margin-top: 80px; /* 你可以随意调整这个数值 */
}