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

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 {

	margin-top: -10vh;

	display: flex;
    flex-direction: column;   /* 主轴垂直 → 子元素上下排布 */
	align-content: center;
	justify-content: center;

	z-index: 10;
    border-radius: 10px;

    padding: 0 10%;
    position: relative;      /* 新增：为子元素定位提供基准 */

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

/* .content 中的内容靠左 */
.container >  .content{
	display: block;
    align-self: center;
	margin-bottom: 20px;
	/* font-size: 1.2em; */
}

.container >  .content > div:first-of-type{
	max-height:50vh;
	overflow-y: auto;
    font-size: 1.2rem;
	scrollbar-width: none; 
	/* scrollbar-width: thin; */
	/* scrollbar-color: rgba(0, 0, 0, 0.2) transparent; */
}

.container >  .content > div:nth-child(2){
	color:rgb(88, 140, 236);
	max-height:10vh;
	overflow-y: auto;
	scrollbar-width: none; 
	/* scrollbar-width: thin; */
	/* scrollbar-color: rgba(0, 0, 0, 0.2) transparent; */
	margin-top:10px;
	padding-top: 10px;
	border-top: 1px dashed #adccf3;
}

/* .info 中的内容靠右 */
.container >.info{
	margin-top: 5vh;
	display: flex;
	justify-content: center;
}
.container >.info > img{
	width:30px;
	height: 30px;
	margin-right: 10px;
	border-radius: 50%;
}
.container >.info > a{
	color:#e67e22;
}

.navigation {
	position: absolute;
	right:10%;
	bottom: 20%;
	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%;
	
	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; /* 防止缩小 */
}


@media(max-width:500px){

	.container >  .content{ }

	.container >  .content > div:first-of-type{
		/* font-size: 1em; */
		max-height: 50vh;
	}
	.container >  .content > div:nth-child(2){

	}

	.navigation{ bottom: 15%; }
	.slogan{ bottom: 5%; }
}


/* 波浪效果 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: #adccf3;
    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 */