:root {
    --ddblue: #131316;
    /* --dblue: #1d1d20; */
    --dblue: #1a1a1c;
    /* --lblue: #26262b; */
    --lblue: #232326;
    --white: #f9faff;
    --purple: #583bc3;
    --purple-light: #6c52cb;
    --purple_d: #4a32a6;
    --purple_dd: #3d298a;
    --mutedtext: #9ba9b4;
    --muteddark: #70777e;
    --danger: #e71935;
    --danger_d: #d1142d;
    --danger_dd: #b1172c;
    --danger_text: #b84141;
    --success: #4caf50;
    --success_d: #449c46;
    --success_dd: #3b883e;
    --success: #52b362;
    --success_d: #45a15f;
    --success_dd: #3b8f4e;
    --secondary: #626b72;
    --secondary_d: #586066;
    --secondary_dd: #4e555a;
}

::selection {
    background: rgba(109, 163, 244, 0.32);
}

::-webkit-scrollbar {
    width: 7.5px;
}

::-webkit-scrollbar-track {
    background: var(--dblue);
}
::-webkit-scrollbar-thumb {
    background: #6c6e76;
    border-right: 1px solid var(--dblue);
}
::-webkit-scrollbar-thumb:hover {
    background: #5a5c63;
}

* {
    box-sizing: border-box;
    border: 0;
    outline: none;
}

html {
    font-family: "Heebo", sans-serif;
    line-height: 1.5;
}

body {
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    color: var(--white);
    background: var(--ddblue);
    scrollbar-color: #6c6e76 var(--dblue);
    scrollbar-width: thin;
    touch-action: manipulation;
    height: 100%;
    width: 100%;
    min-height: 100vh;
}

main {
    background: var(--dblue);
    padding: 40px;
    border-radius: 0.375rem;
    min-height: 600px;
    margin-top: -150px;
    box-shadow: 0px 4px 10px #0000007a;
}

.container {
    max-width: 1276px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 40px;
    padding-right: 40px;
}

p {
    font-weight: 400;
    color: var(--mutedtext);
    margin: 0;
    padding: 5px 0 5px;
    font-size: 1rem;
}
p.small {
    font-weight: 400;
    color: var(--mutedtext);
    margin: 0;
    padding: 0 0 10px;
    font-size: 14px;
}
h4.title {
    font-weight: 600;
    font-size: 18px;
    color: var(--mutedtext);
    margin: 0;
}

h3 {
    font-size: 25px;
    line-height: 30px;
    margin-bottom: 12px;
}
a {
    color: var(--white);
    text-decoration: none;
}
a:hover {
    color: var(--white);
    text-decoration: none;
}

.onload:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: #583bc3;
    z-index: 5;
    pointer-events: none;
    animation: callbackFade 1.3s forwards;
}
@keyframes callbackFade {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.anim {
    transition-property:
        background-color,
        border-color,
        color,
        fill,
        stroke,
        opacity,
        box-shadow,
        transform,
        filter,
        backdrop-filter,
        -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 0.15s;
}
.container .hero {
    width: 100%;
    margin: 0 auto;
    padding-bottom: 4rem;
    text-align: center;
}

.intro h1 {
    font-size: 3.25rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    margin-top: 0;
    font-weight: 700;
    clear: both;
    color: var(--white);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

h2 {
    margin-bottom: 0;
}

@media (max-width: 1440px) {
    .container {
        max-width: calc(100% - 20px);
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    main.container {
        padding-top: 20px;
    }
}

body:has(.modal-mask),
body:has(.modal-overlay) {
    overflow-y: hidden;
    position: relative;
}

@media only screen and (max-width: 767px) {
    .intro h1 {
        font-size: 1.7rem;
    }
    .menu-open {
        overflow-y: hidden;
        position: relative;
    }

    h2 {
        margin-bottom: 12px;
        font-size: 1.5rem;
        line-height: 1;
        letter-spacing: -0.02em;
    }
    h3 {
        font-size: 1.3rem;
        line-height: 26px;
        margin-bottom: 12px;
    }
    p {
        margin-bottom: 1rem;
        font-size: 1rem;
    }
}
em-emoji-picker {
    --rgb-accent: 88, 59, 195;
    --rgb-background: 19, 19, 22;
    --rgb-color: 255, 255, 255;
    --rgb-input: 29, 29, 32;
}
.dropdown-item {
    display: flex;
    padding: 8px 18px;
    gap: 10px;
    align-items: center;
    margin-top: 0 !important;
    font-size: 14px;
}

.dropdown-item:hover {
    background: var(--dblue);
    cursor: pointer;
}

.discord-embed-description > .discord-markdown {
    width: 100%;
}