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

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;
    font-size: 1.5rem;
    display: flex;
    justify-content: center; /* 水平居中保留 */
    align-items: center;     /* 垂直居中保留 */
    padding: 0 10%;
    position: relative;      /* 新增：为子元素定位提供基准 */

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

.content {
    text-indent: 2em;
    position: relative;     /* 新增：启用位移 */
    top: -10%;              /* 向上偏移10% */
    transform: translateY(0); /* 避免覆盖原有变换（若有） */
}

.content > a {
	color: #333;
	line-height: 2em;
}

.content > .quote_like {
	position: absolute;
	top:-50px;
	right: 0;
}
.content > .quote_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: #f3c369;
    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 */