style.scss

$brand-primary: #1d9ada;
$brand-secondary: darken(#00AB4F, 1%);
$body-bg: #fafafa;
$body-color: #212121;

$mdc-theme-primary: $brand-primary;
$mdc-theme-secondary: $brand-secondary;

@import "material-components-web/material-components-web";

@import "@material/theme/color-palette";

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

@import "bootstrap/scss/reboot";
@import "bootstrap/scss/grid";

$spacers: (
  0: 0,
  1: ($spacer * 0.125),
  2: ($spacer * 0.25),
  3: ($spacer * 0.5),
  4: ($spacer * 0.75),
  5: ($spacer * 1.5)
);

@import "bootstrap/scss/utilities/display";
@import "bootstrap/scss/utilities/flex";
@import "bootstrap/scss/utilities/spacing";

$main-gradient: linear-gradient(45deg, #2066ab, #328bc7, #45b0e6) right top/100% 100% no-repeat #2066ab;

a {
  color: $brand-primary;
  &:hover, &:focus {
    color: darken($brand-primary, 15%);
  }
  &:hover {
    text-decoration: underline;
  }
  &:active, &:hover, &:focus {
    outline: 0;
  }
}

.text-primary {
  color: $brand-primary;
}

.text-secondary {
  color: $brand-secondary;
}

svg {
  display: inline-block;
  font-size: inherit;
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
  width: 1em;
  fill: currentColor;
}

.scalingo-gradient {
  background: $main-gradient;
}

@import "css/header";
@import "css/page-content";
@import "css/syntax-highlighting";
@import "css/mdc-extensions";
@import "css/bootstrap-like-utilities";
@import "css/table";
@import "css/aside";
@import "css/drawer";
@import "css/footer";

hr {
  border: 0;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #ebebeb;
  @extend .my-3;
}