/* body {
    background: linear-gradient(to right, #ffffff, #fff3cd);
    overflow-x: hidden;

} */

.card{
    --bs-card-bg: transparent;
}

.color-button {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

.form-control {
    background-color: transparent;
}

#box{
    overflow: hidden;
}

.border-top{
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right,#171618,#fcc23f);
    animation: animate-border-top 2s linear infinite;
}

@keyframes animate-border-top {
    0%{
        transform: translateX(-100%);
    }
    100%{
        transform: translateX(100%);
    }
}


.content {
    position: relative;
    width: 100%;
    height: 200px;
}

.content h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 8em;
    font-family: fantasy;
    width: 100%;
}

#wechat_frame {
    max-width: 800px;
    height: 1000px;
}

@media (max-width: 768px) {
    .content h2 {
        font-size: 4em;
    }
    .content {
        height: 100px;
    }
    #wechat_frame {
        height: 450px;
    }
}

.content h2:nth-child(1) {
    color: transparent;
    -webkit-text-stroke: 2px #03a9f4;
}

.content h2:nth-child(2) {
    color: #03a9f4;
    animation: animate 4s ease-in-out infinite;
}

@keyframes animate {
    0%, 100% {
        clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
    }
    50% {
        clip-path: polygon(0% 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 36%, 100% 32%, 100% 100%, 0% 100%);
    }
}

.dj-content{
    flex-wrap: wrap;
    display: flex;
    gap: 3px;
    justify-content: center;
}

.dj-content .badge {
    overflow: hidden;
    text-overflow: ellipsis;
}