@charset "utf-8";

// Customization

// You can easily customize Bulma with your own variables.
// Just uncomment the following block to see the result.

/*
// 1. Import the initial variables
@import "../node_modules/bulma/sass/utilities/initial-variables";

// 2. Set your own initial variables
// Update the blue shade, used for links
$blue: #06bcef;
// Add pink and its invert
$pink: #ff8080;
$pink-invert: #fff;
// Update the sans-serif font family
$family-sans-serif: "Helvetica", "Arial", sans-serif;

// 3. Set the derived variables
// Use the new pink as the primary color
$primary: $pink;
$primary-invert: $pink-invert;

// 4. Import the rest of Bulma
*/

$primary: #0ACF00;
$button-text-color: #FFF !important;
$button-border-color: #000 !important;
$button-hover-border-color: #000 !important;

@import "../node_modules/bulma/bulma";
@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
@import "../node_modules/@fortawesome/fontawesome-free/scss/regular";
@import "../node_modules/@fortawesome/fontawesome-free/scss/solid";
@import "../node_modules/@fortawesome/fontawesome-free/scss/brands";

.navbar-item > .logo
{
  max-height: none;
}


// Navigation

#navigation li.s.off
{
  display: none;
}
#navigation li.s > a.selected,
#navigation li.s > a.leaf,
#navigation li.s > strong.selected,
#navigation li.s > strong.leaf
{
  @extend .button;
  @extend .is-primary;
  @extend .is-rounded;
  @extend .has-text-weight-bold;
  @extend .mb-3;
}
#navigation li.s > a.leaf,
#navigation li.s > strong.leaf
{
  color: #ccc;
  background-color: #fff;
}
#navigation li.s > a.selected:after,
#navigation li.s > a.leaf:after,
#navigation li.s > strong.selected:after,
#navigation li.s > strong.leaf:after
{
  content: "\f0a8";
  padding-left: .5em;
  margin-right: -.5em;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 2em;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}
#navigation li.s > a.leaf:after,
#navigation li.s > strong.leaf:after
{
  color: #fff;
}
#navigation li.s.sub > a.selected:after,
#navigation li.s.sub > a.selected:after,
#navigation li.s.sub > strong.leaf:after,
#navigation li.s.sub > strong.leaf:after
{
  content: "\f0ab";
}


html
{
  height: 100%;
}
body
{
  height: 100%;
  display: flex;
  flex-direction: column;
}
#page
{
  flex: 1 0 auto;
  display: flex;
}
footer
{
  flex-shrink: 0;
}
main {
  flex-grow: 1;
}
nav {
  flex-grow: 1;
}