@font-face {
    font-family: 'ginto-normal';
    font-style: normal;
    font-weight: normal;
    src: local('ABC Ginto Nord Unlicensed Trial Regular'), url('../assets/ginto-webfont/ABCGintoNormal-Regular-Trial-BF651b7b7846685.woff') format('woff');
}

@font-face {
    font-family: 'ginto-fat';
    src: local('ABC Ginto Nord Unlicensed Trial Regular'), url('../assets/ginto-webfont/ABCGintoNord-Black-Trial-BF651b7b7719b0f.woff') format('woff');
}


html {
    --blurple: #5865F2;

    body {

        position: relative;
        background: url('https://cdn.prod.website-files.com/6257adef93867e50d84d30e2/673df7fbe95a8e90a7571751_D-bg.png') no-repeat;
        background-size: cover;
        font-family: 'ginto-normal';
        color: white;
        width: 100%;
        min-width: 320px;

        &::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('../assets/galaxy.gif') no-repeat center center / cover;
            opacity: 0.2;
            pointer-events: none;
            z-index: -1;
        }

        .offcanvas ul {
            font-weight: bold;

            a.nav-link {
                width: min-content;
                color: whitesmoke;
                font-size: 16px;
                border-radius: 18px;

                &:hover,
                &:focus {
                    color: var(--blurple);
                }

                &.dropdown-toggle {
                    &:focus {
                        color: white;
                        border-radius: 18px;
                        background-color: var(--blurple);
                    }
                }
            }

            &.dropdown-menu.show {
                background-color: var(--blurple);
                overflow: hidden;
                border-radius: 32px;
                top: 54px;
                padding: 18px;

                li a {
                    color: white;
                    width: min-content;

                    &:hover {
                        color: black;
                        border-radius: 18px;
                    }
                }
            }
        }

        nav {
            background-color: transparent;

            &#mainNavbar {

                &.bg-blurple {
                    background: linear-gradient(149deg, #35386a70, rgba(0, 0, 0, 0.575) 100%);
                    backdrop-filter: blur(50px);

                    a.nav-link:hover,
                    a.nav-link:focus {
                        color: white;
                        text-shadow: 0 0 8px black;
                    }
                }

                transition: background-color 0.2s ease;
            }

            a.navbar-brand {
                min-width: 120px;
            }

            button.navbar-toggler {
                border: none;

                &:focus {
                    box-shadow: none;
                }

                .navbar-toggler-icon {
                    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
                }
            }

            #login-btn {
                color: black;
                font-weight: bold;
                background-color: white;
                border: none;
                border-radius: 16px;
                text-wrap: nowrap;

                &:hover,
                &:focus {
                    background-color: #38409b;
                    color: white;
                }
            }
        }

        .main {
            width: 80%;
            margin: 12px auto;
            margin-bottom: 10rem;


            #clyde-gif {
                position: absolute;
                height: 4rem;
                width: auto;
                top: 500px;
                right: 700px;
                z-index: 1;
            }

            #hero {
                position: relative;
            }


            #open-btn {
                background-color: var(--blurple);
                color: white;
                border: none;

                &:hover,
                &:focus {
                    background-color: #3a46c7
                }
            }
        }

        #card {
            margin-top: 120px;
            padding: 2rem;

            #card-text {
                padding: 28px;
                align-items: center;
            }

            @media (max-width: 990px) {
                #card-text {
                    text-align: center;
                }
            }

            .display-4 {
                font-size: max(calc(8vw / 4), 1.2rem);

                &+.lead {
                    font-size: max(calc(4vw / 3), 1rem);
                }

            }

            backdrop-filter: blur(10px);
            background: rgba(142, 150, 236, 0.048);
            background: linear-gradient(149deg, rgba(145, 154, 255, 0.274) 0%, rgba(88, 95, 194, 0.253) 100%);
            border-radius: 8rem;

            video {
                height: min-content;
                border-radius: 6.4rem;

            }
        }

        .marquee-wrapper {
            position: relative;
            white-space: nowrap;
            background: rgb(77, 86, 180);
            background: radial-gradient(circle, rgba(77, 86, 180, 1) 9%, rgba(39, 44, 96, 1) 100%);
            height: 120px;

            margin: 6rem 0;

            .marquee {
                animation: scroll-left 30s linear infinite;

                .marquee-content span {
                    font-weight: bold;
                    font-size: 4rem;
                    font-family: 'ginto-fat';
                    text-transform: uppercase;
                }
            }
        }

        footer {

            /* background-color: var(--blurple); */
            background-image: url('../assets/footer-bg.png');
            background-size: cover;
            color: #fff;
            padding: 2rem 1rem;
            width: 100%;

            .container {
                width: 100%;
                padding: 0;
            }


            .footer-title {
                cursor: pointer;
            }

            .footer-link {
                color: #adb5bd;
                text-decoration: none;
            }

            .footer-link:hover {
                text-decoration: underline;
            }

            #symbol {
                width: 58px;
                height: auto;
            }

            ul.dropdown-menu {
                background: linear-gradient(149deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
                border-radius: 24px;
                padding: 12px;
                backdrop-filter: blur(100px);
                border: none;
                font-size: large;

                li {
                    margin-bottom: 8px;
                }

                a:hover {
                    background-color: transparent;
                    cursor: pointer;
                }
            }

            button#language-btn {
                background: #ffffff1a;
                border: none;
                border-radius: 16px;
                color: white;
                font-size: large;

                padding: 14px 28px;
                min-width: 200px;
            }

            .social-icons {

                gap: 28px;

                i {
                    font-size: 24px;
                }
            }

            .accordion {

                li {
                    margin-bottom: 14px;
                }

                a {
                    color: white;
                }

                p {
                    color: rgba(255, 255, 255, 0.653);
                }

                .accordion-button {
                    
                    &:not(.collapsed) {
                        box-shadow: none;
                    }

                    &:focus {
                        box-shadow: none;
                    }

                    &::after {
                        filter: brightness(0) invert(1);
                    }
                }

                .accordion-collapse {
                    padding-left: 8px;
                }

                h2 {
                    padding-bottom: 12px;
                }
            }


            @media (min-width: 768px) {
                .accordion-button {
                    display: none;
                }

                .collapse {
                    display: block !important;
                    height: auto !important;
                    visibility: visible;
                }
            }
        }

    }
}

#wumpus-hat,
#wumpus-standing {
    bottom: 5px ;
    width: 25%;
}

#wumpus-hat {
    bottom: 42%;
}

button {
    flex-wrap: nowrap;
    text-wrap: nowrap;
}


.display-4 {
    font-family: 'ginto-fat';
    color: white;
    font-size: max(calc(10vw / 4), 2rem);

    &+.lead {
        font-size: max(calc(5vw / 4), 1rem);
    }
}

@media (max-width: 490px) {
    #card {
        flex-direction: column;
        border-radius: 5rem;
        padding: 24px;
    }

    #card .display-4 {
        font-size: 1rem;
        text-align: center;
    }

    #card video {
        height: auto;
        width: 100%;
        border-radius: 4rem;
    }

    .marquee-wrapper {
        height: 80px;
    }

    .marquee-content span {
        font-size: 2rem;
    }

}

@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}