:root {
    --navbar-brand-bg-light: linear-gradient(90deg, #ff6801, #ffb347);
    --navbar-brand-bg-dark: linear-gradient(90deg, #333, #555);
    --card-bg-light: #f5f5f5;
    --card-bg-dark: #272727;
}

:root, [data-theme="light"], [data-theme="dark"] {
    transition: background-color 0.5s ease, color 0.5s ease;
}

.theme-light,[data-theme=light] {
    --bulma-link-text: orange;
    --nav-bar-text-color: #fff;
    --icon-color: #fff;
    --footer-text-color: #000;

}

.theme-dark,[data-theme=dark] {
    --bulma-link-text: #2759a5;
    --icon-color: #fff;
    --footer-text-color: orange;
}

.navbar-brand {
    border-radius: 0.625rem;
}

.navbar-center a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

html, body {
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    font-family: Arial, sans-serif;
}

.footer {
    margin-top: 40px
}

.body-container {
    width: 85%;
    margin: 0 auto;
    flex: 1;
}
#theme-switcher {
    width: 100px;
  }

#theme-switcher svg {
    width: 2rem;
    height: 2rem;
  }

.header_link {
    color: inherit;
    text-decoration: none;
}
.header_link:hover {
    color: var(--bulma-link-text);
}

.header_text_color {
    color: var(--nav-bar-text-color);
}

.league_title {
    color: var(--footer-text-color);
}
.league_title:hover {
    color: var(--bulma-link-text);
    transition: color 0.5s ease;
}

.card .clickable-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    text-decoration: none;
    background: transparent;
}
.card:hover .card-content .hover-p {
    color: var(--bulma-link-text);
}
.card:hover .card-content .hover {
    color: var(--bulma-link-text);
}
.card-content .hover-p {
    margin-top: 15px;;
}
.footer-text-color{
    color: var(--footer-text-color);
}
.icon-color {
    color: var(--icon-color);
}

.icon-color:hover {
    color: #2759a5;
}

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

    .navbar-center {
        display: flex;
        align-items: stretch;
        flex-grow: 1;
        flex-shrink: 0;
        flex-direction: row;
        border-radius: 0.625rem;
    }

    .navbar-link, .navbar-item {
        align-items: center;
        display: flex;
        flex-basis: auto;
        flex-grow: 1;
        flex-shrink: 0;
        justify-content: center;
    }

    .navbar-dropdown .navbar-item {
        justify-content: left;
    }

    .navbar-center a {
        transition: background-color 0.5s;
    }

    .navbar-center a:hover {
        background-color: rgba(255, 255, 255, 0.2);
        color: #2759a5
    }


    .navbar-center, .border {
        border-left: 1px solid #fff;
    }

    .navbar-center, .border:first-child {
        border-left: none;
    }

    .navbar-dropdown {
        border-top: 0;
    }
}


@media screen and (min-width: 1024px) {
    .navbar-center > .navbar-item:first-child .navbar-link {
        border-top-left-radius: 0.625rem;
        border-bottom-left-radius: 0.625rem;
    }
    .navbar-center > .navbar-item:last-child .navbar-link,
    .navbar-center > a.navbar-item:last-child {
        border-top-right-radius: 0.625rem;
        border-bottom-right-radius: 0.625rem;
    }
}


/* @media only screen and (max-width: 1024px) {
    .navbar-item {
        &.has-dropdown {
            .navbar-dropdown {
                display: none;
            }

            &:hover {
                .navbar-dropdown {
                    display: block !important;
                }
            }
        }
    }
} */


.level {
    flex-direction: row;
  }


  .footer.light-theme a.link {
    color: #fff; /* Bulma primary */
  }
  .footer.light-theme a.link:hover {
    color: #2759a5;
  }

  /* Dark theme background and link color */
  .footer.dark-theme {
    background-color: #2b2b2b;
  }
  

  @media (max-width: 1024px) {
    .navbar-item.has-dropdown .navbar-dropdown {
        display: none;
    }
    .navbar-item.has-dropdown.is-active .navbar-dropdown {
        display: block;
    }
}