/* ==========================================
   00年代复古紧凑风格 - 公共样式表 (style.css)
   ========================================== */

/* 所有页面通用的基础重置 */
body {
	font-family: "Geist Pixel";
    font-size: 12px;
    color: #ffffff;
    background-color: #000000;
    margin: 0;
    padding: 0;

}




/* 全站统一的经典链接样式 */
a {
    
    color: #000000; /* 鼠标悬停时变红，千禧年网页经典互动 */
	background-color: #ffffff; /* 黃色背景 */
	text-decoration: none;     /* 順便拿掉超連結討人厭的下劃線 */
}
a:hover {

	color: #ffffff; /* 经典的未访问蓝 */
background-color:#000000;}


.nav-link {
    color: white;
	background-color: black;
    text-decoration: none;
	text-align: center;
  }

.nav-link:hover {

    color: #000000; /* 鼠标悬停时变红，千禧年网页经典互动 */
	background-color: #ffffff; /* 黃色背景 */
	text-decoration: none;
  }


.frame-body::before {  content: "";
  position: fixed;   /* 1. 钉死在屏幕上，滚动页面时它也不动 */
  z-index: 1100;     /* 2. 极高的层级，确保盖在所有网页内容（文字、图片）的上方 */
  pointer-events: none; /* 3. 关键！鼠标可以穿透这层噪点，正常点击底部的链接 */
  opacity: .12;       /* 4. 透明度只有 10%（0.1），若隐若现，非常高级 */
  
  /* 5. 故意把尺寸放大到 3 倍，并往左上角偏移，留出大片富余空间，为后面的抖动动画做准备 */
  width: 300%;
  height: 300%;
  left: -50%;
  top: -110%;
  
  /* 6. 这张图片就是噪点/颗粒纹理图 */
  background-image: url("\IMG-1211.png");
}

.frame-body::before {  /* 运用动画：
     animation-name: grain (使用下面定义的动画)
     duration: 8s (每 8 秒循环一次)
     timing-function: steps(10) (不进行平滑过渡，而是像定格动画一样卡顿跳跃，10帧一循环，这样更像复古噪点)
     iteration-count: infinite (无限循环)
  */
  animation: grain 8s steps(10) infinite;
}

@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  /* ... 中间各种无规律的位移 ... */
}


/* ==========================================
   区域一：主框架专用样式 (对应 index.html)
   ========================================== */
.frame-body {
    text-align: center; /* 让主容器在浏览器中水平居中 */
    padding-top: 60px;   /* 离浏览器顶部留一点距离 */
}

.container {
    width: 687px;
    height: 550px;
    margin: 0 auto; /* 居中 */
    text-align: left;
	padding: 15px;
	background-color: #000000;
}

.sidebar {
    float: left;
    width: 107px;
    height: 100%;
    background-color: #000000; /* 灰底色 */
    border-right: 1px dashed #ffffff;
    box-sizing: border-box;
    padding: 15px 5px;
}

.sidebar a {
    display: block;
    margin-bottom: 15px;
	margin-right: 15px;
}

.content-box {
    float: left;
    width: 578px; /* 550 - 100 - 2px边框 */
    height: 100%;
	

}

iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}




img {
    max-width: 100%;
    height: auto;
}
/* ==========================================
   区域二：子页面专用样式 (对应 home/blog/stuff/about)
   ========================================== */
/* ==========================================
   区域二：子页面专用样式 (对应 home/blog/stuff/about)
   ========================================== */
.sub-body {
    line-height: 1.52;
    padding: 10px 35px;
}

/* 1. 针对 Firefox 和 IE，直接作用于子页面的 html 和 body */
html, body {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/* 2. 针对 Chrome/Safari/Edge，直接作用于 html, body 以及你的 .sub-body 容器 */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.sub-body::-webkit-scrollbar {  /* 注意：这里加上了点 . 并且扩大了范围 */
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.sub-body h2 {
    font-size: 14px;
    margin-top: 0;
    border-bottom: 1px dashed #999999; /* 经典的虚线分割线 */
    padding-bottom: 10px;
}

hr{ 
	
  border: none;
	border-bottom: 1px dashed #999999; /* 经典的虚线分割线 */
    margin-top: 10px;
	margin-bottom: 8px;

}

.sub-body h1 {
    font-size: 20px;
    margin-top: 0;
    border-bottom: 1px dashed #999999; /* 经典的虚线分割线 */
    padding-bottom: 5px;
}
.long-text {
    height: 500px; /* 强行撑开高度以测试盒子内滚动 */
    margin-top: 20px;
}