/* background-clip: text; 是一个 让背景图片/颜色只显示在文字形状内部 的 CSS 属性。这会产生 "文字被背景填充" 的视觉效果。 */
.fugu {
    background: linear-gradient(
        red 0%,
        #ff0 15%,
        #250 35%,
        rgb(186, 219, 85) 55%,
        #781 75%,
        #b41 100%
    );
}

.fugu .part1-header-left-box {
    font-family: Panton-Rust-Heavy-2;
    background: linear-gradient(#c34e96, #4e0cf6);
    background-clip: text;
}

.fugu .part1-header-left {
    background: inherit;
    color: transparent;
    transform: rotate(-3deg) scale(0.9, 1.65) skewY(-3deg) translateY(10px);
}

.fugu .part1-text-text {
    font-family: "Comic Sans MS", "Comic Sans", "Marker Felt", sans-serif;
}

.fugu .part1-more {
    font-family: Panton-Rust-Heavy-2;
    color: rgb(1, 39, 255);
    text-decoration: underline;
    background-color: lightgrey;
    padding: 2px 10px 5px 10px;
    border: 3px solid #333;
    border-top-color: #ccc;
    border-left-color: #ccc;
}

.fugu .part1-more::after,
.fugu .part1-more::before {
    opacity: 0;
}

.fugu canvas {
    opacity: 0;
}

.fugu .mouse-point {
    width: 13px;
    height: 20px;
    background-image: url("./imgs/cursor.svg");
    background-color: transparent;
    top: 10px;
    left: 6px;
    background-size: cover;
    background-repeat: no-repeat;
}

.fugu .mouse-point.active {
    background-image: url("./imgs/cursor-hover.svg");
    width: 15px;
    height: 20px;
}

.fugu .part1-imgs-box {
    position: relative;
    /* background-color: #3b1a1a; */
    border-radius: 18px;
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes spin {
    from {
        --angle: 0deg
    }

    to {
        --angle: 360deg
    }
}



.fugu .one-work-title {
    font-family: "Comic Sans MS", "Comic Sans", "Marker Felt", sans-serif;
}

.fugu .one-work-box .move-text {
    opacity: 0;
}

.fugu .part3-bottom.part3-bottom {
    font-family: "Comic Sans MS", "Comic Sans", "Marker Felt", sans-serif;
}

.fugu .part3-bottom.part3-bottom::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 10px;
    background-image: url("./imgs/border.gif");
}

.fugu .part3-bottom.part3-bottom::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 70px;
    height: 70px;
    background-image: url("./imgs/clippy.gif");
    background-repeat: no-repeat;
    background-size: cover;
    transform: translate(-35px, 5px);
    transition: all 0.5s ease-in-out;
}

.fugu .part1-imgs-box.part1-imgs-box {
    /* overflow:visible; */
}