$navbar-background-color: #000; $navbar-item-color: eee; $navbar-item-hover-color: #000;

@import “bulma”;

body {

>nav {
    @extend .navbar;

    li {
        display: flex;

        * {
            @extend .navbar-item;
            display: flex;
            width: 100%;
        }

        // For some reason these need overridden on GitHub Pages; I think
        // it's an issue with whatever SASS compiler it uses.
        * {
            * {
                padding: 0px;
            }
        }

        *:hover {
            * {
                color: $navbar-item-hover-color;
            }
        }
    }

    .navbar-menu {
        @extend .is-active;
    }

    .navbar-brand {
        font-weight: bolder;

        li {
            @extend .title;
            margin: 0px !important;
            padding-top: 0px;
            padding-bottom: 0px;
        }

        img {
            max-height: 48px;
        }
    }
}

>header, >main, >footer {
    @extend .section;
}

>header {
    h1 {
        @extend .title;
        @extend .is-1;
    }

    p {
        @extend .subtitle;
        @extend .is-3;
    }
}

>footer {
    @extend .content;
}

}

.cards {

@extend .columns;
@extend .is-multiline;
@extend .is-8;

> * {
    @extend .column;
    @extend .is-half-tablet;
    @extend .is-one-third-desktop;
    @extend .is-one-quarter-widescreen;
    @extend .is-one-fifth-fullhd;
    @extend .card;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: calc(#{$gap} / 2);

    @media (min-width: $tablet) {
        width: calc(50% - #{$gap});
    }

    @media (min-width: $desktop) {
        width: calc(33.3333% - #{$gap});
    }

    @media (min-width: $widescreen) {
        width: calc(25% - #{$gap});
    }

    @media (min-width: $fullhd) {
        width: calc(20% - #{$gap});
    }

    >header {
        flex: 1;
        @extend .card-content;

        >h2 {
            @extend .title;
            @extend .is-full;

            >.tag {
                position: absolute;
                top: 0.5em;
                right: 0.5em;
            }
        }

        >p {
            @extend .subtitle;
        }
    }

    >section {
        @extend .card-content;
        @extend .py-0;
        @extend .my-0;
        @extend .level;
        @extend .is-mobile;
        flex: none;
        align-items: first baseline;

        >* {
            @extend .level-right;
            @extend .my-0;
            vertical-align: top;
            flex-shrink: 1;

            * {
                text-align: right;
            }
        }

        >h3 {
            @extend .level-left;
            @extend .title;
            @extend .is-6;
            @extend .my-0;
            @extend .mr-2;
            flex-shrink: 0;
        }
    }

    >footer {
        @extend .card-footer;
        flex: none;

        >* {
            @extend .card-footer-item;
        }
    }
}

}

.has-addons {

flex-wrap: wrap;

.help {
    flex-basis: 100%;
}

}

.feather-icon {

@extend .icon;
margin-right: 0 !important;

>svg {
    width: 1em;
    height: 1em;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

}

.tile {

flex-grow: 0;

}

.tile.is-main {

flex-grow: 1;

}

.help {

border-radius: 4px;
padding: calc(0.5em - 1px) 1em calc(0.5em - 1px) 1em;

}

.help.is-warning {

color: #000000;
background-color: #ffdd57;
border-radius: 4px;

}

.help.is-danger {

color: #ffffff;
background-color: #f14668;
border-radius: 4px;

}