:root {
    --bs-font-sans-serif: "Figtree", sans-serif;
}

body {
    --bs-body-bg: #000;
    --bs-body-bg-rgb: 0, 0, 0;
    --bs-heading-color: var(--bs-emphasis-color);
    --bs-body-color: var(--bs-gray-600);
    --bs-primary: #86efac;
    --bs-primary-rgb: 134, 239, 172;
    --bs-link-color: var(--bs-gray-600);
    --bs-link-hover-color: var(--bs-gray-500);
    --bs-link-hover-color-rgb: 74, 222, 128;
    --bs-link-color-rgb: var(--bs-primary-rgb);
    background-image: url("data:image/svg+xml,%3Csvg style='filter: invert(1) brightness(.35)' xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='noise' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeBlend mode='screen'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23noise)' opacity='.25'/%3E%3C/svg%3E"), radial-gradient(rgb(17, 17, 20), rgb(0, 0, 0));
    background-repeat: repeat, no-repeat;
}

#hero::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url(https://vaulty.la/assets/images/hero.jpg);
    background-size: cover;
    background-position: 50% 50%;
    z-index: -1;
    mix-blend-mode: lighten;
    opacity: .25;

}

.accordion {
    --bs-accordion-btn-focus-box-shadow: '';
    --bs-accordion-active-color: #000;
    --bs-accordion-bg: transparent;
    --bs-accordion-active-bg: var(--bs-primary);
}

.accordion-item {
    border-color: var(--bs-dark);
    border-style: dotted;
}

.accordion-body p:last-child,
.accordion-body ul:last-child {
    margin-bottom: 0;
}

[data-bs-theme=dark] .accordion-button::after {
    --bs-accordion-btn-icon: url("data: image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24' %3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 4v16m-8-8h16' color='currentColor' /%3E%3C/svg%3E");
    --bs-accordion-btn-active-icon: url("data: image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M20 12H4' color='currentColor' /%3E%3C/svg%3E");
}

#rain {
    transform: rotate(180deg);
    mix-blend-mode: lighten;
    opacity: .75;
}

.tnum {
    font-feature-settings: "tnum";
}

.btn-special {
    position: relative;
}

.btn-special:hover {
    background-color: #22c55e !important;
}

.bg-dashboard::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(https://vaulty.la/assets/images/dashboard.webp);
    background-size: cover;
    background-position: 50% 42%;
    background-repeat: no-repeat;
    z-index: -1;
    opacity: .05;
    filter: contrast(1.75);
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.btn-special::before {
    --angle: 0deg;
    content: "";
    position: absolute;
    inset: 0;
    background-image: conic-gradient(from var(--angle), white, transparent, white, transparent, white);
    border-radius: 20rem;
    animation: circle 2s linear infinite;
    opacity: .5;
    mix-blend-mode: overlay;
}

@keyframes circle {
    0% {
        --angle: 0deg;
    }

    100% {
        --angle: 360deg;
    }
}

.bd-blur {
    backdrop-filter: blur(1rem);
}

.container-3xl {
    max-width: 96rem;
    margin-left: auto;
    margin-right: auto;
}

.text-content {
    text-align: justify;
}

@media (min-width: 768px) {
    .text-content {
        columns: 2;
        column-gap: 2rem;
    }
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bs-white);
    box-shadow: none;
    color: var(--bs-emphasis-color);
}

.btn,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
}

.tp-widget {
    background-image: url(https://vaulty.la/assets/images/trustpilot-dark.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 240px;
    height: 44px;
}

.bi-fix {
    vertical-align: -.25em;
}

.loader {
    display: none;
}

.loader.on>div {
    height: .125rem;
    width: 0%;
    position: absolute;
    animation: fill 2s ease-in-out infinite alternate;
    left: 0;
    right: auto;
}

@keyframes fill {
    0% {
        width: 0%;
        left: 0;
        right: auto;
    }

    50% {
        width: 100%;
    }

    100% {
        width: 0%;
        left: auto;
        right: 0;
    }

}

.loader.on {
    display: block;
    transition: all .25s;
}

@media (max-width: 767.98px) {
    #accountMenu {
        position: fixed;
        z-index: 10;
        width: calc(100vw - .75rem);
        max-width: 22rem;
        top: 0;
        bottom: 0;
        left: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    #accountMenu>* {
        overflow-y: auto;
    }

    #accountMenu::before {
        content: "";
        position: fixed;
        inset: 0;
        background-color: rgba(var(--bs-body-bg-rgb), .75);
        z-index: -1;
    }

    [x-cloak] {
        display: none !important;
    }
}

.notification {
    border-radius: .25rem;
    padding: .75em;
    font-size: .875rem;
    text-align: center;
    position: fixed;
    top: 5rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - .5rem);
    margin: 0 auto;
    max-width: 40rem;
    background-color: var(--bs-dark);
    border: 1px solid var(--bs-secondary);
    color: #fff;
}

.notification.error {
    border-color: var(--bs-danger);
}

.notification.success {
    border-color: var(--bs-success);
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(var(--content-width));
    }
}

.marquee::before {
    content: "";
    position: absolute;
    left: 0;
    top: .5rem;
    bottom: .5rem;
    width: 3.5rem;
    background-image: linear-gradient(90deg, rgba(10, 10, 10, 1), rgba(10, 10, 10, 0));
    z-index: 1;
    border-radius: .25rem;
}

.marquee::after {
    content: "";
    position: absolute;
    right: 0;
    top: .5rem;
    bottom: .5rem;
    width: 3.5rem;
    background-image: linear-gradient(90deg, rgba(10, 10, 10, 0), rgba(10, 10, 10, 1));
    z-index: 1;
    border-radius: .25rem;
}

.animate-marquee {
    animation: marquee 60s linear infinite;
}

.animate-marquee:hover {
    animation-play-state: paused;
}

.reversed .animate-marquee {
    animation-direction: reverse;
}

.animate-marquee button {
    transition: all .25s ease;
    opacity: 1;
}

.animate-marquee:hover button:not(:hover) {
    filter: grayscale(1) blur(.125rem);
    opacity: .25;
}

.animate-marquee:hover button:hover {
    transform: scale(1.125);
}

@media (max-width: 991.98px) {


    #hero img.miner {
        width: 100%;
        height: 100%;
        max-width: 16rem;
        max-height: 16rem;
    }

    #navbar {
        position: absolute;
        border-radius: .25rem;
        padding: .25rem 1rem;
        top: 2.75rem;
        right: 0;
        background-color: rgba(var(--bs-dark-rgb)) !important;
        z-index: 10;
    }
}