// numbers
$golden: 1.618;

// colors
$primary: #1c6ba0;
$link: $primary;

// fonts
$family-primary: 'Open Sans', Arial, sans-serif;

@import 'bulma/bulma';

html,
body {
  background-color: darken($white, 2.5);
}

// sticky footer
html,
body,
.app {
  height: 100%;
}
.app {
  display: flex;
  flex-direction: column;
}
.main {
  flex: 1 0 auto;
}

.navbar {
  background-color: darken($white, 7.5);
  font-size: (14/16) * 1rem;
}
.navbar-item {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
a.navbar-item:focus,
a.navbar-item:focus-within,
a.navbar-item:hover,
a.navbar-item.is-active,
.navbar-link:focus,
.navbar-link:focus-within,
.navbar-link:hover,
.navbar-link.is-active {
  background-color: darken($white, 2.5);
}
.x-footer {
  flex-shrink: 0;
}
.x-footer {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: darken($white, 7.5);
  p {
    font-size: (12/16) * 1rem;
    line-height: 2rem;
  }
  .column.x-l {
    text-align: center;
  }
  .column.x-r {
    text-align: center;
  }
  @include tablet {
    .column.x-l {
      text-align: left;
    }
    .column.x-r {
      text-align: right;
    }
  }
}
.hero.is-fullheight.signin {
  background-color: darken($white, 2.5);
  min-height: calc(100vh - 4rem);
}
.button.continue {
  width: 100%;
}
.signin-info p {
  font-size: (14/16) * 1rem;
}
.signin {
  // .content {
  //   margin-top: -0.5rem;
  //   margin-bottom: 1rem;
  // }
  .box {
    padding-right: $golden * 1rem;
    padding-bottom: 2rem;
    padding-left: $golden * 1rem;
  }
  .column {
    // @media screen and (min-width: 600px) {
    max-width: 26rem;
    // }
  }
}
[v-cloak] {
  @extend .is-hidden;
}