::selection {background-color:rgb(40,55,92); color:rgb(145, 236, 209);} 
::-moz-selection {background-color:rgb(40,55,92); color:rgb(145, 236, 209);} /*火狐浏览器*/
::-webkit-selection {background-color:rgb(40,55,92); color:rgb(145, 236, 209);} /*谷歌*/

body {
    background: linear-gradient(100deg, rgb(224, 236, 193) 10%, rgb(179, 223, 236), rgb(220, 193, 235));
    /*background: linear-gradient(80deg , rgb(216, 151, 216) 30% , rgb(194, 86, 149) , rgb(179, 113, 206));*/
    /*background-color: rgb(255 , 228 ,196);*/
    background-attachment: fixed;
    overflow-x: hidden;
}

.topbar {
    width: 100%;
    user-select: none;
}

.topline {
    width: 100%;
    height: 1px;
    background-color: rgb(0, 0, 0);
}

.topbarfilling {
    display: flex;
    justify-content: start;
    flex-wrap: nowrap;
    align-items: center;
    overflow: hidden;
    height: 56px;
    width: 100%;
}

.topbarfilling h1 {
    text-transform: uppercase;
    font-weight: normal;
    letter-spacing: 6px;
    flex-shrink: 0;
    font-size: 32px;
}

.scroll-text {
    flex-shrink: 0;
    overflow: hidden;
    width: 1978px;
    white-space: nowrap;
    animation: animate var(--t) linear infinite;
    animation-delay: calc(var(--t) / -2);
}

.second {
    flex-shrink: 0;
    overflow: hidden;
    width: 1978px;
    white-space: nowrap;
    animation: animate2 var(--t) linear infinite;
}

@keyframes animate {
    from {
        transform: translate(100%);
    }

    to {
        transform: translate(-100%);
    }
}

@keyframes animate2 {
    from {
        transform: translate(0%);
    }

    to {
        transform: translate(-200%);
    }
}

.box {
    position: static;
    margin-left: auto;
    margin-right: auto;
    width: 83vw;
}

.topbox {
    position: relative;
    width: 100%;
    height: 50vw;
}

.topbox div {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
}

.bubble {
    position: absolute;
    background-image: url('../image/main/talkbubble.gif');
    z-index: 3;
    width: 64vw;
    height: 32vw;
    top: 0;
    left: 6%;
    image-rendering: pixelated;
}


.title {
    top: 3vw;
    right: 2.6%;
    width: 70%;
    height: 8vw;
    background-image: url('../image/main/title.png');
    z-index: 5;
}

.title2 {
    top: 10vw;
    right: 7%;
    background-image: url('../image/main/title2.png');
    width: 66%;
    height: 8vw;
    z-index: 5;
}

.title3 {
    background-image: url('../image/haha.gif');
    background-size: cover;
    image-rendering: pixelated;
    width: 20.5vw;
    height: 16vw;
    border-radius: 2vw;
    position: absolute;
    top: 3.1vw;
    transition: 0.6s;
}

.title3 p {
    position: absolute;
    font-family: 'Douyin Sans';
    font-size: 0.84vw;
    top: 17vw;
    left: 1vw;
    user-select: none;
    transition: 0.6s;
}

.title3:hover {
    width: 24.6vw;
    height: 19.2vw;
}

.title3:hover p {
    top: 20.2vw;
}

.smallheart {
    position: absolute;
    background-image: url('../image/main/Heart.gif');
    width: 3vw;
    height: 3vw;
    z-index: 6;
}

.bubble2 {
    position: absolute;
    background-image: url('../image/main/talkbubble.gif');
    z-index: 3;
    width: 14vw;
    height: 7vw;
    top: 20vw;
    right: 28%;
    image-rendering: pixelated;
}

.bubble3 {
    position: absolute;
    background-image: url('../image/main/talkbubble.gif');
    transform: scale(-1 , 1);
    z-index: 3;
    width: 14vw;
    height: 7vw;
    top: 20vw;
    right: 0;
    image-rendering: pixelated;
}

.content .title h1 {
    font-size: 6vw;
}

.linktitle {
    z-index: 1;
    font-size: 3vw;
    font-weight: lighter;
    color: rgb(155, 209, 209);
    user-select: none;
}

.homelink {
    position: absolute;
    cursor: pointer;
    border: none;
    border-radius: 0.6vw;
    padding-left: 1.6vw;
    padding-right: 1.6vw;
    padding-top: 0.5vw;
    height: 2.2vw;
    color: black;
    background: linear-gradient(120deg, rgb(43, 255, 43), rgb(146, 255, 43));
    font-size: 1vw;
    font-weight: bold;
    display: inline-block;
    text-align: center;
    user-select: none;
    transition: all 0.5s;
    font-family: 'Douyin Sans';
}

.homelink:hover {
    transform: rotate(-10deg);
}

.homelink:active {
    background: linear-gradient(140deg, rgb(234, 255, 43), rgb(138, 255, 43));
}

.homelink span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

.homelink span:after {
    content: '→';
    position: absolute;
    opacity: 0;
    right: -1vw;
    transition: 0.5s;
}

.homelink:hover span {
    padding-right: 2vw;
}

.homelink:hover span:after {
    opacity: 1;
    right: 0;
}

.line {
    width: 100%;
    height: 1px;
    border-top: 1px dashed rgb(0, 0, 0);
    border-bottom: none;
    border-left: none;
    border-right: none;
}

.scrolldown {
    position: absolute;
    text-align: center;
    top: 40vw;
    width: 100%;
    height: 10vw;
    z-index: 3;
}

.rotate {
    animation: rotateImg 30s linear infinite;
}

@keyframes rotateImg {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }

}

.links {
    width: 83vw;
    margin: 0 auto;
}

.cardtitle {
    color: black;
    position: relative;
    margin-bottom: 2vw;
    user-select: none;
}

.cardtitle h1 {
    display: inline-block;
    font-size: 4vw;
    font-family: 'Douyin Sans';
}

.cardtitle p {
    font-size: 1vw;
    text-transform: uppercase;
    font-family: 'Douyin Sans';
}

.cardcontainer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    flex-grow: 0;
    flex-shrink: 0;
    margin-left: 1vw;
    padding-top: 2vw;
    padding-bottom: 8vw;
}

.cardwrap {
    perspective: 500px;
    margin: 0 1vw;
    width: 14vw;
    height: 20vw;
}

.card {
    transition: transform 1.4s, height 0.7s;
    background-color: black;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
    width: 14vw;
    height: 20vw;
    box-shadow: 0 1vw 1vw rgba(0, 0, 0, 0.5);
    border-radius: 1vw;
    transform: rotateY(-5deg);
    cursor: pointer;
    z-index: 1;
}

.card:hover {
    transform: rotateY(10deg);
    height: 25vw;
}

.cardicon {
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 4vw;
    height: 4vw;
    z-index: 2;
    margin: 0 auto;
    margin-top: 13vw;
}

.cardtext {
    color: rgb(240, 248, 255);
    font-size: 2vw;
    font-weight: lighter;
    text-align: center;
    z-index: 2;
}

.cardinfo {
    padding-top: 0.6vw;
    padding-left: 2vw;
    padding-right: 2vw;
    color: #ffffff;
    font-size: 1vw;
    font-weight: lighter;
}

.about {
    width: 83vw;
    height: fit-content;
    margin-top: 2vw;
}

.abouttitle {
    width: 100%;
    height: 6vw;
    font-family: 'Douyin Sans';
    user-select: none;
    position: relative;
}

.abouttitle h1 {
    font-size: 4vw;
}

.abouttitle p {
    font-size: 1vw;
    text-transform: uppercase;
}

.abouttitle p2 {
    font-size: 1vw;
}

.aboutname {
    width: 90%;
    height: 6vw;
    position: relative;
    margin: 0 auto;
}

.avatar {
    background-image: url('../image/avatar.png');
    width: 4vw;
    height: 4vw;
    border-radius: 50%;
    display: flex;
    background-size: contain;
    position: absolute;
    top: 1vw;
    left: 16.6%;
}

.mytags {
    width: 60%;
    height: 2.2vw;
    margin: 0 auto;
    position: relative;
}

.mytag {
    position: absolute;
    border: none;
    border-radius: 0.6vw;
    padding-left: 1.6vw;
    padding-right: 1.6vw;
    padding-top: 0.5vw;
    height: 2.2vw;
    color: black;
    background: linear-gradient(120deg, rgb(43, 255, 43), rgb(146, 255, 43));
    font-size: 1vw;
    font-weight: bold;
    display: inline-block;
    text-align: center;
    user-select: none;
    transition: all 0.5s;
    font-family: 'Douyin Sans';
}

.mytag:hover {
    transform: rotate(-10deg);
}

.mytag span {
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

.mytag span:after {
    content: '★';
    position: absolute;
    opacity: 0;
    right: -1vw;
    transition: 0.5s;
}

.mytag:hover span {
    padding-right: 2vw;
}

.mytag:hover span:after {
    opacity: 1;
    right: 0;
}

.alt {
    background: linear-gradient(140deg, rgb(234, 255, 43), rgb(138, 255, 43));
}

.alt1 {
    background: linear-gradient(140deg, rgb(230, 30, 63), rgb(230, 30, 213));
}

.alt2 {
    background: linear-gradient(140deg, rgb(211, 33, 255), rgb(224, 47, 156));
}

.alt3 {
    background: linear-gradient(140deg, rgb(42, 177, 255), rgb(147, 89, 255));
}

.alt4 {
    background: linear-gradient(140deg, rgb(167, 66, 250), rgb(62, 107, 255));
}

.alt5 {
    background: linear-gradient(140deg, rgb(205, 228, 255), rgb(241, 244, 255));
}

.aboutcontent {
    position: relative;
    width: 50vw;
    margin: 0 auto;
    font-family: 'Douyin Sans';
    font-size: 1vw; 
    line-height: 2em;
}

.aboutcontent p {
    position: relative;
    z-index: 3;
}

.aboutcontent a {
    background-color: #34db74;
    cursor: pointer;
    color: black;
    text-decoration: none;
}

.attack {
    position: absolute;
    z-index: 2;
    width: 12vw;
    height: 12vw;
    top: -2vw;
    right: 2vw;
    border-radius: 1vw;
    background-image: url('../image/main/attackshowcase.gif');
    background-repeat: no-repeat;
    background-size: contain;
    image-rendering: pixelated;
}

.megif {
    position: absolute;
    z-index: 3;
    width: 24vw;
    height: 13.5vw;
    top: 28vw;
    right: -9vw;
    border-radius: 1vw;
    background-image: url('../image/main/obs.gif');
    background-repeat: no-repeat;
    background-size: contain;
    user-select: none;
    color: rgb(71, 71, 71);
}

.guns {
    position: absolute;
    z-index: 2;
    width: 23vw;
    height: 8vw;
    top: 32vw;
    right: -8vw;
    background-image: url('../image/main/ak.png');
    background-repeat: no-repeat;
    background-size: contain;
}

.megif2 {
    position: absolute;
    z-index: 1;
    width: 24vw;
    height: 13.5vw;
    top: 28vw;
    right: -9vw;
    border-radius: 1vw;
    background-color: #34db74;
}

.mousegif {
    position: absolute;
    z-index: 1;
    width: 10vw;
    height: 10vw;
    top: 12vw;
    left: -9vw;
    transform: rotate(-20deg);
    background-image: url('../image/main/mm.gif');
    background-repeat: no-repeat;
    background-size: contain;
}

.gamegridbox {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 88888;
}

.gamegrid {
    position: absolute;
    background-image: url('https://ik.imagekit.io/shunin/website/gamegrid.png');
    background-size: contain;
    background-repeat: no-repeat;
    left: 50vw;
    top: 4vw;
    transform: translateX(-50%);
    width: 38.4vw;
    height: 41.6vw;
    border-radius: 1vw;
    z-index: 99999;
}

.gamegridloading {
    position: absolute;
    left: 50vw;
    top: 20vw;
    transform: translateX(-50%);
    border: 1vw solid #ffffff;
    border-top: 1vw solid #34db74;
    border-radius: 50%;
    width: 6vw;
    height: 6vw;
    animation: spin 0.8s linear infinite;
    z-index: 99888;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.off {
    display: none;
}

.close {
    position: fixed;
    width: 4vw;
    height: 4vw;
    top: 2vw;
    right: 28vw;
    border: solid 0.3vw;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    z-index: 100000;
    transition: background-color 0.5s;
}

.close img {
    width: 4vw;
    height: 4vw;
    position: relative;
    top: -0.3vw;
    left: -0.2vw;
    z-index: 100001;
}

.close:hover {
    background-color: rgba(255, 255, 255, 0.6);
}

.thispage {
    width: 83vw;
    height: fit-content;
    margin-top: 8vw;
}