/* 页面整体样式 */
body, html {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    background: linear-gradient(45deg, #ff6a00, #ee0979, #ffcd00, #4facfe, #00f2fe);
    background-size: 400% 400%;
    animation: gradientAnimation 10s ease infinite;
    color: white;
    text-align: center;
    overflow: hidden;
    cursor: url('https://cdn.iconscout.com/icon/premium/png-256-thumb/airplane-cursor-3391781-2830353.png'), auto; /* 自定义鼠标光标 */
}

/* 背景渐变动画 */
@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* 每个语言文本居中样式 */
.languages {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4.5em; /* 字体大小稍微变小 */
    width: 100%;
    text-align: center;
    opacity: 0;
    transition: opacity 1s ease;
}

.english {
    font-family: 'Roboto', sans-serif;
}

.spanish {
    font-family: 'Roboto', sans-serif;
}

.french {
    font-family: 'Playfair Display', serif;
}

.german {
    font-family: 'Playfair Display', serif;
}

.italian {
    font-family: 'Playfair Display', serif;
}

.portuguese {
    font-family: 'Playfair Display', serif;
}

.korean {
    font-family: 'Roboto', sans-serif;
}

.japanese {
    font-family: 'Noto Serif JP', serif;
}

.russian {
    font-family: 'PT Serif', serif; /* 俄语字体 */
}

.traditional-chinese {
    font-family: 'Noto Sans TC', sans-serif;
}

.simplified-chinese {
    font-family: 'Noto Sans SC', sans-serif; /* 使用更现代的简体中文字体 */
}

/* 图标按钮样式 */
.link-buttons {
    position: absolute;
    top: 60%; /* 图标距离文字的距离 */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px; /* 图标间距 */
}

.link-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: white;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.link-button:hover {
    transform: scale(1.2); /* 滑动到按钮时放大 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* 添加阴影效果 */
}

.link-button:active {
    transform: scale(0.95); /* 点击时按钮收缩 */
}

/* 每个图标背景颜色 */
.link-button:nth-child(1) {
    background-color: red; /* 飞机图标的背景色为红色 */
}

.link-button:nth-child(2) {
    background-color: green; /* 报纸图标的背景色为绿色 */
}

.link-button:nth-child(3) {
    background-color: blue; /* YouTube图标的背景色为蓝色 */
}

/* 特定按钮内容替换 */
.airplane:before {
    content: '✈'; /* 飞机图标 */
}

.newspaper:before {
    content: '📰'; /* 报纸图标 */
}

.youtube:before {
    content: '🎥'; /* YouTube图标 */
}