Initial pages, based on CV

.gitignore

@@ -0,0 +1,2 @@
+/index.html
+/result

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 basicpage
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

dark.css

@@ -0,0 +1,82 @@
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #424242;
+    color: #f4ebdb;
+  }
+
+  a {
+    color: #91c1ff;
+  }
+
+  div.tip {
+    border-left: 4px solid #45df45;
+    padding-left: 10px;
+  }
+
+  div.tip > div.title p {
+    color: #45df45;
+  }
+
+  div.important {
+    border-left: 4px solid rgb(192, 51, 228);
+  }
+
+  div.important > div.title p {
+    color: rgb(192, 51, 228);
+  }
+
+  div.warning {
+    border-left: 4px solid rgb(255, 203, 99);
+  }
+
+  div.warning > div.title p {
+    color: rgb(255, 203, 99);
+  }
+
+  div.caution {
+    border-left: 4px solid rgb(255, 104, 134);
+  }
+
+  div.caution > div.title p {
+    color: rgb(255, 104, 134);
+  }
+
+  div.note {
+    border-left: 4px solid #7799ff;
+  }
+
+  div.note > div.title p {
+    color: #7799ff;
+  }
+
+  pre {
+    background-color: #070707;
+  }
+
+  nav ul li a {
+    color: #d1beb3;
+    border-bottom-color: #d1beb3;
+  }
+
+  nav ul li a:hover {
+    color: #d1beb3;
+    border-bottom-color: #d1beb3;
+  }
+
+  table tr {
+    background-color: #414141;
+  }
+
+  table tr:nth-child(2n) {
+    background-color: #4e4e4e;
+  }
+
+  section.paper p {
+    color: rgb(189, 189, 189);
+  }
+
+  div.awards span {
+    background: #2e2813;
+    color: #cf9c10;
+  }
+}

flake.lock

@@ -0,0 +1,27 @@
+{
+  "nodes": {
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1774386573,
+        "narHash": "sha256-4hAV26quOxdC6iyG7kYaZcM3VOskcPUrdCQd/nx8obc=",
+        "owner": "nixos",
+        "repo": "nixpkgs",
+        "rev": "46db2e09e1d3f113a13c0d7b81e2f221c63b8ce9",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nixos",
+        "ref": "nixos-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "nixpkgs": "nixpkgs"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,34 @@
+{
+  description = "A very basic flake";
+
+  inputs = {
+    nixpkgs.url = "github:nixos/nixpkgs?ref=nixos-unstable";
+  };
+
+  outputs = { self, nixpkgs }: let
+    lib = nixpkgs.lib;
+  in {
+
+    packages = lib.attrsets.genAttrs lib.systems.flakeExposed (system: let
+      pkgs = import nixpkgs { inherit system; };
+      src = lib.cleanSource ./.;
+    in {
+      default = pkgs.runCommand "build-website" {} ''
+        mkdir $out
+        cp -r ${src}/* $out
+        cd $out
+        ${pkgs.pandoc}/bin/pandoc --standalone \
+          --from commonmark_x+alerts \
+          --output=index.html \
+          --template=pandoc/template.html4 \
+          --css=style.css \
+          --toc \
+          --toc-depth=1 \
+          --resource-path=. \
+          --lua-filter=pandoc/paper.lua \
+          --lua-filter=pandoc/date.lua \
+          index.md
+      '';
+    });
+  };
+}

img/site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "Samy Avrillon's homepage",
+  "short_name": "MysaaHomepage",
+  "icons": [
+    {
+      "src": "/img/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/img/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#dcdcf5",
+  "background_color": "#f5f5dc",
+  "display": "standalone"
+}

index.md

@@ -0,0 +1,139 @@
+---
+title: My homepage
+author: Samy Avrillon
+shortbio: Wishes the world was self-compatible
+description-meta: Short bio for meta-data
+og-url: https://mysaa.bernard.com.de/
+location: Office GN1.326N, ENS de Lyon, 46 allée d'Italie, 69007 Lyon, France
+email: samy.avrillon@ens-lyon.org
+clickable-email: true
+picture: img/myself3.jpg
+picture-round: true
+side-by-side: true
+disable-dark-mode: false
+pronouns: They/them
+og-picture: https://basicpage.github.io/img/profile.png
+orcid: 0009-0003-3476-0366
+dblp: https://dblp.org/pid/427/9353.html
+#hal: https://hal.science/
+#mastodon: https://lipn.info
+discord: mysaajava
+github: MysaaJava
+git: https://git.bernard.com.de
+footer: >-
+  Based on this nice
+  [basicpage template](https://github.com/basicpage/basicpage.github.io)
+  thanks for their work
+---
+
+Since high school studied how text could be transformed into programs, proofs or anything that makes sense.
+Trying to make the world self-compatible.
+
+I am currently doing my PhD thesis with Cyril Cohen in [ENS de Lyon](https://www.openstreetmap.org/way/95144113).
+My work subject is [Trocq](https://github.com/rocq-community/trocq), a Rocq library doing proof transfer.
+You can find most of my notes and presentation I made about this on [my Inria gitlab](https://gitlab.inria.fr/savrillo/phd-redactions).
+
+# Curriculum
+
+## Schools
+  
+### 2018-2021: High-school preparatory classes (CPGE)
+[Lycée Lafayette](https://www.openstreetmap.org/way/44170361) & [Lycée Blaise Pascal](https://www.openstreetmap.org/way/144713008)
+Preparatory classes for the ENS competitive exam, extended to three years
+
+### 2021-2025: ENS diploma curriculum
+[ENS de Lyon](https://www.openstreetmap.org/way/95144113)
+Licence degree in 2022, first year of master’s degree in 2023.
+Register as “external studies” for the second year of the Master’s degree.
+Fourth year of internships.
+
+### 2023-2024: MPRI (Master Parisien de la Recherche en Informatique)
+[Université Paris Cité](https://www.openstreetmap.org/way/286296494)
+Second year of master degree outside of the ENS because of a course selection that fit my interests a lot more.
+
+
+## Internships
+
+### Summer 2022: Program Equivalences in (Featherweight) Java
+8 week internship with Daniele Varacca & Clément Aubert in [LACL, Créteil, France](https://www.openstreetmap.org/way/37022786)
+I did create an interesting notion of context and equivalence in this minimal object-oriented language.
+
+### Summer 2023: Logic as a Second-Order Generalized Algebraic Theory
+3 month internship with Kaposi Ambrus & Thorsten Altenkirsch at [ELTE, Budapest, Hungary](https://www.openstreetmap.org/way/1318152907)
+I did implement a formalization of Propositional and First order Logic in Agda, based upon a SOGAT definition of those logics.
+
+### Summer 2024: Categorical semantics of the reduction of GATs to two-sorted GATs
+4.5 month internship with Ambroise Lafont at [LIX, Palaiseau, France](https://www.openstreetmap.org/way/548438043)
+I did prove a known GAT tranformation to be correct and to preserve some properties. 
+This work lead to a publication in 2026 that you can find here: https://arxiv.org/abs/2601.19426
+
+### Winter 2024/2025: Formalizing modal logic with hyperdoctrines
+5 month internship with Kenji Maillard at [LMU, München, Deutschland](https://www.openstreetmap.org/way/376680733)
+I studied Hyperdoctrines and implemented them in the Proof Assistant Lean, along with an extension to any modal logic, taking guarded logic as an example.
+
+### Spring 2025: Getting the hang of Trocq
+3.5 month internship with Cyril Cohen at [LIP, Lyon, France](https://www.openstreetmap.org/way/95144113)
+Applications and extensions of Trocq for formalized mathematics in proof assistants based on CIC
+
+
+
+# Publications
+
+## Journal papers
+
+``` json {.paper}
+"title": "For Generalised Algebraic Theories, Two Sorts Are Enough",
+"authors": "Samy Avrillon, Ambrus Kaposi, Ambroise Lafont, Niyousha Najmaei, Johann Rosain",
+"year": "2026",
+"url": "https://arxiv.org/abs/2601.19426",
+"files": [
+  { "text": "Paper", "type": "pdf", "src": "files/2026-GATsTwoSorts.pdf" }
+]
+```
+
+
+## Internship reports
+
+``` json {.paper}
+"title": "Modal Hyperdoctrines",
+"authors": "Samy Avrillon",
+"year": "2025",
+"url": "https://github.com/MysaaJava/guarded-lean/tree/plr",
+"files": [
+  { "text": "Presentation", "type": "pdf", "src": "files/2025-M2-presentation.pdf" }
+]
+```
+
+``` json {.paper}
+"title": "2-sortification",
+"authors": "Samy Avrillon",
+"year": "2024",
+"url": "https://git.bernard.com.de/Mysaa/M2Internship",
+"files": [
+  { "text": "Report", "type": "pdf", "src": "files/2024-M2-Report.pdf" },
+  { "text": "Presentation", "type": "pdf", "src": "files/2024-M2-Presentation.pdf" }
+]
+```
+
+``` json {.paper}
+"title": "Logic as a Second-Order Generalized Algebraic Theory",
+"authors": "Samy Avrillon",
+"year": "2023",
+"url": "https://github.com/MysaaJava/m1-internship",
+"files": [
+  { "text": "Report", "type": "pdf", "src": "files/2023-M1-Report.pdf" },
+  { "text": "Presentation", "type": "pdf", "src": "files/2023-M1-Presentation.pdf" }
+]
+```
+
+``` json {.paper}
+"title": "Featherweight Java",
+"authors": "Samy Avrillon",
+"year": "2022",
+"url": "https://gitlab.aliens-lyon.fr/savrillo/stage-2022",
+"files": [
+  { "text": "Report", "type": "pdf", "src": "files/2022-L3-Report.pdf" },
+  { "text": "Presentation", "type": "pdf", "src": "files/2022-L3-Presentation.pdf" }
+]
+```
+

pandoc/date.lua

@@ -0,0 +1,6 @@
+function Meta(m)
+  if m.date == nil then
+    m.date = os.date("%e %B %Y")
+    return m
+  end
+end

pandoc/paper.lua

@@ -0,0 +1,210 @@
+function jsondata(data)
+
+  local newdata = {}
+
+  newdata.title = data.title or {}
+  newdata.url = data.url or ""
+  newdata.authors = data.authors or {}
+  newdata.venue = data.venue
+  newdata.year = data.year
+  newdata.files = data.files or pandoc.List()
+  newdata.awards = data.awards or pandoc.List()
+
+  return newdata
+
+end
+
+function yamldata(data)
+
+  local newdata = {}
+
+  newdata.title = pandoc.utils.stringify(data["title"])
+  newdata.url = pandoc.write(pandoc.Pandoc{data["url"]}, 'html')
+  newdata.authors = data["authors"] or {}
+  if data.venue then
+    newdata.venue = pandoc.utils.stringify(data["venue"])
+  end
+  if data.year then
+    newdata.year = pandoc.utils.stringify(data["year"])
+  end
+  local files = data["files"] or pandoc.List()
+
+  newdata.files = files:map(function(data)
+    local newfile = {}
+
+    newfile.text = pandoc.utils.stringify(data.text)
+    newfile.type = pandoc.utils.stringify(data.type)
+    newfile.src = pandoc.write(pandoc.Pandoc{data.src}, 'html')
+
+    return newfile
+  end)
+
+  local awards = data["awards"] or pandoc.List()
+  if pandoc.utils.type(awards) == 'List' then
+    newdata.awards = awards:map(function(data)
+      return pandoc.utils.stringify(data)
+    end)
+  else
+    newdata.awards = pandoc.utils.stringify(awards)
+  end
+
+  return newdata
+
+end
+
+function paper(data)
+
+  local title = data.title
+  local url = data.url
+  local authors = data.authors
+  local awards = data.awards
+  local venue = data.venue
+  local year = data.year
+  local files = data.files
+
+  local header = {}
+
+  if url and not (url == "") then
+    header = { pandoc.Link(title, url) }
+  else
+    header = { title }
+  end
+
+  local award_info = {}
+  if awards then
+    if not (pandoc.utils.type(awards) == 'List') then
+      awards = pandoc.List({awards})
+    end
+    award_info = awards:map(function(awd)
+      local icon = "<i class=\" fa-solid fa-award\"></i>"
+
+      local html_output = string.format(
+        "<span>%s %s</span>",
+          icon, awd
+      )
+      return pandoc.RawBlock("html", html_output)
+    end)
+  end
+
+  local sub = {}
+
+  if venue and year then
+    sub = { pandoc.Str(string.format("%s (%s)", venue, year)) }
+  elseif venue then
+    sub = { venue }
+  elseif year then
+    sub = { year }
+  end
+
+  local file_info = files:map(function(data)
+    local s = data.text or ""
+    local type = data.type
+    local src = data.src or ""
+
+    local icon = ""
+
+    if type == "pdf" then
+      icon = "<i class=\"fa-solid fa-file-pdf\"></i>"
+    elseif type == "bib" then
+      icon = "<i class=\"fa-solid fa-quote-left\"></i>"
+    elseif type == "code" then
+      icon = "<i class=\"fa-solid fa-file-code\"></i>"
+    elseif type == "video" then
+      icon = "<i class=\"fa-solid fa-file-video\"></i>"
+    elseif type == "txt" then
+      icon = "<i class=\"fa-solid fa-file-lines\"></i>"
+    elseif type == "img" then
+      icon = "<i class=\"fa-solid fa-file-image\"></i>"
+    elseif type == "zip" then
+      icon = "<i class=\"fa-solid fa-file-zipper\"></i>"
+    elseif type == "slides" then
+      icon = "<i class=\"fa-solid fa-file-powerpoint\"></i>"
+    elseif type == "link" then
+      icon = "<i class=\"fa-solid fa-link\"></i>"
+    elseif type == "git" then
+      icon = "<i class=\"fa-brands fa-git-alt\"></i>"
+    else
+      icon = "<i class=\"fa-solid fa-file\"></i>"
+    end
+
+    local html_output = string.format(
+      "<a href=\"%s\">%s %s</a>",
+      src, icon, s
+    )
+
+    return pandoc.RawBlock("html", html_output)
+  end)
+
+  local div_content = {
+    pandoc.Header(3, header),
+    pandoc.Div(award_info, {class = "awards"}),
+    pandoc.Div(authors, {class = "authors"}),
+    pandoc.Para(sub),
+    pandoc.Div(file_info, {class = "files"})
+  }
+
+  local div = pandoc.Div(div_content, {class = "paper"})
+
+  return div
+
+end
+
+function CodeBlock(el)
+
+  if el.classes[1] == "paper" and el.classes[2] == "yaml" then
+    local content = string.format("---\n%s\n---", el.text)
+
+    local doc = pandoc.read(content)
+
+    if not doc then
+      error("Failed to decode yaml:\n" .. content)
+    end
+
+    return paper(yamldata(doc.meta))
+  end
+
+  if el.classes[1] == "paper" and el.classes[2] == "json" then
+    local content = string.format("{ %s }", el.text)
+
+    local data = pandoc.json.decode(content, false)
+
+    if not data then
+      error("Failed to decode JSON:\n" .. content)
+    end
+
+    return paper(jsondata(data))
+  end
+
+  if el.classes[1] == "papers" and el.classes[2] == "yaml" then
+    local content = string.format("---\n%s\n---", el.text)
+
+    local doc = pandoc.read(content)
+
+    if not doc then
+      error("Failed to decode yaml:\n" .. content)
+    end
+
+    local content = doc.meta.papers:map(function(d)
+      return paper(yamldata(d))
+    end)
+
+    return pandoc.Blocks(content)
+  end
+
+  if el.classes[1] == "papers" and el.classes[2] == "json" then
+    local content = string.format("[ %s ]", el.text)
+
+    local data = pandoc.json.decode(content, false)
+
+    if not data then
+      error("Failed to decode JSON:\n" .. content)
+    end
+
+    local content = data:map(function(d)
+      return paper(jsondata(d))
+    end)
+
+    return pandoc.Blocks(content)
+  end
+
+end

pandoc/template.html4

@@ -0,0 +1,185 @@
+<!--
+  This webpage is based on the template provided by https://basicpage.github.io/
+  under MIT license:
+  https://github.com/basicpage/basicpage.github.io?tab=MIT-1-ov-file
+
+  Authors:
+  - Yannick Forster
+  - Théo Winterhalter
+-->
+<!DOCTYPE html>
+<html prefix="og: https://ogp.me/ns#" lang="en">
+<head>
+  <meta name="viewport" content="width=device-width">
+  <meta name="generator" content="pandoc">
+  <meta property="og:type" content="website">
+  $for(author-meta)$
+  <meta name="author" content="$author-meta$">
+  $endfor$
+  $if(date-meta)$
+  <meta name="date" content="$date-meta$">
+  $endif$
+  $if(keywords)$
+  <meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$">
+  $endif$
+  $if(description-meta)$
+  <meta name="description" content="$description-meta$">
+  <meta property="og:description" content="$description-meta$">
+  $endif$
+  <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
+  $if(title-prefix)$<meta property="og:site_name" content="$title-prefix$">$endif$
+  <meta property="og:title" content="$pagetitle$">
+
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
+  <link rel="stylesheet" href="academicons/css/academicons.min.css">
+  $for(css)$
+  <link rel="stylesheet" href="$css$">
+  $endfor$
+  $if(disable-dark-mode)$$else$
+  <link rel="stylesheet" href="dark.css">
+  $endif$
+  $if(og-picture)$
+  <meta property="og:image" content="$og-picture$">
+  $endif$
+  $if(og-url)$
+  <meta property="og:url" content="$og-url$">
+  $endif$
+  $for(header-includes)$
+    $header-includes$
+  $endfor$
+  $if(math)$
+  $if(mathjax)$
+  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+  $endif$
+    $math$
+  $endif$
+  <!-- Favicon -->
+  <link rel="icon" type="image/png" href="img/favicon-96x96.png" sizes="96x96" />
+  <link rel="shortcut icon" href="img/favicon-96x96.png" />
+  <link rel="apple-touch-icon" sizes="180x180" href="img/favicon-96x96.png" />
+  <link rel="manifest" href="img/site.webmanifest" />
+</head>
+<body>
+  $if(side-by-side)$
+  <header class="split">
+  $else$
+  <header>
+  $endif$
+    $if(picture)$
+      $if(picture-round)$
+      <img class="round-image" src="$picture$" alt="My picture">
+      $else$
+      <img src="$picture$" alt="My picture">
+      $endif$
+    $endif$
+    <aside>
+      $if(author)$
+      <h1>$author$</h1>
+      $endif$
+      $if(shortbio)$
+      <h2>$shortbio$</h2>
+      $endif$
+      $if(pronouns)$
+      <p>$pronouns$</p>
+      $endif$
+      $if(location)$
+      <p><i class="fa-solid fa-location-dot fa-fw"></i> $location$</p>
+      $endif$
+      $if(email)$
+      $for(email)$
+      <p>
+        $if(clickable-email)$<a href="mailto:$email$">$endif$
+          <i class="fa-regular fa-envelope fa-fw"></i> <code>$email$</code>
+        $if(clickable-email)$</a>$endif$
+      </p>
+      $endfor$
+      $endif$
+      <div class="icons">
+        $if(orcid)$
+        <a href="https://orcid.org/$orcid$" title="ORCID">
+          <i class="ai ai-orcid ai-fw icon-pad-right"></i>
+        </a>
+        $endif$
+        $if(dblp)$
+        <a href="$dblp$" title="DBLP">
+          <i class="ai ai-dblp ai-fw icon-pad-right"></i>
+        </a>
+        $endif$
+        $if(hal)$
+        <a href="$hal$" title="HAL">
+          <i class="ai ai-hal ai-fw icon-pad-right"></i>
+        </a>
+        $endif$
+        $if(scholar)$
+        <a href="$scholar$" title="Google Scholar">
+          <i class="ai ai-google-scholar ai-fw icon-pad-right"></i>
+        </a>
+        $endif$
+        $if(github)$
+        <a href="https://github.com/$github$" title="Github: $github$">
+          <i class="fa-brands fa-github fa-fw"></i>
+        </a>
+        $endif$
+        $if(gitlab)$
+        <a href="https://gitlab.com/$gitlab$" title="Gitlab">
+          <i class="fa-brands fa-gitlab fa-fw"></i>
+        </a>
+        $endif$
+        $if(bitbucket)$
+        <a href="$bitbucket$" title="BitBucket">
+          <i class="fa-brands fa-bitbucket fa-fw"></i>
+        </a>
+        $endif$
+        $if(mastodon)$
+        <a href="$mastodon$" title="Mastodon">
+          <i class="fa-brands fa-mastodon fa-fw"></i>
+        </a>
+        $endif$
+        $if(bluesky)$
+        <a href="$bluesky$" title="BlueSky">
+          <i class="fa-brands fa-bluesky fa-fw"></i>
+        </a>
+        $endif$
+        $if(linkedin)$
+        <a href="$linkedin$" title="LinkedIn">
+          <i class="fa-brands fa-linkedin fa-fw"></i>
+        </a>
+        $endif$
+        $if(discord)$
+        <a href="https://discord.com/channels/@me" title="Discord: @$discord$">
+          <i class="fa-brands fa-discord fa-fw"></i>
+        </a>
+        $endif$
+        $if(git)$
+        <a href="$git$" title="Git">
+          <i class="fa-brands fa-git-alt fa-fw"></i>
+        </a>
+        $endif$
+      </div>
+    </aside>
+  </header>
+  $if(toc)$
+  <nav>
+    $table-of-contents$
+  </nav>
+  $endif$
+  <main>
+    $for(include-before)$
+    $include-before$
+    $endfor$
+
+    $body$
+
+    $for(include-after)$
+    $include-after$
+    $endfor$
+  </main>
+  $if(footer)$
+  <footer>
+    $footer$
+
+    <span class="lastupdate">Last updated: $date$</span>
+  </footer>
+  $endif$
+</body>
+</html>

style.css

@@ -0,0 +1,372 @@
+:root {
+  --bg: #fbfdff;
+  --headerbg: transparent;
+  --navbg: transparent;
+  --mainbg: transparent;
+  --footerbg: transparent;
+  --navlink: #56473d;
+  --navborder: #56473d;
+}
+
+/*** GENERAL ***/
+
+* {
+  box-sizing: border-box;
+}
+
+body, div, header, footer, main, h1, h2, h3, h4, h5, h6, img, p {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  min-height: 100%;
+}
+
+body {
+  background: var(--bg);
+  min-height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 12pt;
+  line-height: 1.6;
+  padding: 1.5rem;
+  word-wrap: break-word;
+}
+
+a {
+  color: #3a6eb1;
+  text-decoration: none;
+}
+
+a:active, a:hover {
+  color: #71acf8;
+  outline: 0;
+}
+
+ul {
+  padding-left: 20px;
+}
+
+/*** HEADER ***/
+
+header {
+  max-width: 920px;
+  width: auto;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  /* padding: 15px; */
+  background: var(--headerbg);
+  gap: 5px;
+}
+
+header img {
+  /* flex: 1; */
+  max-width: 200px;
+}
+
+header h1 {
+  text-align: center;
+}
+
+header h2 {
+  font-size: medium;
+  text-align: center;
+}
+
+header p {
+  margin: 0;
+  text-align: center;
+}
+
+header div.icons {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+}
+
+header div.icons a {
+  font-size: x-large;
+}
+
+header div.icons a[title] {
+  position: relative;
+}
+
+header div.icons a:hover[title]::after {
+  content: attr(title);
+  display: inline-block;
+  padding: 0.2em 0.6em;
+  white-space: nowrap;
+  background-color: #555;
+  color: #fff;
+  font-style: normal;
+  font-family: sans-serif;
+  font-size: 0.8em;
+  position: absolute;
+  top: 170%;
+  left: 50%;
+  transform: translate(-50%, -1em);
+  z-index: 1;
+}
+
+/*** NAV ***/
+
+nav {
+  max-width: 920px;
+  width: auto;
+  margin: auto;
+  padding: 15px;
+  background: var(--navbg);
+  border-bottom: 1px solid var(--navborder);
+  padding-bottom: 30px;
+}
+
+nav ul {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  gap: 15px;
+}
+
+nav ul li {
+  list-style-type: none;
+}
+
+nav ul li a {
+  font-size: large;
+  color: var(--navlink);
+  border-bottom: 3px dotted var(--navlink);
+  padding-bottom: 0.2em;
+  margin: 0.3em;
+}
+
+nav ul li a:hover {
+  color: var(--navlink);
+  border-bottom: 3px solid var(--navlink);
+}
+
+/*** MAIN ***/
+
+main {
+  width: auto;
+  margin: auto;
+  max-width: 920px;
+  background: var(--mainbg);
+  /* padding: 15px; */
+  padding-top: 30px;
+}
+
+main p {
+  margin-bottom: 6px;
+}
+
+main h1, main h2 {
+  margin: 15px 0;
+}
+
+main h3, main h4, main h5, main h6 {
+  margin-bottom: 6px;
+}
+
+/*** FOOTER ***/
+
+footer {
+  width: auto;
+  margin: auto;
+  max-width: 920px;
+  background: var(--footerbg);
+  /* padding: 15px; */
+  padding-top: 30px;
+  border-top: 1px solid var(--navborder);
+}
+
+/* KBD (keyboard) */
+
+kbd {
+  background-color: #eee;
+  border-radius: 3px;
+  border: 1px solid #b4b4b4;
+  box-shadow:
+    0 1px 1px rgba(0, 0, 0, 0.2),
+    0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
+  color: #333;
+  display: inline-block;
+  font-size: 0.85em;
+  font-weight: 700;
+  line-height: 1;
+  padding: 2px 4px;
+  white-space: nowrap;
+}
+
+/* ALERTS */
+
+div.tip {
+  border-left: 4px solid rgb(48, 148, 48);
+  padding-left: 10px;
+}
+
+div.tip > div.title p {
+  color: rgb(48, 148, 48);
+  font-weight: bold;
+}
+
+div.tip > div.title p::before {
+  font-family: "Font Awesome 6 Free";
+  content: '\f0eb';
+  margin-right: 4px;
+}
+
+div.important {
+  border-left: 4px solid rgb(115, 32, 136);
+  padding-left: 10px;
+}
+
+div.important > div.title p {
+  color: rgb(115, 32, 136);
+  font-weight: bold;
+}
+
+div.important > div.title p::before {
+  font-family: "Font Awesome 6 Free";
+  content: '\f27a';
+  margin-right: 4px;
+}
+
+div.warning {
+  border-left: 4px solid rgb(233, 170, 46);
+  padding-left: 10px;
+}
+
+div.warning > div.title p {
+  color: rgb(233, 170, 46);
+  font-weight: bold;
+}
+
+div.warning > div.title p::before {
+  font-family: "Font Awesome 6 Free";
+  content: '\f071';
+  margin-right: 4px;
+}
+
+div.caution {
+  border-left: 4px solid rgb(233, 46, 83);
+  padding-left: 10px;
+}
+
+div.caution > div.title p {
+  color: rgb(233, 46, 83);
+  font-weight: bold;
+}
+
+div.caution > div.title p::before {
+  font-family: "Font Awesome 6 Free";
+  content: '\f06a';
+  margin-right: 4px;
+}
+
+div.note {
+  border-left: 4px solid rgb(46, 93, 233);
+  padding-left: 10px;
+}
+
+div.note > div.title p {
+  color: rgb(46, 93, 233);
+  font-weight: bold;
+}
+
+div.note > div.title p::before {
+  font-family: "Font Awesome 6 Free";
+  content: '\f05a';
+  margin-right: 4px;
+}
+
+/* CLASSES */
+
+.round-image {
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+section.paper {
+  border-left: 4px solid rgb(102, 102, 110);
+  padding-left: 10px;
+  margin-bottom: 10px;
+}
+
+section.paper h3 {
+  margin: 0;
+}
+
+section.paper p {
+  color: rgb(136, 136, 136);
+  margin: 0;
+}
+
+div.files {
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 5px 0;
+}
+
+div.files a {
+  border-radius: 5px;
+  padding: 4px;
+  margin-right: 5px;
+  background: #e5e7e8;
+  color: #343d44;
+  font-size: small;
+}
+
+div.files a:hover {
+  background: #91c3ea;
+  text-decoration: none;
+}
+
+div.awards {
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 5px 0;
+}
+
+div.awards span {
+  border-radius: 5px;
+  padding: 4px;
+  margin-right: 5px;
+  background: #F6ECD0;
+  color: #CF9C11;
+}
+
+span.lastupdate {
+  color: #9e9d9d;
+}
+
+@media screen and (min-width: 1000px) {
+  header.split {
+    flex-direction: row;
+    gap: 2em;
+  }
+
+  header.split h1, header.split h2, header.split p {
+    text-align: left;
+  }
+
+  header div.icons {
+    justify-content: left;
+  }
+}