@use "bulma/sass/utilities/initial-variables.scss" with (
  $family-sans-serif: "Source Sans Pro,Roboto,Open Sans,Liberation Sans,DejaVu Sans,Verdana,Helvetica,Arial,sans-serif",
);
@use "bulma/sass/utilities/derived-variables.scss" with (
  $primary: rgb(216,222,233)
);
@use "bulma/sass/base" ;
@use "bulma/sass/themes";
@use "bulma/sass/elements/title.scss" with (
  $title-family: "'Noto Serif Display', serif",
  $title-weight: 300,
);
@use "bulma/sass/grid/columns.scss";
@use "bulma/sass/elements/button.scss";
@use "bulma/sass/elements/notification.scss";
@use "bulma/sass/elements/content.scss" with (
  $content-heading-weight: false,
);
@use "bulma/sass/helpers/typography.scss";
@use "bulma/sass/helpers/spacing.scss";
@use "bulma/sass/components/pagination.scss";

html[data-theme="dark"] {
  --main-text-color: #d8dee9;
  --main-background-color: #2e3440;
  --side-background-color: #222;
  --border-color: #4c566a;
  --link-color: #88c0d0;
  --link-hover-color: #d8dee9;
  --link2-color: #5e81ac;
  --link2-hover-color: #5e81ac;
  --button-background-color: #3b4252;
  --bulma-link-text: var(--link-color);
}

html[data-theme="light"] {
  --main-text-color: #2e3440;
  --main-background-color: #fff;
  --side-background-color: #2e3440;
  --border-color: #eee;
  --link-color: #5e81ac;
  --link2-color: #5e81ac;
  --link-hover-color: #5e81ac;
  --link2-hover-color: #5e81ac;
  --button-background-color: #eceff4;
  --bulma-link-text: var(--link-color);
}
body {
 background-color: var(--main-background-color);
}

main {
 font-size: 1.5em;
 font-weight: 300;
}

main article header p{
 font-weight: lighter;
}

.aside {
 background-color: var(--side-background-color);
 --bulma-link-text: #eceff4;
 --bulma-text: #eceff4;
 min-height: 100vh;
}

.aside .title, .aside .subtitle {
 --bulma-title-family: var(--bulma-family-primary);
 font-weight: 300;
}

.aside span.amp {
   font-family:Baskerville,"Goudy Old Style","Palatino","Book Antiqua",serif;
   font-size:110%;
   font-style:italic;
}

.aside ul {
 margin: 0;
 list-style-type: none;
}

.content .section {
    padding: unset;
}

.admonition { @extend .notification; }
.note       { @extend .is-primary, .is-light; }
.danger     { @extend .is-danger, .is-light }
.warning    { @extend .is-warning, .is-light }
.hint       { @extend .is-info, .is-light }

h1 { @extend .title, .is-1 }
h2 { @extend .title, .is-2 }
h3 { @extend .title, .is-3 }