@font-face {
    font-family: "IBM Plex Sans SC EL";
    src: url(assets/IBMPlexSansSC-Text.woff2);
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans SC";
    src: url(assets/IBMPlexSansSC-Text.woff2);
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans SC";
    src: url(assets/IBMPlexSansSC-Medium.woff2);
    font-weight: 500;
    font-display: swap;
}

body {
    margin: 0;
    box-sizing: border-box;

    padding-top: 32px;

    display: flex;
    flex-flow: column nowrap;
    align-items: center;

    width: 100%;

    gap: 20px;

    color: #333333;
}

p {
    margin-block: 0;
}

.geologica {
  font-family: "Geologica", "IBM Plex Sans SC EL", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "CRSV" 1,
    "SHRP" 0;
}

.geist {
    font-family: "Geist", "IBM Plex Sans SC", sans-serif;
}

.logo {
    margin: auto;
}

.margin-top {
    margin: 24px 0;
}

.banner {
    position: relative;

    display: flex;
    flex-flow: row nowrap;

    justify-content: end;
}

.bannerTitle {
    display: flex;
    flex-flow: column nowrap;
    font-size: 12px;
    line-height: 1.4;

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0px;
    z-index: 10;
}

.projectList, .aboutUs, .banner {
    gap: 12px;
    width: 320px;
    max-width: calc(100% - 20px);
}

.cardList {
    gap: 12px;
}

.cat {
    width: 50vw;
    max-width: 220px;

    filter: drop-shadow(0px 4px 12px #F4C686);

    z-index: 1;

    transition: all 1s;
}

.cat:hover {
    z-index: 9999;
    transform: scale(110%);

    filter: drop-shadow(0px 4px 24px #F4C686);

    transition: all 1s;
}

.col {
    display: flex;
    flex-flow: column nowrap;
}

.divider {
    height: 1px;
    width: calc(100% - 20px);
    background-color: #dddddd;
}

.secTitle :nth-child(1) {
    font-size: 24px;
}
.secTitle :nth-child(2) {
    font-size: 18px;
}

.secDesc :nth-child(1) {
    font-size: 14px;
}
.secDesc :nth-child(2) {
    font-size: 14px;
}

.pjCard {
    padding: 12px;

    border: 2px dashed #dddddd;
    border-radius: 6px;

    flex: 1;
    
    /* 1. 将两个渐变状态组合成一个大背景 */
    background: linear-gradient(104.55deg, #FFFFFF 60%, #EEEEEE 100%);
    /* 2. 放大背景尺寸 */
    background-size: 200% 200%;
    /* 3. 设置初始位置 */
    background-position: 0% 0%;

    transition: all 0.5s ease; /* transition 写一次就够了 */
    display: flex;
}

.cardList a:nth-child(odd):hover {
    background-position: 100% 100%;
    
    transform: rotate(-2deg);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
}

.cardList a:nth-child(even):hover {
    background-position: 100% 100%;
    
    transform: rotate(2deg);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
}

footer {
    width: 100%;
    height: 72px;
    background: radial-gradient(82.82% 100% at 50.13% 100%, rgba(79, 210, 179, 0.5) 0%, rgba(79, 210, 179, 0) 100%);
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    gap: 6px;
    color: #0C4F3F;
}