@import url(https://fonts.googleapis.com/css?family=Roboto:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic);

@import "./footer.css";

html,
body {
    height: 100%;
    background-color: rgb(7, 7, 7);

    font-family: "Roboto", sans-serif;

    color: ghostwhite;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scrollbar-color: rgba(255, 255, 255, 0.2) black;
}

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

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    transition: background 0.3s;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}



nav.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;

    .header-container {
        background-color: rgba(7, 7, 7, 0.4);
        backdrop-filter: blur(24px);

    }

    .glass-effect {
        width: 100%;
        height: 2px;

        background-color: rgba(7, 7, 7, 0.4);
        backdrop-filter: blur(24px) brightness(200%);
    }

    ul {
        display: flex;
        justify-content: center;
        gap: 1rem;

        list-style-type: none;
        padding: 14px 8px;
        margin: 0 auto;

        div {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        li {
            padding: 0;
            font-weight: 300;

            a {
                text-decoration: none;
                cursor: pointer;
                transition: 0.2s;
            }

            a:hover {
                color: #3B67CE;
            }
        }

        li.logo {
            font-weight: 500;
            font-size: 1.25rem;
            padding-right: 8px;
        }

        li.download {
            display: none;
        }

        li.demo {
            display: none;
        }

        a[aria-disabled="true"] {
            opacity: 0.6;
            cursor: unset;
            pointer-events: none;
        }


        li.download a {
            display: block;
            background-color: ghostwhite;
            color: black;
            font-weight: 400;
            padding: 6px 8px;
            border-radius: 6px;
        }
    }
}

.reveal,
[data-reveal],
[data-reveal-item] {
    --reveal-duration: 600ms;
    --reveal-ease: cubic-bezier(0.2, 0.65, 0, 1);
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    will-change: opacity, transform;
}

.reveal.in-transition,
[data-reveal].in-transition,
[data-reveal-item].in-transition {
    transition:
        opacity var(--reveal-duration) var(--reveal-ease) var(--reveal-delay),
        transform var(--reveal-duration) var(--reveal-ease) var(--reveal-delay) !important;

}

.reveal.is-visible,
[data-reveal].is-visible,
[data-reveal-item].is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}


@media screen and (min-width: 640px) {
    nav.header {
        ul {
            padding: 12px 16px;

            justify-content: space-between;

            li.download {
                display: block;
            }

            li.demo {
                display: block;
            }

        }
    }
}

@media screen and (min-width: 768px) {
    nav.header {
        ul {
            padding: 16px 24px;

            div {
                gap: 1.5rem;
            }
        }
    }

}

@media screen and (min-width: 1024px) {
    nav.header {
        ul {
            padding: 16px 32px;

            justify-content: space-between;

            div {
                gap: 2rem;
            }

            li.download {
                display: block;
            }

            li.demo {
                display: block;
            }

        }
    }

}

@media screen and (min-width: 1280px) {}