@charset "UTF-8";
/* html, body { */
  /* width: 100%; */
  /* height: 100%; */
/* } */

/* body { */
  /* display: flex; */
  /* background-color: #000; */
/* } */
body{
    /* background-image:url(bg.jpg); */
    background-color:#202124;
    background-attachment:fixed;
    background-size:100%;
    background-repeat:no-repeat;
    font-family:system-ui;
	text-align:center
    }
		
    a:hover{
	text-decoration: none;
    border-bottom: 1.5px solid;
	padding-bottom: 5px;
	}
    
    button:-moz-focus-inner, button:focus{
    outline:0;
    border:none
	}
	
	option{
    background-color:#080808;
    }
	
    button{
	position: relative;/* 观察bug */
	color:#dcddde;
    font-family:arial;
    font-size:22px;
    font-weight:700;
    border:2px solid #404040;
    border-radius:4px;
	margin:10px 2px; 
    padding:10px;
    cursor:pointer;
    display:inline-block;
    text-decoration:none;
    background:#00000000;
    box-shadow:0 5px 0 #888888;
    } 

    button:hover{
    font-size:22px;
	color:#fff;
    background:#9f8d61;
    } 
    
	button:active,
    button.active{
    background:#9f8d61;
    position:relative;
    top:5px;
    box-shadow:none
    }
	
	.dot {
	position: absolute;
	top: 5px; /* 调整小红点相对于按钮的位置 */
	right: 5px;
	width: 6px; /* 小红点的大小 */
	height: 6px;
	background-color: #f00; /* 小红点的颜色 */
	border-radius: 50%; /* 小红点是圆形 */
	}
	
   .bottopmsg{
	padding:5px 0 1px 0;
	color:#dcddde;
	text-align: center;
	font-size:16px;
    }
	
      /** variables */
      :root {
        /*orig*/

        --color-black: black;
        --color-cod-gray: #101010;
        --color-white: white;
        --color-error: rgb(191, 95, 95);
        --color-primary-rgba: 0, 192, 251;
        --color-primary: #00c0fb;
        --color-secondary-rgba: 234, 182, 56;
        --color-secondary: #eab638;
      }

      .tiles {
        display: flex;
        flex-direction: column;
		z-index:-1;
        justify-content: center;
        left: 50%;
        position: fixed;
        top: 50%;
        -webkit-transform: translateX(-50%) translateY(-50%) rotate(22.5deg);
      }
      .tiles__line {
        -webkit-animation: runner 20s linear infinite;
        display: flex;
        transform: translateX(25%);
      }
      .tiles__line:nth-child(2) {
        -webkit-animation-duration: 32s;
      }
      .tiles__line:nth-child(3) {
        -webkit-animation-duration: 44s;
      }

      @keyframes runner {
        to {
          -webkit-transform: translateX(-25%);
        }
      }
      .tiles__line-img {
        --tile-margin: 3vw;
        background-position: 50% 50%;
        background-size: cover;
        border-radius: 50%;
        flex: none;
        height: 30vh;
        margin: var(--tile-margin);
        width: 30vh;
        background-color:#1d9bf0;
        opacity: 0.3;

      }
      .tiles__line-img--large {
        border-radius: 20vh;
        width: 100vh;
        opacity: 0.3;
      }	  
	  
	/* 悟空动态壁纸 */  
	  video {
   position: fixed; /* 相对于视口进行定位 */
   top: 50%; /* 居中显示 */
   left: 50%;
   transform: translate(-50%, -50%); /* 水平、垂直居中 */
   min-width: 100%; /* 最小宽度为视口宽度 */
   min-height: 100%; /* 最小高度为视口高度 */
   width: auto; /* 根据比例调整大小 */
   height: auto;
   z-index: -1; /* 确保视频处于所有内容下面 */
}


	/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 5px; /* 设置滚动条宽度 */
}
 
/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background-color: #00000; /* 设置滚动条背景颜色 */
}
 
/* 滑块 */
::-webkit-scrollbar-thumb {
    background-color: #d2c49e3d; /* 设置滑块颜色 */
}
 
/* 当滑块处于hover状态时的效果 */
::-webkit-scrollbar-thumb:hover {
    background-color: #d2c49e; /* 设置滑块hover时的颜色 */
}