@import "vars";
@import "normalise"; // normalise CSS across browsers

@import "nav"; //the side navbar
@import "header"; // the header
@import "footer"; // the footer
@import "article"; // individual blog articles
@import "projects"; //Styles for the projects page
@import "cv"; // the CV page
@import "blogroll"; // the summaries of the blogposts
@import "comments"; //the mastodon comments
@import "model_viewer"; //Styles for the 3D model viewer
@import "mastodon_timeline";
@import "night_mode_toggle";
@import "highlights";
@import "tables";

@import "rouge_theme_github.scss";

@import "d2";

@font-face {
    font-family: "JetBrains Mono";
    src: url("/assets/fonts/JetBrainsMono.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    src: url("/assets/fonts/Inter.woff2") format("woff2");
}

@font-face {
    font-family: "Space Grotesk";
    src: url('/assets/fonts/SpaceGrotesk.woff2') format('woff2');
}
  

:root {
  --body-font: 'Inter', 'IBM Plex Sans', sans-serif;
  --title-font: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif", HelveticaNeue-CondensedBlack;
  --mono-font: "JetBrains Mono", "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace;

  --theme-text-color: #222;
  --theme-bg-color: #fcfcfc;
  --theme-model-line-color: #222;
  --theme-model-bg-color: #fcfcfc;
  --theme-subtle-outline: oklch(90% 0 50);
  --theme-subtle-background: rgba(128, 128, 128, 0.05);
  --theme-highlight-color: hsl(338, 75%, 60%);
  --theme-highlight-color-transparent: hsla(338, 75%, 60%, 20%);
  --theme-subtle-text-color: #606984;

  --night-mode-fade-time: 0.5s;

  // constrain width and center
  --body-max-width: 900px;
  --body-width: min(100vw, 900px);
  --body-margin: calc((100vw - var(--body-width)) / 2);

   // max 30px, min 30px, min happens at 375px
   --title-font-size: clamp(20px, 20px * 100vw / 375px, 30px);

  --color-mode: "light";
  --color-dark: #141414;
  --color-dark-alpha: rgba(0, 0, 0, 0.1);
  --color-light: #efefef;
  --color-light-alpha: rgba(255, 255, 255, 0.9);
  --icon-sun: url('data:image/svg+xml,\
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">\
    <path d="M18 12c0-0.811-0.161-1.587-0.455-2.295-0.304-0.735-0.75-1.395-1.303-1.948-0.552-0.552-1.213-0.998-1.948-1.303-0.707-0.293-1.483-0.454-2.294-0.454s-1.587 0.161-2.295 0.455c-0.735 0.304-1.395 0.75-1.948 1.302s-0.998 1.213-1.302 1.948c-0.294 0.708-0.455 1.484-0.455 2.295s0.161 1.587 0.455 2.295c0.304 0.735 0.75 1.395 1.303 1.948 0.552 0.552 1.213 0.998 1.948 1.303 0.707 0.293 1.483 0.454 2.294 0.454s1.587-0.161 2.295-0.455c0.735-0.304 1.395-0.75 1.948-1.303s0.998-1.213 1.303-1.948c0.293-0.707 0.454-1.483 0.454-2.294zM16 12c0 0.544-0.108 1.060-0.303 1.529-0.202 0.489-0.5 0.929-0.869 1.299s-0.81 0.667-1.299 0.869c-0.469 0.195-0.985 0.303-1.529 0.303s-1.060-0.108-1.529-0.303c-0.489-0.202-0.929-0.5-1.299-0.869s-0.667-0.81-0.869-1.299c-0.195-0.469-0.303-0.985-0.303-1.529s0.108-1.060 0.303-1.529c0.202-0.489 0.5-0.929 0.869-1.299s0.81-0.667 1.299-0.869c0.469-0.195 0.985-0.303 1.529-0.303s1.060 0.108 1.529 0.303c0.489 0.202 0.929 0.5 1.299 0.869s0.667 0.81 0.869 1.299c0.195 0.469 0.303 0.985 0.303 1.529zM11 1v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1zM11 21v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1zM3.513 4.927l1.42 1.42c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-1.42-1.42c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM17.653 19.067l1.42 1.42c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-1.42-1.42c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM1 13h2c0.552 0 1-0.448 1-1s-0.448-1-1-1h-2c-0.552 0-1 0.448-1 1s0.448 1 1 1zM21 13h2c0.552 0 1-0.448 1-1s-0.448-1-1-1h-2c-0.552 0-1 0.448-1 1s0.448 1 1 1zM4.927 20.487l1.42-1.42c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-1.42 1.42c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0zM19.067 6.347l1.42-1.42c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-1.42 1.42c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z"></path>\
  </svg>');
  --icon-sun-filter: invert(0.75);
  --icon-moon: url('data:image/svg+xml,\
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">\
    <path d="M21.996 12.882c0.022-0.233-0.038-0.476-0.188-0.681-0.325-0.446-0.951-0.544-1.397-0.219-0.95 0.693-2.059 1.086-3.188 1.162-0.696 0.047-1.399-0.027-2.077-0.226-0.656-0.192-1.29-0.501-1.874-0.932-0.655-0.484-1.181-1.074-1.575-1.729-0.409-0.68-0.676-1.432-0.792-2.206s-0.082-1.571 0.11-2.342c0.184-0.741 0.514-1.46 0.999-2.115 0.142-0.191 0.216-0.435 0.191-0.691-0.053-0.55-0.542-0.952-1.092-0.898-1.117 0.109-2.186 0.399-3.172 0.843-1.005 0.452-1.925 1.065-2.723 1.808-0.883 0.82-1.618 1.801-2.159 2.901-0.523 1.064-0.863 2.238-0.978 3.485-0.125 1.347 0.024 2.658 0.402 3.878 0.392 1.266 1.031 2.431 1.863 3.433s1.86 1.843 3.033 2.461c1.13 0.595 2.392 0.982 3.739 1.106s2.659-0.025 3.878-0.403c1.266-0.392 2.431-1.031 3.433-1.863s1.843-1.86 2.461-3.033c0.595-1.13 0.982-2.392 1.106-3.739zM19.567 14.674c-0.126 0.351-0.276 0.689-0.447 1.014-0.493 0.937-1.166 1.76-1.969 2.427s-1.735 1.178-2.747 1.491c-0.973 0.302-2.021 0.421-3.102 0.321s-2.089-0.41-2.99-0.884c-0.937-0.493-1.76-1.166-2.427-1.969s-1.178-1.735-1.491-2.747c-0.302-0.973-0.421-2.021-0.321-3.102 0.092-1 0.365-1.938 0.782-2.786 0.43-0.878 1.018-1.661 1.725-2.319 0.64-0.595 1.377-1.086 2.183-1.449 0.179-0.081 0.362-0.155 0.548-0.223-0.092 0.257-0.171 0.516-0.236 0.778-0.256 1.029-0.302 2.091-0.147 3.121s0.51 2.032 1.056 2.941c0.527 0.875 1.23 1.663 2.1 2.306 0.775 0.573 1.622 0.986 2.5 1.243 0.907 0.266 1.846 0.364 2.772 0.302 0.752-0.050 1.496-0.207 2.21-0.465z"></path>\
  </svg>');
  --icon-moon-filter: invert(0);
  --background: #efefef;
  --text-color: #141414;
  --button-icon: var(--icon-moon);
  --button-icon-filter: var(--icon-moon-filter);
  --button-background: var(--color-dark);
  --button-color: var(--color-light);
  --border-color: var(--color-dark-alpha);
}

* {  
    box-sizing: border-box; 
    text-rendering: geometricPrecision;
}

h2 {
     font-family: var(--body-font);
        font-variation-settings: "wght" 700;
}

html {
  width: 100vw;
  scroll-behavior: smooth;
  font-family: var(--body-font);
  font-size: 0.9em;


}

body {
  background: var(--theme-bg-color);
  color: var(--theme-text-color);

  max-width: var(--body-max-width);
  margin: auto;
}

// Padding to keep the keep the content to the right of the header
main {
  container: main / inline-size;

  --main-margin-left: 240px;
  --main-padding-left: 30px;
  --main-padding-right: 30px;
  --main-max-width: 560px;

  max-width: var(--main-max-width);
  margin-left: var(--main-margin-left);
  padding-left: var(--main-padding-left);
  padding-right: var(--main-padding-right);
  padding-top: 10vh;
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: center;

  h1 {
    font-size: 2em;
  }

  // img that are direct children of p are usually img tags in markdown
  p > img {
    margin-top: 2em;
    margin-bottom: 1em;
    width: 90%;

    //hack to center images in p tags
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

// p.lead:first-child::first-letter, .blog-namespace > p.lead:first-child::first-letter
div.e-content > p:first-of-type:first-child::first-letter  {
  float: left;
  color: var(--theme-highlight-color);
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 15px;
  padding-left: 3px;
  font-family: Baskerville,Georgia,"URW Bookman","Noto Serif","URW Palladio L","Times New Roman",Times,serif;
//   font-family: "Space Grotesk";
}

// All code both inline and block
code {
    font-family: var(--mono-font);
    font-size: 0.9rem;
}

// Inline blocks
:not(pre) > code {
}


// Block code
pre.highlight code {
}



hr.heading {
  width: 100%;
  margin-top: 0;
  margin-bottom: 2em;
  height: 0;
  border: 1px solid rgba(128, 128, 128, 0.2);
}

hr.byline {
    margin-top: 0.2em;
    margin-bottom: 0.5em;
    border: 1px solid rgba(128, 128, 128, 0.2);
  }

// Used for both blog and project summaries
@mixin time-text {
  font-size: 0.75em;
  opacity: 0.8;
}

span.dt-label {
  display: block;
  width: 100%;
  text-align: right;
  @include time-text;
}

section.title-date-container {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

section.title-icon-container {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
  

section.byline-time {
    display: flex;
    justify-content: space-between;
    time {
        text-align: right;
        @include time-text;
    }
}



section.byline {
  font-style: italic;
  margin-bottom: 2em;
}

:is(h1, h2, h3, h4, .text-balance) {
  text-wrap: balance;
}

p,
figcaption {
  font-size: 1em;
  line-height: 1.4em;
}

main :is(p, h1, h2, h3, h4, h5, h6) {
  margin-block-end: 0.2em;
}

a {
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 0.5px;
  color: var(--theme-text-color);
}

h1 > a,
h2 > a,
h3 > a,
li > a {
  text-decoration: None;
}

header a,
nav a {
  text-decoration: none;
  color: var(--theme-text-color);
}

div.highlight {
  max-width: 100%;
  overflow: auto;
}

p {
  margin-top: 0.7em;
  margin-bottom: 0.7em;
  padding-right: 0;
  vertical-align: baseline;
}

figure {
  container: fig / inline-size;
  width: 100%;
  padding-bottom: 1em;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1em;

  figcaption {
    margin-top: 1em;
    text-align: center;
  }
}

figure > img,
figure > svg,
figure > canvas {
  width: 100%;
  border-radius: 10px;
}

figure.centered {
  display: flex;
  justify-content: center;
}

figure.two-wide {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em;
  margin-bottom: 1em;
  > *:not(figcaption) {
    width: calc(50% - 0.5em);
  }
}

figure.multiple {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em;
  margin-bottom: 1em;
  > *:not(figcaption) {
    width: calc(50% - 0.5em);
    margin: 0;
    padding: 0;
  }
  > .wide {
    width: calc(100% - 0.5em);
  }
}

.image-grid-4x4 {
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  gap: 2px;
  margin-bottom: 1em;
  place-items: center center;

  > *:not(figcaption) {
    margin: 0;
    padding: 0;
    width: 100%;
  }
}

section.note {

  p {
    margin: 0;
  }
  padding: 1em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  background-color: var(--theme-highlight-color-transparent);
  border-radius: 10px;
}

section.center {
  display: flex;
  justify-content: center;
  margin-top: 1em;
  margin-bottom: 1em;
}



div.highlighter-rouge {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono,
    Courier New, Courier, monospace;
  font-size: 12px;
  line-height: 1.4;
  border-radius: 5px;

  div.highlight {
    padding: 1em;
  }

  // Override background colors from the theme.
  span {
    background-color: unset !important;
  }

  pre {
    text-wrap: auto;
    margin: 0;
  }

  .wide-outside-parent {
    // width: 100vw;
    position: relative;
    width: calc(
      100vw - var(--body-margin) - var(--main-margin-left) -
        var(--main-padding-left) - var(--main-padding-right)
    );
    pre {
      white-space: pre-wrap;
    }
    .line-numbers {
      // display: none;
      margin-right: 1em;
      opacity: 0.3;
      a {
        text-decoration: none;
      }
    }
  }
}

// If the browser doesn't support web components, hide anything with has-wc class
body.has-wc .no-wc {
  display: none;
}
// If the browser does support web components, hide anything with no-wc class
body:not(.has-wc) .has-wc {
  display: none;
}

@media only screen and (max-width: $horizontal_breakpoint),
  only screen and (max-height: $vertical_breakpoint) {
  main {
    --main-margin-left: 0px;
    --main-padding-left: 20px;
    --main-padding-right: 20px;
    padding-top: 10px;
    margin: auto;
    justify-content: flex-start;
  }

  article {
    margin-left: 0px;
  }

  //   h1 {
  //     font-size: 1.5em !important;
  //   }
  .MathJax {
    font-size: 0.8em !important;
    overflow-x: auto;
    overflow-y: hidden;
  }

  // Make code a bit smaller so it doesn't wrap as much
  pre.highlight code {
    font-size: 0.8rem;
  }
}



.hidden {
    display: none;
}

.visually-hidden {
  display: block;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(1px);
  white-space: nowrap;
  position: absolute;
}

// Add transitions for the background night mode
* {
  transition: background var(--night-mode-fade-time) ease-in-out,
    color var(--night-mode-fade-time) ease-in-out;
}

img,
svg {
  transition: opacity var(--night-mode-fade-time) ease-in-out,
    filter var(--night-mode-fade-time) ease-in-out;
}

@mixin night-mode {
  --background: var(--color-dark);
  --text-color: var(--color-light);
  --button-icon: var(--icon-sun);
  --button-icon-filter: var(--icon-sun-filter);
  --button-background: var(--color-light);
  --button-color: var(--color-dark);
  --border-color: var(--color-light-alpha);

  


  body {
    --theme-text-color: #fcfcfc;
    --theme-bg-color: #222;
    --theme-subtle-outline: oklch(50% 0 50);
    --theme-subtle-background: rgba(255, 255, 255, 0.05);
    --theme-highlight-color-transparent: hsl(338, 85%, 21%);
  }

  // Two main image classes are "invertable" i.e look good inverted
  // and "no-dim" i.e don't get dimmed in night mode
  // All other images get dimmed in night mode
  img:not(.invertable):not(.no-dim):not(.brighten) {
    opacity: 0.75;
  }

  svg.brighten,
  img.brighten {
    filter: brightness(2);
  }

  svg.invertable,
  img.invertable {
    opacity: 1;
    filter: invert(1);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-mode: "dark";
  }

  :root:not([data-user-color-scheme]) {
    @include night-mode;
    // @import "rouge_theme_gruvbox.dark.scss";
  }
}

[data-user-color-scheme="dark"] {
  @include night-mode;
  @import "rouge_theme_gruvbox.dark.scss";
}

@media (prefers-reduced-motion: no-preference) {
    @view-transition {
      navigation: auto;
    }
}