@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');

:root {
    --pastel-pink: #ffc2d1;
    --pastel-purple: #dcb5ff;
    --pastel-cyan: #b3e0ff;
    --pastel-sun: #fffab3;
    --text-color: #333;
    --black: #000;
    --white: #fff;
    --dark-gray: #00000044;
    --light-gray: #aaa;
    --font-family-body: 'IBM Plex Mono', monospace;
    --font-family-header: 'Press Start 2P', cursive;
}

body {
    background-color: var(--pastel-purple);
    background-image: linear-gradient(to bottom, var(--pastel-purple), var(--pastel-pink), var(--pastel-sun));
    background-attachment: fixed;
    /* keeps it static relative to viewport */
    background-size: 100% 100vh;
    /* make it fit the viewport height */
    background-repeat: no-repeat;
    color: var(--text-color);
    font-family: var(--font-family-body);
}

.navbar {
    background-color: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(5px);
    font-family: var(--font-family-header);
    border-bottom: 0.2rem solid var(--pastel-cyan);
}

.navbar-brand,
.nav-link {
    color: var(--pastel-pink) !important;
    text-shadow: 0.1rem 0.1rem 0px var(--pastel-cyan);
}

.card {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    border: 0.2rem solid var(--pastel-cyan);
    border-radius: 0.5rem;
}

.card-header {
    font-family: var(--font-family-header);
    color: var(--pastel-pink);
    text-shadow: 0rem 0rem 0px var(--dark-gray);
}

.card-title {
    font-family: var(--font-family-header);
    color: var(--pastel-purple);
    text-shadow: 0.1rem 0.1rem 0px var(--pastel-cyan);
}

.btn-primary {
    background-color: var(--pastel-cyan);
    border-color: var(--pastel-cyan);
    color: #fff;
    font-family: var(--font-family-header);
    font-size: 0.8rem;
    text-shadow: 0.1rem 0.1rem 0px var(--dark-gray);
}


.nav-pills .nav-link {
    font-family: var(--font-family-header);
    text-shadow: 0.1rem 0.1rem 0px var(--dark-gray);
}

.nav-pills .nav-link.active,
.nav-pills .nav-link:hover {
    background-color: var(--pastel-cyan);
    border-color: var(--pastel-cyan);
    color: #fff;
}

.btn-primary:hover {
    background-color: var(--pastel-pink);
    border-color: var(--pastel-pink);
    text-shadow: 0.1rem 0.1rem 0px var(--dark-gray);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-header);
}

a {
    color: var(--pastel-purple);
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    color: var(--pastel-pink);
}

hr {
    border: none;
    height: 0.3rem;
    background-color: var(--pastel-cyan);
    box-shadow: 0.1rem 0.1rem 0px var(--dark-gray);
}

.card-footer {
    border-top: 1px solid var(--pastel-cyan);
}

footer.bg-dark {
    background-color: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(5px);
    border-top: 0.2rem solid var(--pastel-cyan);
}

footer.bg-dark .text-white {
    font-family: var(--font-family-header);
    color: var(--pastel-pink) !important;
    text-shadow: 0.1rem 0.1rem 0px var(--dark-gray);
}

.list-group-item {
    font-family: var(--font-family-header);
    font-size: 0.7rem;
    text-shadow: 0.05rem 0.05rem 0px var(--pastel-cyan);
    border-radius: 0;
}

.list-group-item.active {
    background-color: var(--pastel-sun);
    border-color: var(--pastel-pink);
    border-radius: 0;
}

.quote-text {
    font-size: 0.8rem;
    text-shadow: 0.05rem 0.05rem 0px var(--dark-gray);
}

/* Text handling for colours */
.text-purple {
    color: var(--pastel-purple);
}

/* Text handling for colours */
.text-blue {
    color: var(--pastel-cyan);
}

/* Text handling for colours */
.text-pink {
    color: var(--pastel-pink);
}

/* Text handling for colours */
.text-yellow {
    color: var(--pastel-sun);
}

/* Text handling for shadows */
.text-shadow {
    text-shadow: 0.1rem 0.1rem 0px var(--dark-gray);
}

.profile-picture {
    border-color: var(--pastel-purple);
    border-width: 0.2rem;
    border-style: solid;
    box-shadow: 0.1rem 0.1rem 0px var(--dark-gray);
}

/* D&D stat shit */
.stat-bubble {
    width: 5rem;
    height: 5.75rem;
    border-radius: 20%;
    background-color: rgba(255, 255, 255, 0.7);
    border-color: var(--pastel-pink);
    border-width: 0.2rem;
    border-style: solid;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px;
    box-shadow: 0.1rem 0.1rem 0px var(--pastel-cyan);
    transition: transform 0.2s;
}

.stat-bubble:hover {
    transform: scale(1.1);
    /* subtle hover effect */
}

.stat-name {
    font-family: var(--font-family-header);
    font-weight: bold;
    font-size: 0.8rem;
}

.stat-mod {
    font-family: var(--font-family-header);
    font-size: 1.3rem;
    color: var(--pastel-purple);
    text-shadow: 0.1rem 0.1rem 0px var(--pastel-cyan);
}

.stat-value {
    font-family: var(--font-family-header);
    font-weight: bold;
    font-size: 0.9rem;
    text-shadow: 0.1rem 0.1rem 0px var(--dark-gray);
}

/* profile para */
.profile-indent {
    text-indent: 2.5rem;
}

ul.hooks li::marker {
    content: "★ ";
    font-size: 1rem;
}

.text-ele {
    color: rgb(246, 138, 135);
}

.text-mes {
    color: rgb(182, 121, 213);
}

.text-necro {
    color: rgb(82, 167, 111);
}

.text-thief {
    color: rgb(192, 143, 149);
}

.text-ranger {
    color: rgb(140, 220, 130);
}

.text-engi {
    color: rgb(208, 156, 89);
}

.text-guard {
    color: rgb(114, 193, 217);
}

.text-rev {
    color: rgb(209, 110, 90);
}

.text-war {
    color: rgb(255, 209, 102);
}

.rainbow {
    background: linear-gradient(113deg, #cc0000, #cc6600, #cccc00, #66cc00, #00cc00, #00cc66, #00cccc, #0066cc, #0000cc, #6600cc, #cc00cc, #cc0066, #cc0000);
    /* #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3, #ff2400 */
    background-size: 580% 580%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: rainbow 12s linear infinite;
    -z-animation: rainbow 12s linear infinite;
    -o-animation: rainbow 12s linear infinite;
    animation: rainbow 12s linear infinite;
}

@-webkit-keyframes rainbow {
    0% {
        background-position: 0% 82%
    }

    50% {
        background-position: 100% 19%
    }

    100% {
        background-position: 0% 82%
    }
}

@-moz-keyframes rainbow {
    0% {
        background-position: 0% 82%
    }

    50% {
        background-position: 100% 19%
    }

    100% {
        background-position: 0% 82%
    }
}

@-o-keyframes rainbow {
    0% {
        background-position: 0% 82%
    }

    50% {
        background-position: 100% 19%
    }

    100% {
        background-position: 0% 82%
    }
}

@keyframes rainbow {
    0% {
        background-position: 0% 82%
    }

    50% {
        background-position: 100% 19%
    }

    100% {
        background-position: 0% 82%
    }
}

.non-binary {
    background: linear-gradient(113deg, #FFF430, #FFFFFF, #9C59D1, #000000, #9C59D1, #FFFFFF, #FFF430);
    /* #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3, #ff2400 */
    background-size: 580% 580%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: rainbow 12s linear infinite;
    -z-animation: rainbow 12s linear infinite;
    -o-animation: rainbow 12s linear infinite;
    animation: rainbow 12s linear infinite;
}

@-webkit-keyframes rainbow {
    0% {
        background-position: 0% 82%
    }

    50% {
        background-position: 100% 19%
    }

    100% {
        background-position: 0% 82%
    }
}

@-moz-keyframes rainbow {
    0% {
        background-position: 0% 82%
    }

    50% {
        background-position: 100% 19%
    }

    100% {
        background-position: 0% 82%
    }
}

@-o-keyframes rainbow {
    0% {
        background-position: 0% 82%
    }

    50% {
        background-position: 100% 19%
    }

    100% {
        background-position: 0% 82%
    }
}

@keyframes rainbow {
    0% {
        background-position: 0% 82%
    }

    50% {
        background-position: 100% 19%
    }

    100% {
        background-position: 0% 82%
    }
}

/* stuff to keep old janky shit working */
.lesbian {
    background: linear-gradient(113deg, #8b3c69, #bb7fb3, #edd2e8, #d67171, #864646, #d67171, #edd2e8, #bb7fb3, #8b3c69);
    /* #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3, #ff2400 */
    background-size: 580% 580%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: rainbow 12s linear infinite;
    -z-animation: rainbow 12s linear infinite;
    -o-animation: rainbow 12s linear infinite;
    animation: rainbow 12s linear infinite;
}

@-webkit-keyframes rainbow {
    0% {
        background-position: 0% 82%
    }

    50% {
        background-position: 100% 19%
    }

    100% {
        background-position: 0% 82%
    }
}

@-moz-keyframes rainbow {
    0% {
        background-position: 0% 82%
    }

    50% {
        background-position: 100% 19%
    }

    100% {
        background-position: 0% 82%
    }
}

@-o-keyframes rainbow {
    0% {
        background-position: 0% 82%
    }

    50% {
        background-position: 100% 19%
    }

    100% {
        background-position: 0% 82%
    }
}

@keyframes rainbow {
    0% {
        background-position: 0% 82%
    }

    50% {
        background-position: 100% 19%
    }

    100% {
        background-position: 0% 82%
    }
}

.trans {
    background: linear-gradient(113deg, #74d7ec, #ffafc7, #fbf9f5, #ffafc7, #74d7ec);
    /* #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3, #ff2400 */
    background-size: 580% 580%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: rainbow 12s linear infinite;
    -z-animation: rainbow 12s linear infinite;
    -o-animation: rainbow 12s linear infinite;
    animation: rainbow 12s linear infinite;
}

@-webkit-keyframes rainbow {
    0% {
        background-position: 0% 82%
    }

    50% {
        background-position: 100% 19%
    }

    100% {
        background-position: 0% 82%
    }
}

@-moz-keyframes rainbow {
    0% {
        background-position: 0% 82%
    }

    50% {
        background-position: 100% 19%
    }

    100% {
        background-position: 0% 82%
    }
}

@-o-keyframes rainbow {
    0% {
        background-position: 0% 82%
    }

    50% {
        background-position: 100% 19%
    }

    100% {
        background-position: 0% 82%
    }
}

@keyframes rainbow {
    0% {
        background-position: 0% 82%
    }

    50% {
        background-position: 100% 19%
    }

    100% {
        background-position: 0% 82%
    }
}

.femboy {
    background: linear-gradient(113deg, #c90076, #6dd1ff, #c90076);
    /* #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3, #ff2400 */
    background-size: 580% 580%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: rainbow 12s linear infinite;
    -z-animation: rainbow 12s linear infinite;
    -o-animation: rainbow 12s linear infinite;
    animation: rainbow 12s linear infinite;
}

@-webkit-keyframes rainbow {
    0% {
        background-position: 0% 82%
    }

    50% {
        background-position: 100% 19%
    }

    100% {
        background-position: 0% 82%
    }
}

@-moz-keyframes rainbow {
    0% {
        background-position: 0% 82%
    }

    50% {
        background-position: 100% 19%
    }

    100% {
        background-position: 0% 82%
    }
}

@-o-keyframes rainbow {
    0% {
        background-position: 0% 82%
    }

    50% {
        background-position: 100% 19%
    }

    100% {
        background-position: 0% 82%
    }
}

@keyframes rainbow {
    0% {
        background-position: 0% 82%
    }

    50% {
        background-position: 100% 19%
    }

    100% {
        background-position: 0% 82%
    }
}