*{ margin: 0; padding: 0; }
a{ text-decoration: none; color:#3a3a3a; }

body{
	position: relative;
	width:100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-items: center;
	overflow: hidden;
	font-family: "Segoe UI",Segoe,Tahoma,Arial,Verdana,sans-serif;
}

.container {
	z-index: 10;
    border-radius: 10px;
    display: flex;
    justify-content: center; /* 水平居中保留 */
    align-items: center;     /* 垂直居中保留 */
    padding: 0 10%;
    position: relative;      /* 新增：为子元素定位提供基准 */
	flex-direction: column;
	top: -10%;

    width: 100vw;       
    height: 100vh;           /* 关键：确保容器有明确高度（否则百分比偏移无效） */
}

.container-item {
	display: flex;
	/* width:100%; */
	min-height:20vh;
}

.up{
	width: 100%;
    font-size: 1.2rem;
}

.up > .left{
	flex:0 0 60px;
	width: 60px;
	height: 60px;
	/* margin-top:8px; */
}
.up > .right{
	flex:1 1 0;
	margin-left:20px;
	/* background-color: #2ecc71; */
}
.up .site {
	color:#3498db;
	font-size: 1.2em;
}

.up .content {
	margin-top:20px;
    /* position: relative;     */
	/* 向上偏移10% */
    /* top: -10%;               */
    /* transform: translateY(0);  */
	
    /* text-indent: 2em; */
}



.down{
	width: 100%;
	margin-top:10px;
	padding-top: 20px;
	border-top:1px dashed #8b8b8b;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;  /* 关键属性：允许换行 */
	gap: 10px;       /* 可选：设置子元素间距 */
	/* flex-direction: column; */
}

.down .random{
	/* width:50px; */
	/* height: 50px; */
	height: 30px;
	line-height: 30px;
	vertical-align: middle;
	margin:10px;
	display: inline-flex;
    justify-content: center;

}

.down .random > svg{
	width:30px;
	height: 30px;
}

.down .random > span{
	margin-left: 5px;
}

/* 字符容器的替代样式 */
.icon_fallback {
	width:30px;
	height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
	color:#fff;
    background-color: #a1a1a1;
    border-radius: 50%;        /* 圆形效果 */
    font-weight: bold;         /* 字符加粗 */
	font-size:2em;
}

/* .icon_fallback {
	width: 50px;
	height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
	color:#fff;
    background-color: #a1a1a1;
    border-radius: 50%;        
    font-weight: bold;         
	font-size:2em;
} */


.like {
	/* position: absolute; */
	/* top:-60px; */
	/* top:-20px; */
	/* right: 0; */
}
.like >svg {
	width: 40px;
	height: 40px;
}

.navigation {
	position: absolute;
	right:10%;
	bottom: 25%;
	/* bottom:200px; */
	float:right;
	display: flex;
	flex-direction: row;
	align-items: center;
	z-index: 20;
}

.nav-button {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
    border-radius:50%;
}

.nav-button-pre { 
	padding:2px;
	width:40px; 
	height: 40px; 
}
.nav-button-pre:hover {
	padding:0;
	border-radius: 50%; 
	border:2px solid rgb(180, 179, 179);
}

.nav-button-next {
	padding:3px;
	width:50px; 
	height: 50px; 
}
.nav-button-next:hover {
	padding:0;
	border-radius: 50%; 
	border:3px solid rgb(201, 5, 126);
}

/* 颜色变幻动画关键帧 */
@keyframes rainbow{
    0%   {background:#3498db;}
    15%  {background:#9b59b6;}
    30%  {background:#e74c3c;}
    45%  {background:#f1c40f;}
    60%  {background:#2ecc71;}
    75%  {background:#e67e22;}
    100% {background:#3498db;}
}

/* 点击后给按钮加上的类 */
.changing{
    animation:rainbow 2s linear;
}

.slogan {
	position: absolute;
	right:10%;
	bottom:10%;
	/* bottom:50px; */
	
	display: grid;
	grid-template-columns: 1fr auto; /* 第一列自适应，第二列根据内容宽度 */
	align-items: center; /* 垂直居中 */
	justify-content: end; /* 整体靠右 */
	gap: 10px; /* 可选：设置两个元素之间的间距 */
	z-index: 20;
}

.slogan_info {
	display: flex;
	flex-direction: column;
	align-items: flex-end; /* 内部内容靠右 */
	text-align: right; /* 文本右对齐 */
}
.slogan_info > a{
	font-weight: bold;
 }
 .slogan_info > a:hover{
	color:red;
 }

.slogan img {
	width: 50px; /* 固定宽度 */
	height: 50px; /* 固定高度 */
	flex-shrink: 0; /* 防止缩小 */
}


/* 波浪效果 begin */
.wave {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -10;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
	background-color: #aef0c2;	
	/* background-color: #e8d7f7; */
    overflow: hidden;
}

.wave:before, 
.wave:after {
    content: "";
    position: absolute;
    left: 50%;
    min-width: 300vw;		/* 300vw */
    min-height: 300vw;		/* 300vh */
    background-color: #fff;
    animation-name: rotate;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 20s; /* 这里添加了单位 */
}

.wave:before {
    bottom: 15vh;
    border-radius: 45%;
}

.wave:after {
    bottom: 12vh;
    opacity: .5;
    border-radius: 47%;
}

@keyframes rotate {
    0% {
        transform: translate(-50%, 0) rotateZ(0deg);
    }
    50% {
        transform: translate(-50%, -2%) rotateZ(180deg);
    }
    100% {
        transform: translate(-50%, 0%) rotateZ(360deg);
    }
}

/* 波浪效果 ending */


@media(max-width:500px){
	.down .random > span {
		display: none;
	}
}