@import url('https://fonts.googleapis.com/css2?family=Freckle+Face&family=Patrick+Hand+SC&display=swap');

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

@font-face {
    font-family: GoodDog Plain;
    src: url(../fonts/GOODDP__.TTF);
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
    cursor: default;
    font-family: "Patrick Hand SC", cursive;
    font-weight: 400;
    font-style: normal;
}

a {
    text-decoration: none;
    cursor: pointer;
}

li {
    list-style: none;
}

p {
    color: #000000;
    font-size: 1vw;
    line-height: 120%;
    font-weight: 400;
}

h1 {
    font-size: 4vw;
    font-family: "Freckle Face", system-ui;
    font-weight: 400;
    font-style: normal;
}

h2 {
    font-size: 3vw;
    font-family: "Freckle Face", system-ui;
    font-weight: 400;
    font-style: normal;
}

h3 {
    font-size: 1.7vw;
    font-family: GoodDog Plain;
    font-weight: 400;
    font-style: normal;
}

h4 {
    font-size: 1.2vw;
    font-family: GoodDog Plain;
    font-weight: 400;
    font-style: normal;
}


.img_meme{
width: 90%;
}

.btn {
    padding: .7vw 1.2vw;
    border-radius: .7vw;
    background: white;
    border: .15vw solid black;
    box-shadow: .2vw .2vw 0px 0px #000000;
}

.btn:hover {
    background: rgb(0, 0, 0);
    border: .15vw solid rgb(255, 255, 255);
    box-shadow: .2vw .2vw 0px 0px #000000;
}

.btn:hover p {
    color: white;
}

.social img {
    width: 2.5em !important;
    height: 2.5em !important;
    border-radius: .4em !important;
    padding: .7vw;
    background: white;
    border: .1em solid black !important;
    box-shadow: .2vw .2vw 0px 0px #000000;

}

.social:hover img {
    filter: invert(100%);
}

.body {
    overflow-x: hidden;
    width: 100%;
}

/*--------------------- website management ------------------
----------------*/

/*------------------------- navbar --------------
---------------*/

nav {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 3vw 7vw;
    justify-content: space-between;
    position: sticky;
    top: 0;
}

nav .logo {
    width: 20%;
}

nav .navigation {
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.2vw;
}

/*----------------------- hero-section --------------
-------------*/

.hero-section {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5vw 13vw;
    background: url(../images/hero-bg.jpg) no-repeat;
    background-size: cover;
    background-position: bottom center;
    position: relative;
}

.hero-section .left {
    width: 40%;
    text-align: center;
    padding: 0 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vw;
    margin-top:  -2vw
}

.hero-section .left a img {
    width: 8vw;
    transition: all .3s;
}

.hero-section .left a img:hover {
    filter: invert(100%);
}

.hero-section .right {
    width: 60%;
}

.hero-section .right img {
    width: 100%;
}

.hero-section .c1 {
    width: 3vw;
    top: 7vw;
    left: 10vw;
    position: absolute;
    animation: cloud 20s infinite linear forwards;
}

.hero-section .c2 {
    width: 5vw;
    left: -2vw;
    top: 25vw;
    position: absolute;
    animation: cloud 15s infinite alternate-reverse linear forwards;
}

.hero-section .c3 {
    width: 4vw;
    top: 29vw;
    right: 5vw;
    position: absolute;
    animation: cloud 12s infinite linear forwards;
}

.hero-section .c4 {
    width: 3vw;
    top: 13vw;
    left: 45vw;
    position: absolute;
    animation: cloud 23s infinite linear forwards;
}

.hero-section .c5 {
    width: 4vw;
    right: -1vw;
    top: 5vw;
    position: absolute;
    animation: cloud 17s infinite alternate-reverse linear forwards;
}

@keyframes cloud {
    from {
        left: 0vw;
    }
    to {
        left: 100vw;
    }
}

/*------------------------- contribution ----------------------
---------------*/

.contributions {
    width: 100%;
    padding: 5vw 20vw;
    gap: 3vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contributions .heading {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1vw;
}

.contributions .heading img {
    width: 5vw;
}

.contributions .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center; /* 如果你想要垂直居中对齐 */
    max-width: 100em; /* 确保一行最多只有4个img，因为每个img宽度为20em */
    margin: auto; /* 如果你想要.row在其父容器中居中 */
}

.contributions .row img {
    width: 25em;
    height: 25em;
    margin: 0 !important; /* 可以设置适当的边距，以便img之间有空间，此处以1%为例 */
    box-sizing: border-box; /* 如果你对img使用了内边距或边框，确保总宽度包含这些 */
    display: block; /* 或者 display: inline-block; */
    line-height: 0; /* 重置行高 */
}

.contributions .row .box {
    width: 40%;
    padding: 5vw;
    padding-bottom: 9vw;
    background: url(../images/contribution-box.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1vw;
}

.contributions .row .box .img {
    position: absolute;
    width: 8vw;
    bottom: -1vw;
    right: -1vw;
}

.contributions .row .box:nth-child(1) .img {
    animation: bounce 2s infinite;
}

.contributions .row .box:nth-child(2) .img {
    animation: bounce 3s infinite;
}

/*------------------------- tokenomics ----------------------
---------------*/

.tokenomics {
    width: 100%;
    padding: 9vw 20vw;
    gap: 5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url(../images/token-bg.png) no-repeat;
    background-size: 100% 100%;
}

.tokenomics .heading {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1vw;
}

.tokenomics .heading img {
    width: 5vw;
}

.tokenomics .content {
    width: 100%;
    display: flex;
    align-items: center;
}

.tokenomics .content .left {
    width: 60%;
    position: relative;
}

.tokenomics .content .left img {
    width: 60%;
    transform-origin: center;
    animation: rotate 5s infinite linear forwards;
}

@keyframes rotate {
    from {
        transform: rotateZ(0deg);
    }
    to {
        transform: rotateZ(360deg);
    }
}

.tokenomics .content .left p.rank {
    position: absolute;
    font-family: GoodDog Plain;
    font-size: 2vw;
}

.tokenomics .content .left p.rank1 {
    top: 2vw;
    left: 7vw;
}

.tokenomics .content .left p.rank2 {
    top: 7vw;
    left: 16.5vw;
}

.tokenomics .content .left p.rank3 {
    top: 15.5vw;
    left: 12vw;
}

.tokenomics .content .left p.rank4 {
    top: 11vw;
    left: 1.5vw;
}

.tokenomics .content .left .supply {
    position: absolute;
    width: 6vw;
}

.tokenomics .content .left .supply li {
    list-style: disc;
    font-size: .8vw;
}

.tokenomics .content .left .supply1 {
    top: -4vw;
    left: 4vw;
}

.tokenomics .content .left .supply2 {
    top: 5vw;
    left: 23vw;
}

.tokenomics .content .left .supply3 {
    top: 21vw;
    left: 13vw;
}

.tokenomics .content .left .supply4 {
    top: 14vw;
    left: -7vw;
}

.tokenomics .content .right {
    width: 40%;
    position: relative;
}

.tokenomics .content .right img {
    width: 100%;
}

.tokenomics .content .right .sms {
    width: 60%;
    position: absolute;
}

.tokenomics .content .right .sms p {
    font-size: .8vw;
    font-weight: 400;
}

.tokenomics .content .right .sms1 {
    top: 1vw;
    left: 5vw;
}

.tokenomics .content .right .sms2 {
    top: 6vw;
    left: 6vw;
}

.tokenomics .content .right .sms3 {
    top: 11vw;
    left: 7vw;
}

/*------------------------- mail1 --------------
---------------*/

.mail1 {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vw;
    padding: 4vw 0;
    position: relative;
}

.mail1 .img {
    width: 50%;
}

.mail1 .img1 {
    width: 35%;
}

.mail1 .img2 {
    width: 20%;
}

.mail1 .c1 {
    position: absolute;
    width: 3vw;
    top: 8vw;
    left: 9vw;
    animation: cloud 10s infinite linear forwards;
}

.mail1 .c2 {
    position: absolute;
    width: 5vw;
    top: 15vw;
    right: 9vw;
    animation: cloud 10s alternate-reverse infinite linear forwards;
}

/*------------------------- join --------------
---------------*/

.join {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.join .content {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    position: relative;
}

.join .join-img {
    width: 100%;
}

.join .link {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    margin-right: 5vw;
    margin-top: 5vw;
}

.join .link a .tele {
    width: 8vw;
}

.join .link a .tele:hover {
    filter: invert(100%);
}

/*------------------- footer -----------------
-----------*/
#contributions2 {
    background: url(../images/footer.png) no-repeat;
    background-position: top center;
    background-size: 100em;
    padding-top: 8em;
}

footer {
    width: 100%;
    padding: 5vw 12vw;
    padding-bottom: 2vw;
    background: url(../images/footer.png) no-repeat;
    background-position: top center;
    background-size: cover;
}

footer .top {
    padding: 2vw 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid black;
}

footer .link {
    display: flex;
    flex-wrap: wrap;
    gap: 1vw;
    width: 100%;
}

footer .top .left {
    width: 40%;
}

footer .menu {
    width: 25%;
}

footer .links {
    width: 20%;
}

.copy p {
    text-align: center;
    padding-top: 1vw;
}

@media(max-width:768px) {

    p {
        font-size: 3.5vw;
    }
    
    h1 {
        font-size: 12vw;
    }

    h2 {
        font-size: 7vw;
    }

    h3 {
        font-size: 6vw;
    }

    h4 {
        font-size: 3.5vw;
    }
    
    .btn {
        padding: 1vw 2.5vw;
        border-radius: 1.3vw;
        border: .25vw solid black;
        box-shadow: .4vw .4vw 0px 0px #000000;
    }
    
    .btn:hover {
        background: rgb(0, 0, 0);
        border: .25vw solid rgb(255, 255, 255);
        box-shadow: .4vw .4vw 0px 0px #000000;
    }
    
    .social img {
        width: 6vw;
        border-radius: .7vw;
        padding: 1.3vw;
        background: white;
        border: .25vw solid black;
        box-shadow: .4vw .4vw 0px 0px #000000;
    }
    
    .social:hover img {
        filter: invert(100%);
    }
    
    .body {
        overflow-x: hidden;
        width: 100%;
    }
    
    /*--------------------- website management ------------------
    ----------------*/
    
    /*------------------------- navbar --------------
    ---------------*/
    
    
    nav .navigation {
        width: 65%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 1.8vw;
    }
    
    /*----------------------- hero-section --------------
    -------------*/
    
    .hero-section {
        flex-direction: column;
        align-items: center;
        padding: 5vw 5vw;
    }
    
    .hero-section .left {
        width: 90%;
        text-align: center;
        padding: 0 0%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3vw;
    }
    
    .hero-section .left a img {
        width: 19vw;
    }
    
    .hero-section .right {
        width: 100%;
    }
    
    .hero-section .right img {
        width: 100%;
    }

    .hero-section .c1 {
        width: 8vw;
        top: 5vw;
    }
    
    .hero-section .c2 {
        width: 11vw;
    }
    
    .hero-section .c3 {
        width: 15vw;
        top: 70vw;
    }
    
    .hero-section .c4 {
        width: 7vw;
        top: 90vw;
    }
    
    .hero-section .c5 {
        width: 6vw;
        top: 55vw;
        right: -1vw;
    }

    /*------------------------- contribution ----------------------
---------------*/

.contributions {
    width: 100%;
    padding: 10vw 5vw;
    gap: 8vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contributions .heading {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5vw;
}

.contributions .heading img {
    width: 10vw;
}

.contributions .row {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8vw;
}

.contributions .row .box {
    width: 70%;
    padding: 7vw;
    padding-bottom: 18vw;
    gap: 3vw;
}

.contributions .row .box .img {
    position: absolute;
    width: 20vw;
    bottom: -1vw;
    right: -1vw;
}

/*------------------------- tokenomics ----------------------
---------------*/

.tokenomics {
    width: 100%;
    padding: 17vw 20vw;
    gap: 15vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url(../images/token-bg.png) no-repeat;
    background-size: 100% 100%;
}

.tokenomics .heading {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5vw;
}

.tokenomics .heading img {
    width: 10vw;
}

.tokenomics .content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16vw;
    align-items: center;
}

.tokenomics .content .left {
    width: 75%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tokenomics .content .left img {
    width: 100%;
}

.tokenomics .content .left p.rank {
    position: absolute;
    font-family: GoodDog Plain;
    font-size: 5.5vw;
}

.tokenomics .content .left p.rank1 {
    top: 4vw;
    left: 12vw;
}

.tokenomics .content .left p.rank2 {
    top: 15vw;
    left: 32.5vw;
}

.tokenomics .content .left p.rank3 {
    top: 30vw;
    left: 23vw;
}

.tokenomics .content .left p.rank4 {
    top: 20vw;
    left: 3.5vw;
}

.tokenomics .content .left .supply {
    position: absolute;
    width: 20vw;
}

.tokenomics .content .left .supply li {
    list-style: disc;
    font-size: 2.2vw;
}

.tokenomics .content .left .supply1 {
    top: -7vw;
    left: 2vw;
}

.tokenomics .content .left .supply2 {
    top: 12vw;
    left: 45vw;
}

.tokenomics .content .left .supply3 {
    top: 43vw;
    left: 22vw;
}

.tokenomics .content .left .supply4 {
    top: 19vw;
    left: -21vw;
}

.tokenomics .content .right {
    width: 100%;
    position: relative;
}

.tokenomics .content .right img {
    width: 120%;
}

.tokenomics .content .right .sms {
    width: 77%;
    position: absolute;
}

.tokenomics .content .right .sms p {
    font-size: 2vw;
    font-weight: 400;
}

.tokenomics .content .right .sms1 {
    top: 3vw;
    left: 13vw;
}

.tokenomics .content .right .sms2 {
    top: 17vw;
    left: 17vw;
}

.tokenomics .content .right .sms3 {
    top: 31vw;
    left: 21vw;
}

/*------------------------- mail1 --------------
---------------*/

.mail1 {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vw;
    padding: 4vw 0;
    position: relative;
}

.mail1 .img {
    width: 70%;
}

.mail1 .img1 {
    width: 55%;
}

.mail1 .img2 {
    width: 40%;
}

.mail1 .c1 {
    position: absolute;
    width: 7vw;
    top: 12vw;
    left: 9vw;
    animation: cloud 13s infinite linear forwards;
}

.mail1 .c2 {
    position: absolute;
    width: 9vw;
    top: 25vw;
    right: 9vw;
    animation: cloud 8s alternate-reverse infinite linear forwards;
}


/*------------------------- join --------------
---------------*/

.join {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.join .content {
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    position: relative;
}

.join .join-img {
    width: 100%;
}

.join .link {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    margin-right: 7vw;
    margin-top: 7vw;
}

.join .link h2 {
    font-size: 5vw;
}

.join .link a .tele {
    width: 15vw;
}

.join .link a .tele:hover {
    filter: invert(100%);
}

/*------------------- footer -----------------
-----------*/

footer {
    width: 100%;
    padding: 18vw 7vw;
    padding-bottom: 2vw;
    background: url(../images/footer.png) no-repeat;
    background-position: top center;
    background-size: cover;
}

footer .top {
    padding: 2vw 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5vw;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid black;
}

footer .link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2vw;
    width: 100%;
}

footer .top .left {
    width: 100%;
    text-align: center;
}

footer .menu {
    width: 70%;
    text-align: center;
}

footer .links {
    width: 100%;
    text-align: center;
}

.copy p {
    text-align: center;
    padding-top: 2vw;
}
    
}

.rough-border {
    padding: 1vw 2vw;
    margin-top: 2vw;
    border: 0.2em solid #000000; /* 粗一些的边框 */
    border-radius: 8px; /* 轻微的圆角 */
    box-shadow:
            0.2em 0.2em 0px #000000, /* 主阴影 */
            0.4em 0.4em 0px rgba(0, 0, 0, 0); /* 次阴影，可以根据需要调整颜色和透明度 */
}