body {
    margin: 0;
    padding: 0;
    background: url("./public/1080微信背景-安好.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    text-align: center;
    overflow: hidden;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", Tahoma, "Hiragino Sans GB", "Heiti SC", "Comic Sans MS",
          Arial, "Microsoft YaHei", "San Francisco", STHeiti, "Segoe UI", Geneva, "WenQuanYi Micro Hei", sans-serif,
          system-ui, -apple-system, BlinkMacSystemFont, "Times New Roman";
}

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


/* .main {
    width: 85vw;
    height: 85vh;
    background-color: rgba(255, 255, 255, 0.219);
    text-align: center;
    border-radius: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
} */
.main {
    text-align: center;
    /*让div内部文字居中*/
    width: 90vw;
    height: 90vh;
    background-color: rgba(255, 255, 255, 0.219);
    border-radius: 20px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    overflow: scroll;

}

.main::-webkit-scrollbar {
    width: 0px;
}

.box {
    width: 80%;
    min-height: 9rem;
    /* border: solid white 3px; */
    border-radius: 12px;
    padding: 0.5rem;
    margin: 0.5rem;
    overflow: hidden;
    transition: all 0.5s;
    border: solid 2px #00000000;
}

.box:hover {
    scale: 1.15;
}

.box-color {
    background-color: #f3f1f1e8;
}

.box-color-no {
    background-color: #afafafe8;
}

.title,
.url,
.update,
.detail .status {
    margin: 0.5rem;
}

.title {
    font-size: 2rem;
    /*text-wrap: nowrap;*/
    /*text-overflow: ellipsis;*/
    /*overflow: hidden;*/
    
     overflow: hidden;

 text-overflow: ellipsis;

 white-space: nowrap;
}

.url {
    font-size: 0.9rem;

}

.update {
    font-size: 0.8rem;
}

.detail {
    font-size: 0.8rem;
}

.status {
    font-size: 1rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}
.mg{
    margin: 3px;
}

a {
    color: black;
    display: contents;
}

h3 {
    width: 95%;
    height: 50px;
    min-height: 4rem;
    margin: 15px 0px;
    border-radius: 14px;
    border: solid 1px #0000004a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: all 3s;
    word-break: break-all;
    text-align: center;
    /* background: #f3f1f1e8; */
    font-size: 1.25rem;
    background-color: #f3f1f1e8;

}

h3:hover {
    width: 100%;

}

h3,
.box {
    /* box-shadow: -1px 2px 4px 0px #b76dfaad; */
    /* box-shadow: 0px 4px 6px 1px black; */
}

.status span:last-child {
    color: #fff;
    padding: 0.2rem 0.4rem;
    border-radius: 0.9rem;
    font-size: 0.5rem;
    cursor: pointer;
}

#change {
    width: 2rem;
    height: 2rem;
    text-align: center;
    font-size: 2rem;
    border: double 0.2rem #0000004a;
    padding: 0.5rem;
    /* margin: 5px 5px; */
    background-color: #f3f1f1ad;
    position: fixed;
    /* top: 28px;
          right: 14px; */
    top: 1rem;
    right: 1rem;
    z-index: 100;
    cursor: pointer;
    transition: all 1s;
    font-size: 0.5rem;
    border-radius: 5rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* box-shadow: 1px 1px 5px 1px #7a7a7a; */
    /* box-shadow: 0px 4px 6px 1px black; */
}

#change:hover {
    background-color: #f3f1f1e8;
}


.data {
    display: flex;
}

.animation-changeP {
    animation-name: animation_A_B;
    animation-duration: 3s;
}

@keyframes animation_A_B {
    from {}

    to {}
}

/* 定义旋转动画css类 */
.rotate-animation {
    animation: rotate 1s;
    /* 匀速运动 */
    /*animation-fill-mode: linear;*/
}

/* 定义旋转动画的关键帧 */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(30deg);
    }

    50% {
        transform: rotate(90deg);
    }

    75% {
        transform: rotate(30deg);
    }

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

/* 定义消失动画css类 */
.miss-animation {
    animation: miss 1s;
    /* 匀速运动 */
    /*animation-fill-mode: linear;*/
}

/* 定义消失动画的关键帧 */
@keyframes miss {
    0% {
        transform: scale(1) rotate(0deg) translate(-0%);
    }

    /* 25% {
        transform: scale(0.5) rotate(30deg);
    }

    50% {
        transform: scale(0.8) rotate(90deg);
    }

    75% {
        transform: scale(0.6) rotate(30deg);
    } */

    100% {
        transform: scale(0) rotate(90deg) translate(-100%);
    }
}

/* 定义出现动画css类 */
.show-animation {
    animation: show 1s;
    /* 匀速运动 */
    /*animation-fill-mode: linear;*/
}

/* 定义出现动画的关键帧 */
@keyframes show {
    0% {
        transform: scale(0) rotate(90deg) translate(-100%);
    }

    /* 25% {
        transform: scale(0.6) rotate(30deg);
    }

    50% {
        transform: scale(0.8) rotate(90deg);
    }

    75% {
        transform: scale(0.5) rotate(30deg);
    } */

    100% {
        transform: scale(1) rotate(0deg) translate(-0%);
    }
}

#hitokoto {
    /* position: relative; */
    width: 80%;
    /* display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch; */
    background-color: #5698c3;
    color: white;
    min-height: max-content;
    border-radius: 12px;
    padding: 0.5rem;
    margin: 0.5rem;
    border: solid 2px #00000000;
    /* box-shadow: 0px 4px 6px 1px black; */
}

.say {
    position: relative;
}

#hitokoto_text {
    font-size: 1.4rem;
    text-align: center;
    line-height: 50px;
    word-break: normal;
    width: auto;
    margin: 0;
    padding: 15px 50px;
}


.bracket {
    font-size: 2rem;
    margin: 0;
    padding: 0;
}

.left {
    position: absolute;
    left: 0;
    top: 0;
    text-align: left;
    width: 100%;
}

.right {
    position: absolute;
    right: 0;
    bottom: 0;
    text-align: right;
    width: 100%;
}

#hitokoto_author {
    margin: 1.3rem;
    text-align: right;
    margin: 0;
    padding: 0;
}

/* #change, */
h3,
.box,
#hitokoto {
    box-shadow: -3px 5px 6px 1px #0000004a;
}

#say-link {
    color: white;
}

section {
      position: relative;
      width: 100%;
      height: 100vh;
      /*background: radial-gradient(#333, #000);*/
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    section h2 {
      color: #fff;
      font-size: 8em;
      text-transform: uppercase;
    }

    section .set {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      pointer-events: none;
    }

    section .set div {
      position: absolute;
      display: block;
    }

    section .set div:nth-child(1) {
      left: 20%;
      animation: animate 15s linear infinite;
      animation-delay: -7s;
    }

    section .set div:nth-child(2) {
      left: 50%;
      animation: animate 20s linear infinite;
      animation-delay: -5s;
    }

    section .set div:nth-child(3) {
      left: 70%;
      animation: animate 20s linear infinite;
      animation-delay: 0s;
    }

    section .set div:nth-child(4) {
      left: 0%;
      animation: animate 15s linear infinite;
      animation-delay: -5s;
    }

    section .set div:nth-child(5) {
      left: 85%;
      animation: animate 18s linear infinite;
      animation-delay: -10s;
    }

    section .set div:nth-child(6) {
      left: 0%;
      animation: animate 12s linear infinite;
    }

    section .set div:nth-child(7) {
      left: 15%;
      animation: animate 14s linear infinite;
    }

    section .set div:nth-child(8) {
      left: 60%;
      animation: animate 15s linear infinite;
    }

    @keyframes animate {
      0% {
        opacity: 0;
        top: -10%;
        transform: translateX(20px) rotate(0deg);
      }

      10% {
        opacity: 1;
      }

      20% {
        transform: translateX(-20px) rotate(45deg);
      }

      40% {
        transform: translateX(-20px) rotate(90deg);
      }

      60% {
        transform: translateX(20px) rotate(180deg);
      }

      80% {
        transform: translateX(-20px) rotate(180deg);
      }

      100% {
        top: 110%;
        transform: translateX(-20px) rotate(225deg);
      }
    }

    .set-2 {
      transform: scale(2) rotateY(180deg);
      filter: blur(2px);
    }

    .set-3 {
      transform: scale(0.8) rotateY(180deg);
      filter: blur(4px);
    }
    .set-4 {
      transform: scale(3) rotateY(180deg);
      filter: blur(6px);
    }
section div {
    z-index: 10;
}