.page2 {
    background: linear-gradient(135deg, #2B4162 0%, #385F71 100%);
    color: white;
    font-family: 'Arial', sans-serif;
}

.presentation {
    max-width: 90vw;
    margin: 0 auto;
    padding: 2vh;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.presentation h1 {
    text-align: center;
    font-size: clamp(1.5rem, 4vw, 3rem);
    margin: 2vh 0;
    color: #fff;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
}

.elephants-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 2vw;
    margin-bottom: 2vh;
}

.elephant {
    background: rgba(255, 255, 255, 0.08);
    padding: 2vh 2vw;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    width: 45%;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.8s ease;
    max-height: 60vh;
    overflow-y: auto;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.page2.active .elephant {
    transform: translateY(0);
    opacity: 1;
}

.elephant.africa {
    transition-delay: 0.2s;
}

.elephant.asia {
    transition-delay: 0.4s;
}

.elephant h2 {
    text-align: center;
    color: #fff;
    font-size: clamp(1.2rem, 3vw, 2rem);
    margin-bottom: 2vh;
}

.specs {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.specs p {
    display: flex;
    align-items: center;
    gap: 1vw;
    font-size: clamp(0.8rem, 2vw, 1.2rem);
    margin: 1vh 0;
}

.specs i {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    color: #8FD6E1;
}

.vs {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 20px rgba(143, 214, 225, 0.5);
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.8s ease 0.3s;
}

.page2.active .vs {
    transform: translateY(0);
    opacity: 1;
}

.extra-info {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.extra-info p {
    font-size: clamp(0.8rem, 2vw, 1.2rem);
    margin: 1vh 0;
    display: flex;
    align-items: center;
    gap: 1vw;
}

.fun-facts {
    width: 90%;
    margin-top: 2rem;
    padding: 2vh 2vw;
    background: rgba(143, 214, 225, 0.08);
    border-radius: 15px;
    max-width: 800px;
    margin: 2vh auto;
    transform: translateY(50px);
    opacity: 0;
    transition: all 0.8s ease 0.6s;
    font-size: clamp(0.8rem, 2vw, 1rem);
}

.page2.active .fun-facts {
    transform: translateY(0);
    opacity: 1;
}

.fun-facts h3 {
    color: #8FD6E1;
    margin-bottom: 1vh;
}

.fun-facts ul {
    list-style: none;
    padding: 0;
}

.fun-facts li {
    margin: 1vh 0;
    padding-left: 1em;
    position: relative;
}

.fun-facts li:before {
    content: "•";
    color: #8FD6E1;
    position: absolute;
    left: 0;
}

@media (max-width: 768px) {
    .elephants-container {
        flex-direction: column;
    }
    
    .elephant {
        width: 85%;
        padding: 2vh 3vw;
        max-height: 35vh;
    }
    
    .vs {
        margin: 0.5rem 0;
        font-size: 2rem;
    }
    
    .fun-facts {
        width: 85%;
        font-size: 0.85rem;
        margin: 1vh auto;
    }
    
    .extra-info {
        font-size: 0.85rem;
    }

    .presentation h1 {
        font-size: 2rem;
        margin: 0.5rem 0 1rem;
    }

    .specs p, .extra-info p {
        font-size: 0.85rem;
    }
}

/* 自定义滚动条样式 */
.elephant::-webkit-scrollbar {
    width: 0.4vw;
}

.elephant::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

.elephant::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

/* 确保向下箭头始终在底部 */
#css {
    position: fixed;
    bottom: 2vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    font-size: clamp(1.2rem, 3vw, 2rem);
}