:root {
    --primary-color: #373735; /* 新的主颜色 */
    --accent-color: #90908D;  /* 新的辅助颜色 */
    --text-color: #443F3F;
	 --text1-color: #F68D0D;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: '黑体', 'SimHei', 'Arial', sans-serif;
    background: linear-gradient(150deg, #f6f5f0 0%, #e8e6df 100%);
	
}

.nav-container {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    color: white;
    text-align: center;
}

.nav-container h1 {
    margin: 0;
    font-size: 2.4rem;
}

.nav-container p {
    font-size: 1.0rem;
    margin-top: 1rem;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 两列 */
    grid-template-rows: repeat(2, 1fr);   /* 两行 */
    gap: 2rem;
    padding: 3rem 10%;
}

.portal-card {
    background: rgba(242,241,228,0.85);
    border-radius: 15px;
	padding: 2rem;
    transition: transform 0.3s ease;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.portal-card:hover {
    transform: translateY(-8px) rotateX(10deg);
}

.card-icon {
    width: 120px;
    height: 120px;
    border-radius: 10px;
	margin: 0 auto 1.5rem;
	
    transition: filter 0.3s;
}

.card-title {
    font-size: 1.8rem;
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 1rem;
    position: relative;
}

.card-summary {
    font-size: 1.1rem;
    color: var(--text-color);
    text-align: center;
    margin-bottom: 1rem;
}

.card-description {
    font-size: 0.8rem;
    color: var(--text1-color);
    text-align: center;
    margin-top: 1rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.portal-card:hover .card-description {
    opacity: 1;
}

@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr; /* 单列 */
        grid-template-rows: repeat(4, 1fr); /* 四行 */
        padding: 2rem 5%;
    }

}