[un-cloak] {
    display: none;
}
html {
    scroll-padding-top: 100px;
}

@media screen and (max-width: 768px) {
    html {
        scroll-padding-top: 60px;
    }
}

.border-gradient {
    position: relative;
}

@keyframes scroll-down-bounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(10px);
    }
}

.scroll-down-icon {
    animation: scroll-down-bounce 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-down-icon {
        animation: none;
    }
}

.border-gradient::after {
    content: "";
    position: absolute;
    inset: 0px;
    padding: 2px;
    border-radius: inherit;

    background: linear-gradient(90deg, #0068DD 0%, #B177F3 50%, #FF7A3F 85%);

    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;

    pointer-events: none;
}

.border-gradient-default::after {
    content: "";
    position: absolute;
    inset: 0px;
    padding: 2px;
    border-radius: inherit;

    background: linear-gradient(140deg, #FAFAFB 10%, #B8CCFF 37%, #DDB1FF 59%);

    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;

    pointer-events: none;
}

#activity-info-content::after {
    content: "";
    position: absolute;
    inset: 0px;
    padding: 16px;
    border-radius: inherit;

    background: linear-gradient(180deg, #CAD9FC 0%, #FFFFFF 100%);

    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;

    pointer-events: none;
}

@media screen and (max-width: 1023px) {
    #activity-info-content::after {
        padding: 8px;
    }
}



#chat-content::after {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 16px;
    border-radius: inherit;

    background: linear-gradient(90deg, #FAFAFB 10%, #B8CCFF 37%, #DDB1FF 59%);
    filter: drop-shadow(0 0 65.211px rgba(76, 110, 230, 0.20));


    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;

    pointer-events: none;
}

@media screen and (max-width: 1023px) {
    #chat-content::after {
        padding: 8px 0px;
        background: linear-gradient(90deg, #FAFAFB 0%, #B8CCFF 50%, #DDB1FF 100%);
    }
}

#chat-content-card::after {
    content: "";
    position: absolute;
    inset: 0px;
    padding-top: 16px;
    border-radius: inherit;

    background: linear-gradient(90deg, #FAFAFB 10%, #B8CCFF 70%, #DDB1FF 100%);
    filter: drop-shadow(0 0 65.211px rgba(76, 110, 230, 0.20));


    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;

    pointer-events: none;
}

@media screen and (max-width: 1023px) {
    #chat-content-card::after {
        padding-top: 8px;
    }
}

#chat-content-card-msg::after,#FQA-content::after, #FQA-ask::after {
    content: "";
    position: absolute;
    inset: 0px;
    padding: 1px;
    border-radius: inherit;

    background: linear-gradient(90deg, #0068DD 0%, #B177F3 50%, #FF7A3F 85%);

    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;

    pointer-events: none;
}

@media screen and (max-width: 1023px) {
    #FQA-content::after, #FQA-ask::after, #chat-content-card-msg::after {
        padding: 1px;
    }
}

#login input:not([type="checkbox"])::after {
    content: "";
    position: absolute;
    inset: 0px;
    padding-bottom: 1px;
    border-radius: inherit;

    background: linear-gradient(90deg, #0068DD 0%, #B177F3 50%, #FF7A3F 85%);

    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;

    pointer-events: none;
}