@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300&family=Noto+Sans+Display:wght@240;400&display=swap');

/* === Colors ====================================== */
:root {
  --primary-hue: 30deg;
  --secondary-hue: 350deg;
  --background: white;
  --text-color: black;
  --code-block-bg: hsl(var(--secondary-hue) 20% 20%);
  --header-text-color: hsl(var(--primary-hue) 50% 10%);
  --nav-text: hsl(var(--primary-hue) 40% 50%);
  --nav-text-hover: hsl(var(--primary-hue) 40% 30%);
  --border-color: hsl(var(--primary-hue) 40% 60%);
}

.dark-mode {
   --background: #222222;
   --text-color: white;
   --nav-text-lum: 60%;
   --code-block-bg: hsl(var(--secondary-hue) 20% 20%);
   --header-text-color: hsl(var(--primary-hue) 50% 60%);
   --nav-text: hsl(var(--primary-hue) 40% 60%);
   --nav-text-hover: hsl(var(--primary-hue) 40% 70%);
}

button {
    color: var(--nav-text);
    background: #00000010;
    border: thin solid #0006;
    padding: 5pt 10pt;
    border-radius: 5pt;
}

button:hover {
    background: #00000030;
}

body {
  background: var(--background);
  color: var(--text-color);
}

header {
  color: var(--header-text-color);
  background: #00000020;
  border-bottom: solid thick hsl(var(--primary-hue), 40%, 30%);
}

header div {
  filter: drop-shadow(0px 1px 1px #00000018);
}

a {
  color: var(--nav-text);
}

a:hover {
    color: var(--nav-text-hover);
}

#menu li.active > a {
  color: var(--nav-text-hover);
    /* filter: drop-shadow(0px 0px 0.5px var(--link-30)); */
}

#main h1, h2, h3 {
    color: hsl(var(--secondary-hue), 40%, 60%);
}

div.sourceCode {
    background: var(--code-block-bg);
    border-color: var(--border-color);
}

/* === Style ======================================= */
a {
  text-decoration: none;
}

/* === Fonts ======================================= */
body {
  font-weight: 240;
  font-size: 12pt;
  font-family: "Noto Sans Display", sans-serif;
}

code {
  font-size: smaller;
  font-weight: 300;
  font-family: "Fira Code", monospace;
}

@supports (font-variation-settings: normal) {
  code { font-family: 'Fira Code VF', monospace; }
}

/* === Layout ====================================== */
body {
  margin: 0;
}

#contents {
  line-height: 250%;
  text-align: right;
  padding-right: 20pt;
  margin-top: 10pt;
}

#contents ul {
    border-right: solid thick #00000030;
    padding-right: 10pt;
    list-style-type: none;
    font-weight: 300;
}

#nlesc-logo {
    height: 30pt;
}

.dark-mode #nlesc-logo {
    filter: invert() hue-rotate(180deg);
}

#contents img {
    vertical-align: middle;
    margin-right: 10pt;
}

#contents #nlesc-logo {
    display: none;
}

    #contents .buttons ul {
        display: flex;
        flex-flow: row wrap;
        justify-content: right;
    }

    #contents .buttons li {
        margin: 0;
        padding: 0;
    }

    #contents .sticky .links {
        position: absolute;
        top: 0;
        right: 0;
    }
#menu nav {
    padding-left: 20pt;
}

#menu ul {
    padding-left: 10pt;
    list-style-type: none;
    font-weight: 400;
    border-left: solid thick #00000030;
}

#menu ul ul {
    padding-left: 20pt;
    list-style-type: "…  ";
    font-weight: 240;
    border: none;
}

#main {
    line-height: 180%;
    max-width: 100%;
    margin: 0pt 0pt 0pt 0pt;
    padding: 0pt 10pt 10pt 10pt;
    box-sizing: border-box;
}

#menu {
    line-height: 180%;
    /* font-size: smaller; */
    padding: 10pt 10pt 10pt 0pt;
}

#main h1 {
    margin-top: 10pt;
    border-bottom: solid thick #00000030;
    line-height: normal;
}

#main h2 {
    font-size: 16pt;
    margin-top: 30pt;
}

header {
    margin: 0;
    padding: 5pt 20pt 10pt 20pt;
}

header h1 {
    margin: 0;
    padding: 0;
}

header .subtitle {
    margin: 0;
}

header div.spacing {
    display: none;
}

details {
    padding: 5pt;
    margin: 10pt 20pt 10pt 20pt;
    border-radius: 5pt;
    border-left: thick solid #00000030;
    box-shadow: 0px 0px 1px #88888855;
}

details summary {
    font-style: italic;
}

.row::after {
  content: "";
  clear: both;
}

[class*="col-"] {
  width: 100%;
}

div.table {
    margin: 20pt 0;
}

div.table table {
    margin: 0 auto 0 auto;
}

table {
    border: solid thin var(--border-color);
    border-spacing: 0;
    border-collapse: separate;
    border-radius: 10pt;
    box-shadow: 8px 8px 0px hsl(var(--secondary-hue) 30% 50% / 10%);
}

table td {
    padding: 5pt 10pt 5pt 10pt;
}

div.table table th {
    border-bottom: solid thin var(--border-color);
    padding: 5pt 10pt 5pt 10pt;
    font-weight: 400;
}

div.table table tr:nth-child(odd) {
    background: hsl(var(--secondary-hue) 50% 50% / 10%);
}

/* === Boxes ======================================= */
.result {
    margin: 20pt;
    padding: 10pt;
    background: #00000010;
}

.callout h3 {
    background: var(--primary);
    padding: 3pt 0pt 3pt 10pt;
    text-shadow: 0px 0px 2px #000000A0;
    border-radius: 5pt 5pt 0pt 0pt;
}

.callout h3::before {
    content: "⚠";
    margin-right: 10pt;
}

.callout {
    margin: 20pt 40pt 20pt 40pt;
    background: #00000008;
    padding-bottom: 5pt;
    border-radius: 5pt;
    box-shadow: 1px 1px 2px #00000022;
}

.callout p {
    margin: 10pt;
}

.named-code-block {
    position: relative;
    border-radius: 10pt 10pt 10pt 10pt;
    border: solid 2pt hsl(var(--primary-hue) 30% 30%);
    box-shadow: 8px 8px 0px hsl(var(--secondary-hue) 30% 50% / 10%);
    background: var(--code-block-bg);
    margin-bottom: 20pt;
}

.named-code-block .code-block-title {
    text-align: right;
    color: hsl(var(--secondary-hue) 60% 70%);
    line-height: normal;
    font-size: smaller;
    background: #fff2;
    padding: 5pt 10pt;
    border-radius: 7pt 7pt 0 0;
}

.named-code-block .code-block-title::before {
    content: "🖹";
    font-weight: bold;
    position: absolute;
    left: 10pt;
}

.named-code-block .sourceCode {
    margin: 0;
    background: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
}

div.sourceCode {
    line-height: 120%;
    border: solid 2pt hsl(var(--primary-hue) 40% 30%);
    box-shadow: 8px 8px 0px hsl(var(--secondary-hue) 30% 50% / 10%);
    border-radius: 10pt 10pt 10pt 10pt;
    padding: 10pt 10pt 10pt 15pt;
    overflow: hidden;
}

.doctest {
    padding: 0;
    border-radius: 10pt 10pt 10pt 10pt;
    border: solid 2pt hsl(var(--primary-hue) 30% 30%);
    box-shadow: 8px 8px 0px hsl(var(--secondary-hue) 30% 50% / 10%);
    background: var(--code-block-bg);
}

.doctest .doctestInput {
    background: #fff2;
    border-radius: 7pt 7pt 0 0;
}

.doctest .doctestInput .sourceCode {
    padding: 5pt;
    margin: 0;
}

.doctest .doctestInput .sourceCode pre::before {
    color: hsl(var(--secondary-hue) 80% 70%);
    content: "$";
}

.doctest div.sourceCode {
    padding: 0pt 10pt 0pt 15pt;
    background: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
}

/* === Equations =================================== */
span.equation {
    display: block;
    position: relative;
    text-align: center;
    width: 100%;
}

span.equation .equation-number {
    position: absolute;
    right: 0pt;
}

mjx-container {
    display: inline!important;
}

a.eqref {
    color: var(--text-color);
}

/* === Animation =================================== */
html {
  scroll-behavior: smooth;
}

/* === Tablet layout =============================== */
@media only screen and (min-width: 600px) and (max-width: 1600px) {
    header {
        padding: 20pt 20pt;
    }

    #contents .links #nlesc-logo {
        display: inline;
    }

    #main h1 {
        margin-top: 30pt;
    }
    nav {
        position: sticky;
        top: 10pt;
    }

    header .spacing {
        display: none;
    }

    .row {
        display: flex;
        flex-flow: row wrap;
    }
    
    #menu ul {
        border-left: solid thick #00000030;
        padding-left: 10pt;
    }

    #menu ul ul {
        border: none;
    }

    #menu {
        width: 20%;
    }
    #main {
        width: 75%;
        padding-left: 20pt;
    }
    #contents {
        width: 100%;
        margin: 0;
        border-bottom: solid thick #00000030;
    }
    #contents .sticky {
        display: flex;
        flex-flow: column;
        width: 100%;
    }
    #contents .sticky .site-menu {
        text-align: left;
    }
    #contents .sticky .links {
        position: absolute;
        top: 0;
        right: 0;
    }
    #contents .links li {
        display: block;
    }
    #contents ul {
        margin: 5pt 0pt;
        border-right: none;
        display: block;
    }
    #contents li {
        display: inline;
        margin: 5pt 10pt;
    }

    #contents .buttons li {
        margin: 0pt;
        padding: 0pt;
    }

    #contents .buttons img {
        margin: 0pt;
    }
      
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

/* === Desktop layout ============================== */
@media only screen and (min-width: 1600px) {
    body {
        font-size: 14pt;
    }

    header {
        padding: 20pt 20pt;
    }

    header div.spacing {
        display: block;
    }

    header h1 {
        padding: 20pt 0;
    }

    #main h1 {
        margin-top: 30pt;
    }
    .row {
        display: flex;
        flex-flow: row;
    }
    #menu { order: 3; }
    #main { order: 2; }
    /* #contents { display: block; order: 1; } */
      
    #contents {
        order: 1;
        display: block;
    }

    #contents .sticky{
        position: sticky;
        top: 10pt;
    }

    #contents .sticky > div {
        margin-bottom: 30pt;
    }

    #contents .buttons ul {
        display: flex;
        flex-flow: row wrap;
        justify-content: right;
    }

    #contents .buttons li {
        margin: 0;
        padding: 0;
    }

    #contents .sticky .links {
        position: static;
    }

    #contents .links #nlesc-logo {
        display: inline;
    }

    nav {
            position: sticky;
            top: 10pt;
    }

  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}