// Import Bulma's core
@import "~bulma/sass/utilities/_all";

// Set your colors
$primary: #00d1b2;
$primary-invert: findColorInvert($primary);
$twitter: #4099FF;
$twitter-invert: findColorInvert($twitter);

// Setup $colors to use as bulma classes (e.g. 'is-twitter')
$colors: (
  "white": ($white, $black),
  "black": ($black, $white),
  "light": ($light, $light-invert),
  "dark": ($dark, $dark-invert),
  "primary": ($primary, $primary-invert),
  "info": ($info, $info-invert),
  "success": ($success, $success-invert),
  "warning": ($warning, $warning-invert),
  "danger": ($danger, $danger-invert),
  "twitter": ($twitter, $twitter-invert)
);

// background
$body-background-color: $light;

// Links
$link: $primary;
$link-invert: $primary-invert;
$link-focus-border: $primary;

// Footer
$footer-padding: 4rem 8rem 7rem;
$footer-background-color: $dark;
p.footer-link > a:hover {
    color: $light
}

// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";


.nuxt-link-exact-active {
  border-bottom: 2px solid $primary;
}

ul {
  @extend .list;
  @extend .is-hoverable;
}

li {
  @extend .list-item
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 2rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}