/*-- scss:defaults --*/

//Fonts
@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@100;300&display=swap');

$whiteblue:             #fcfefe;
$muted-black:           #595959;
$tangerine:             #F28500;
$scarlet:               #B32800;
$brewer-set1-blue:      #377EB8;
$blue-screen-o-death:   #0031b3;

// Base document colors
$body-bg:    $whiteblue;          // main page background
$sidebar-bg: $whiteblue;          // LHS contents background
$link-color: $brewer-set1-blue;

.csl-entry a {
  color: $muted-black;
}

// Other base document features
$toc-font-size: .7rem;


/*-- scss:rules --*/

h1, h2, h3, h4 {
  color: $scarlet;
}

// LHS sidebar
.sidebar-item-text{
  color: $scarlet;
  font-weight: bolder;
  font-size: 80%;
}

// wider line spacing in references

.references {
  line-height: 1.8;
}

// smaller spacing of block quotes
.blockquote{
  padding: .1rem 1.25rem;
  line-height: 1.4;
}

.header-section-number {
  color: $scarlet;
}

code {
    color: $blue-screen-o-death;
}

// callout boxes
.important-box {
  padding: 0.25em 1em 0.5em 3em;
  margin-top: 10px;
  margin-bottom: 10px;
  background: #e6f2ff 5px center/3em no-repeat;
  background-image: url("https://raw.githubusercontent.com/microsoft/fluentui-system-icons/086c7fdf41e88c8d18cf7edf6c42a471cf47b36f/assets/Important/SVG/ic_fluent_important_32_filled.svg");
  background-position: 0.6em 0.5em;
  background-size: 3% auto;
  border-radius: 10px;
  font-size: 1rem;
}

.important-box::before {
  content: "Important";
  font-weight: bolder;
  display: block;
  padding: 0.3em 0em 0em 0em;
  vertical-align: middle;
  font-size: 1.2rem;
}

.warning-box {
  padding: 0.25em 1em 0.5em 3em;
  margin-top: 10px;
  margin-bottom: 10px;
  background: #fbe9e7 5px center/3em no-repeat;
  background-image: url("https://raw.githubusercontent.com/microsoft/fluentui-system-icons/086c7fdf41e88c8d18cf7edf6c42a471cf47b36f/assets/Warning/SVG/ic_fluent_warning_32_filled.svg");
  background-position: 0.6em 0.5em;
  background-size: 3% auto;
  border-radius: 10px;
  font-size: 1rem;
}

.warning-box::before {
  content: "Warning";
  font-weight: bolder;
  display: block;
  padding: 0.3em 0em 0em 0em;
  vertical-align: middle;
  font-size: 1.2rem;
}

.note-box {
  padding: 0.25em 1em 0.5em 3em;
  margin-top: 10px;
  margin-bottom: 10px;
  background: #fff9e6 5px center/3em no-repeat;
  background-image: url("https://raw.githubusercontent.com/microsoft/fluentui-system-icons/086c7fdf41e88c8d18cf7edf6c42a471cf47b36f/assets/Comment/SVG/ic_fluent_comment_24_filled.svg");
  background-position: 0.6em 0.5em;
  background-size: 3% auto;
  border-radius: 10px;
  font-size: 1rem;
}

.note-box::before {
  content: "Note";
  font-weight: bolder;
  display: block;
  padding: 0.3em 0em 0em 0em;
  vertical-align: middle;
  font-size: 1.2rem;
}

.dangerous-box {
  padding: 0.25em 1em 0.5em 3em;
  margin-top: 10px;
  margin-bottom: 10px;
  background: #efafb2 5px center/3em no-repeat;
  background-image: url("https://raw.githubusercontent.com/microsoft/fluentui-system-icons/f968c8d7894a84a06e9c11a87938d621fbdbbba6/assets/Alert%20On/SVG/ic_fluent_alert_on_24_filled.svg");
  background-position: 0.6em 0.5em;
  background-size: 3% auto;
  border-radius: 10px;
  font-size: 1rem;
}

.dangerous-box::before {
  content: "Danger";
  font-weight: bolder;
  display: block;
  padding: 0.3em 0em 0em 0em;
  vertical-align: middle;
  font-size: 1.2rem;
}

.mathy-box {
  padding: 0.25em 1em 0.5em 3em;
  margin-top: 10px;
  margin-bottom: 10px;
  background: #e7e6ff 5px center/3em no-repeat;
    background-image: url("https://raw.githubusercontent.com/microsoft/fluentui-system-icons/f968c8d7894a84a06e9c11a87938d621fbdbbba6/assets/Math%20Format%20Linear/SVG/ic_fluent_math_format_linear_24_filled.svg");
  background-position: 0.6em 0.5em;
  background-size: 3% auto;
  border-radius: 10px;
  font-size: 1rem;
}

.mathy-box::before {
  content: "Math Focused";
  font-weight: bolder;
  display: block;
  padding: 0.3em 0em 0em 0em;
  vertical-align: middle;
  font-size: 1.2rem;
}

.ps-algorithm {
  text-align: left;
}
