html {
  --bg-second: #fcfcfc;
  --bg-main: #ebebeb;
  --colour-headings: #0077ff;
  --colour-text: #333333;
  --colour-anchor: #ef007c;
  --anchor-external: #cd331f;
  --anchor-filter: grayscale(1);
  --font-size: 18px;
}

html[data-theme="dark"] {
  --bg-main: #0e151c;
  --bg-second: #1e272f;
  --colour-headings: rgb(252, 246, 1, 0.7);
  --colour-text: #b5b5b5;
  --colour-anchor: #e46ec9;
  --anchor-external: rgb(201, 108, 244);
  --anchor-filter: invert(1) sepia(1) brightness(3);
  --font-size: 18px;
}

html.transition,
html.transition *,
html.transition *:before,
html.transition *:after {
  transition: all 750ms !important;
  transition-delay: 0 !important;
}

body {
  display: flex;
  font-family: "Charter", "serif";
  justify-content: center;
  src: url("/fonts/charter_regular.woff") format("woff");
  margin: 0;
  padding: 0;
  background-color: var(--bg-second);
  color: var(--colour-text);
}

.main {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  background-color: var(--bg-main);
  height: 100vh;
  vertical-align: middle;
}

/* Scrollbar magic from https://forum.webflow.com/t/big-white-scrollbars-on-text-overflow/87454/2 */
.main {
  overflow: auto;
  overscroll-behavior: contain;
}
::-webkit-scrollbar {
  border-radius: 1pt;
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
  background: #3494e6; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to bottom,
    var(--bg-main),
    var(--bg-second)
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to bottom,
    var(--bg-main),
    var(--bg-second)
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  border-radius: 15pt;
}
::-webkit-scrollbar-corner {
  background: var(--bg-main);
}

.main article {
  font-size: 20px;
  max-width: 35em;
  min-width: 20em;
  line-height: 1.45;
  margin: 1em;
}
.main article::after {
  content: "";
  display: block;
  padding-bottom: 10vh;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 50%;
  height: auto;
}

nav a {
  display: block;
  font-size: var(--font-size);
}

article svg {
  -webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
  filter: invert(100%);
}

.item {
  /* height: 100px; */
  max-width: 25%;
  margin-right: 1em;
  margin-left: 1em;
  font-size: var(--font-size);
}

.right-bar {
  min-width: 25%;
  height: 100vh;
  overflow-y: auto;
  vertical-align: middle;
  scrollbar-width: none;
}

.item + .item {
  margin-left: 2%;
}

h1,
h2,
h3 {
  font-family: "helvetica", "sans-serif";
  color: var(--colour-headings);
}

a {
  color: var(--anchor-external);
  text-decoration: none;
}

blockquote {
  background-color: var(--bg-second);
  padding: 0.5em;
  border-radius: 10px;
  margin: 0;
}

blockquote p {
  margin: 0;
}

pre {
  overflow-x: scroll;
  vertical-align: middle;
  max-width: 100%;
}

table {
  /* Remove spacing between table cells (from Normalize.css) */
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border: 1px solid #cbcbcb;
  overflow-x: scroll; /*to make ths where the title is really long work*/
  vertical-align: middle;
}

table td,
table th {
  border-left: 1px solid #cbcbcb; /*  inner column border */
  border-width: 0 0 0 1px;
  font-size: var(--font-size);
  margin: auto;
  font-weight: normal;
  padding: 0.5em 1em; /* cell padding */
}

table thead {
  background-color: var(--bg-second);
  color: var(--colour-text);
  text-align: left;
  vertical-align: bottom;
}

/* nth-child selector for modern browsers */
table tr:nth-child(2n) td {
  background-color: var(--bg-second);
}

table tr:hover {
  opacity: 0.85;
}

input[type="search"] {
  background-color: var(--bg-main);
  color: var(--colour-text);
  margin-top: 1em;
  border-radius: 10px;
  border: none;
  padding: 0.5em;
  min-width: 10em;
  font-size: var(--font-size);
}

@media only screen and (max-width: 600px) {
  body {
    display: block;
  }
  nav {
    display: flex;
  }
  nav a {
    font-size: 15px;
    margin-left: 1em;
  }
  img {
    max-width: 80%;
  }
  .jello-horizontal {
    display: none;
  }
  .main {
    justify-content: left;
    overflow: unset;
    height: unset;
  }
  .main article {
    font-size: var(--font-size);
    min-width: 0em;
  }
  .main article::after {
    content: "";
    display: block;
    padding-bottom: 1vh;
  }
  .item {
    max-width: 100vh;
    margin-bottom: 4vh;
  }
  .right-bar {
    height: unset;
  }
  h2 {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
  }
}

@media only screen and (min-width: 1200px) {
  .main article {
    min-width: 34em;
  }
}

.shadow-pop-bl {
  cursor: pointer;
  position: relative;
  margin-top: 1em;
}

.shadow-pop-bl::after {
  background-color: pink;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  transition: transform 250ms;
}

.shadow-pop-bl:hover::after {
  transform: scale(1.1);
}
@-webkit-keyframes color-change-5x {
  0% {
    background: #19dcea;
  }
  25% {
    background: #b22cff;
  }
  50% {
    background: #ea2222;
  }
  75% {
    background: #f5be10;
  }
  100% {
    background: #3bd80d;
  }
}
@keyframes color-change-5x {
  0% {
    background: #19dcea;
  }
  25% {
    background: #b22cff;
  }
  50% {
    background: #ea2222;
  }
  75% {
    background: #f5be10;
  }
  100% {
    background: #3bd80d;
  }
}

.jello-horizontal {
  -webkit-animation: jello-horizontal 0.9s both;
  animation: jello-horizontal 0.9s both;
}

@-webkit-keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

a[href*="https://"]::after
{
  content: "📝";
}

a:hover {
  filter: invert(0.3);
}
a[href*="notes.sinakhalili.com"]::after {
  content: "";
}

/* LOL. Great dev/prod split bro */
a[href*="localhost"],
a[href^="/"],
a[href^="#"],
a[href*="notes.sinakhalili.com"] {
  color: var(--colour-anchor);
}

/* Here's the link styling, taken from: https://github.com/gwern/gwern.net/blob/master/css/links.css */
/* You should probably go there to steal a style sheet instead of here */

/*=--------------------------------------------=*/
/*= Common websites =*/
/*=--------------------------------------------=*/

/* Common style */
a[href*="17th-angel.tumblr.com"]::after,
a[href*="andrewgelman.com"]::after,
a[href*="animenewsnetwork.com"]::after,
a[href*="arstechnica.com"]::after,
a[href*="arxiv.org"]::after,
a[href*="psyarxiv.com"]::after,
a[href*="bbc.com"]::after,
a[href*="bbc.co.uk"]::after,
a[href*="www.cdc.gov"]::after,
a[href*="www.vox.com"]::after,
a[href*="www.vanityfair.com"]::after,
a[href*="www.motherjones.com"]::after,
a[href*="www.edge.org"]::after,
a[href*="bitcointalk.org"]::after,
a[href*="bitcoin.it"]::after,
a[href*="bloomberg.com"]::after,
a[href*="bmj.com"]::after,
a[href*="economist.com"]::after,
a[href*="evageeks.org"]::after,
a[href*="evamonkey.com"]::after,
a[href*="evaotaku.com"]::after,
a[href*="www.fanfiction.net"]::after,
a[href*="fda.gov"]::after,
a[href*="filfre.net"]::after,
a[href*="gainax.co.jp"]::after,
a[href*="goodreads.com"]::after,
a[href*="haskell.org"]::after,
a[href*="harney.com"]::after,
a[href*="justice.gov"]::after,
a[href*="khara.co.jp"]::after,
a[href*="kk.org"]::after,
a[href*="lesswrong.com"]::after,
a[href*="greaterwrong.com"]::after,
a[href*="longbets.org"]::after,
a[href*="longnow.org"]::after,
a[href*="marginalrevolution.com"]::after,
a[href*="medium.com"]::after,
a[href*="maggieappleton.com"]::after,
a[href*="myanimelist.net"]::after,
a[href*="nature.com"]::after,
a[href*="xkcd.com"]::after,
a[href*="rand.org"]::after,
a[href*="link.springer.com"]::after,
a[href*="academic.oup.com"]::after,
a[href*="sagepub.com"]::after,
a[href*="www.cell.com"]::after,
a[href*="onegeek.org"]::after,
a[href*="overcomingbias.com"]::after,
a[href*="pnas.org"]::after,
a[href*="poniesatdawn.bandcamp.com"]::after,
a[href*="predictionbook.com"]::after,
a[href*="r-project.org"]::after,
a[href*="rosettaproject.org"]::after,
a[href*="rstudio.com"]::after,
a[href*="salon.com"]::after,
a[href*="sciencemag.org"]::after,
a[href*="sciencedirect.com"]::after,
a[href*="scholars-stage.blogspot.com"]::after,
a[href*="slate.com"]::after,
a[href*="slatestarcodex"]::after,
a[href*="statmodeling.stat.columbia.edu"]::after,
a[href*="t.umblr.com"]::after,
a[href*="technologyreview.com"]::after,
a[href*="theatlantic.com"]::after,
a[href*="theinterval.org"]::after,
a[href*="theparisreview.org"]::after,
a[href*="tinyletter.com"]::after,
a[href*="www.mail-archive.com"]::after,
a[href*="groups.google.com"]::after,
a[href*="tumblr.com"]::after,
a[href*="tvtropes.org"]::after,
a[href*="urth.net"]::after,
a[href*="www.nber.org"]::after,
a[href*="mlp.fandom.com"]::after,
a[href*="www.wsj.com"]::after,
a[href*="online.wsj.com"]::after,
a[href*="www.google.com"]::after,
a[href*="#google"]::after,
a[href*="#org=google"]::after,
a[href*="wiley.com"]::after,
a[href*="yunnansourcing.com"]::after,
a[href*="yvain"]::after,
a[href*="unsongbook.com"]::after,
a[href*="groups.yahoo.com"]::after,
a[href*="publicdomainreview.org"]::after,
a[href*="meltingasphalt.com"]::after,
a[href*="#facebook"]::after,
a[href*="facebook.com"]::after,
a[href*="imdb.com"]::after,
a[href*="neweva.blog103.fc2.com"]::after {
  font-size: 0.7em;
  font-weight: 600;
  margin: 0 0 0 2px;
  vertical-align: baseline;
  position: relative;
  bottom: 0.4em;
  opacity: 0.83;
}

/* The absolute unit website */
a[href*="wikipedia.org"]::after {
  content: "";
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNTEyIj48cGF0aCBkPSJNNjQwIDUxLjJsLS4zIDEyLjJjLTI4LjEuOC00NSAxNS44LTU1LjggNDAuMy0yNSA1Ny44LTEwMy4zIDI0MC0xNTUuMyAzNTguNkg0MTVsLTgxLjktMTkzLjFjLTMyLjUgNjMuNi02OC4zIDEzMC05OS4yIDE5My4xLS4zLjMtMTUgMC0xNS0uM0MxNzIgMzUyLjMgMTIyLjggMjQzLjQgNzUuOCAxMzMuNCA2NC40IDEwNi43IDI2LjQgNjMuNC4yIDYzLjdjMC0zLjEtLjMtMTAtLjMtMTQuMmgxNjEuOXYxMy45Yy0xOS4yIDEuMS01Mi44IDEzLjMtNDMuMyAzNC4yIDIxLjkgNDkuNyAxMDMuNiAyNDAuMyAxMjUuNiAyODguNiAxNS0yOS43IDU3LjgtMTA5LjIgNzUuMy0xNDIuOC0xMy45LTI4LjMtNTguNi0xMzMuOS03Mi44LTE2MC05LjctMTcuOC0zNi4xLTE5LjQtNTUuOC0xOS43VjQ5LjhsMTQyLjUuM3YxMy4xYy0xOS40LjYtMzguMSA3LjgtMjkuNCAyNi4xIDE4LjkgNDAgMzAuNiA2OC4xIDQ4LjEgMTA0LjcgNS42LTEwLjggMzQuNy02OS40IDQ4LjEtMTAwLjggOC45LTIwLjYtMy45LTI4LjYtMzguNi0yOS40LjMtMy42IDAtMTAuMy4zLTEzLjYgNDQuNC0uMyAxMTEuMS0uMyAxMjMuMS0uNnYxMy42Yy0yMi41LjgtNDUuOCAxMi44LTU4LjEgMzEuN2wtNTkuMiAxMjIuOGM2LjQgMTYuMSA2My4zIDE0Mi44IDY5LjIgMTU2LjdMNTU5LjIgOTEuOGMtOC42LTIzLjEtMzYuNC0yOC4xLTQ3LjItMjguM1Y0OS42bDEyNy44IDEuMS4yLjV6Ii8+PC9zdmc+");
  background-repeat: no-repeat;
  background-size: 0.75em;
  background-position: right 1px top;
  width: 0.825em;
  height: 0.825em;
  display: inline-block;
  vertical-align: baseline;
  opacity: 0.9;
  filter: var(--anchor-filter);
  -webkit-filter: var(--anchor-filter);
}

/* Google searches, other tools; note that there are many Google subdomains, which we may wish to iconify differently, so we narrow down with just 'www' */
a[href*="https://google.com"]::after,
/* Google Brain doesn't have any consistent or recognizable logo, don't bother trying to replicate one of the dots (no one will recognize it); use 'GB' would not be a bad idea, but I suspect that would also confuse people. So, like using 'F' for Facebook/FAIR research, reusing the 'G' is the least bad option. */
a[href*="#google"]::after,
a[href*="#org=google"]::after,
a[href*="#google"][href*="arxiv.org"]::after, /* override the default Arxiv selector */
a[href*="#org=google"][href*="arxiv.org"]::after,
a[href*='docs/.*/*.pdf#.*google']::after,
a[href*='docs/.*/*.pdf#org=google']::after {
  /* override the default PDF selector */
  opacity: 0.73;
  font-size: 70%;
  margin-left: 0.25em;
  content: "𝐆";
  filter: var(--anchor-filter);
  -webkit-filter: var(--anchor-filter);
}

/* GoodReads: logo doesn't make sense as a grayscale */
a[href*="goodreads.com"]::after {
  content: "GR";
  filter: var(--anchor-filter);
  -webkit-filter: var(--anchor-filter);
}

/* IMDb: I had to do it to em' */
a[href*="imdb.com"]::after {
  content: "IMDb";
  font-family: Helvetica, sans-serif;
  filter: var(--anchor-filter);
  -webkit-filter: var(--anchor-filter);
}

/* ArXiv: Chi (their logo is too bizarre & off-putting to use, in addition to not working in monochrome) */
a[href*="arxiv.org"]::after,
a[href$="arxiv.org/pdf/.*\.pdf#page=.*"]::after {
  content: "\1D6D8"; /* Mathematical Bold Small Chi '𝛘' (U+1D6D8); bold makes it show up better when tiny */
  opacity: 0.77;
  bottom: 0.4em;
  font-size: 80%;
  background-image: none;
  filter: var(--anchor-filter);
  -webkit-filter: var(--anchor-filter);
}

/* TV Tropes: their lampshade icon is unrecognizable & hard to see small */
a[href*="tvtropes.org"]::after {
  content: "TV";
  filter: var(--anchor-filter);
  -webkit-filter: var(--anchor-filter);
}

/* Johnny vonny would not approve */
a[href*="rand.org"]::after {
  content: "RAND";
  font-size: 0.55em;
  width: 1.5em;
  display: inline-block;
  overflow-wrap: break-word;
  font-family: "Lucida Sans Unicode", "Source Sans Pro", Helvetica,
    "Trebuchet MS", sans-serif;
  line-height: 0.75;
  text-align: center;
  position: relative;
  bottom: 0.3em;
  left: 0.1em;
  opacity: 0.9;
  font-weight: bold;
  filter: var(--anchor-filter);
  -webkit-filter: var(--anchor-filter);
}

/* Google Scholar */
a[href*="scholar.google.com"]::after {
  background-image: url("/static/img/icons/google-scholar.svg");
  filter: var(--anchor-filter);
  -webkit-filter: var(--anchor-filter);
}
a[href*="scholar.google.com"]:hover::after {
  opacity: 0.4;
}
a[href*="scholar.google.com"]::after {
  content: "";
  display: inline-block;
  position: static;
  background-repeat: no-repeat;
  background-position: bottom center;
  height: 1em;
  width: 1em;
  margin: 0 0 0 2px;
  opacity: 0.6;
}

/*  Gwern's website! */
a[href*="gwern.net"]::after {
  content: "\1D50A"; /* '𝔊' Gothic G / MATHEMATICAL FRAKTUR CAPITAL G (U+1D50A) */
  margin: 0 0 0 2px;
  vertical-align: baseline;
  position: relative;
  bottom: 0.15em;
  opacity: 0.8;
  filter: var(--anchor-filter);
  -webkit-filter: var(--anchor-filter);
}

/* YouTube/Bandcamp/SoundCloud links */
a[href*="youtube.com"]::after,
a[href*="youtu.be"]::after,
a[href*="soundcloud.com"]::after,
a[href*="bandcamp.com"]::after {
  background-image: url("/static/img/icons/video.svg");
  filter: var(--anchor-filter);
  -webkit-filter: var(--anchor-filter);
}
a[href*="youtube.com"]:hover::after,
a[href*="youtu.be"]:hover::after,
a[href*="soundcloud.com"]:hover::after,
a[href*="bandcamp.com"]:hover::after {
  opacity: 0.2;
  font-size: 0.8em;
}
a[href*="youtube.com"]::after,
a[href*="youtu.be"]::after,
a[href*="soundcloud.com"]::after,
a[href*="bandcamp.com"]::after {
  content: "";
  display: inline-block;
  position: static;
  background-repeat: no-repeat;
  background-position: bottom center;
  height: 1em;
  width: 1em;
  margin: 0 0 0 3px;
  opacity: 0.55;
}

/* Github; I exclude github.io because that's blogs */
a[href*="github.com"]::after {
  background-image: url("/static/img/icons/github.svg");
  filter: var(--anchor-filter);
  -webkit-filter: var(--anchor-filter);
}
a[href*="github.com"]:hover::after {
  opacity: 0.3;
}
a[href*="github.com"]::after {
  content: "";
  display: inline-block;
  position: static;
  background-repeat: no-repeat;
  background-position: bottom center;
  height: 0.75em;
  width: 0.75em;
  margin: 0 0 2px 3px;
  opacity: 0.66;
}

a[href*='webcitation.org'   ]::after,
a[href*='mementoweb.org'    ]::after,
a[href*='archive.org'       ]::after, /* primary user: web.archive.org */
a[href*='archive-it.org'    ]::after,
a[href*='archiveteam.org'   ]::after,
a[href*='waybackmachine.org']::after {
  /* secondary user: replay.waybackmachine.org */
  background-image: url("/static/img/icons/internetarchive.svg");
  filter: var(--anchor-filter);
  -webkit-filter: var(--anchor-filter);
}
a[href*="webcitation.org"]:hover::after,
a[href*="mementoweb.org"]:hover::after,
a[href*="archive.org"]:hover::after,
a[href*="archive-it.org"]:hover::after,
a[href*="archiveteam.org"]:hover::after,
a[href*="waybackmachine.org"]:hover::after {
  opacity: 0.3;
}
a[href*="webcitation.org"]::after,
a[href*="mementoweb.org"]::after,
a[href*="archive.org"]::after,
a[href*="archive-it.org"]::after,
a[href*="archiveteam.org"]::after,
a[href*="waybackmachine.org"]::after {
  content: "";
  display: inline-block;
  position: static;
  background-repeat: no-repeat;
  background-position: bottom center;
  height: 0.75em;
  width: 0.75em;
  margin: 0 0 2px 3px;
  opacity: 0.6;
}

/* Twitter */
a[href*="twitter.com"]::after,
a[href*="nitter.net"]::after {
  background-image: url("/static/img/icons/twitter.svg");
  filter: var(--anchor-filter);
  -webkit-filter: var(--anchor-filter);
}
a[href*="twitter.com"]:hover::after,
a[href*="nitter.net"]:hover::after {
  opacity: 0.3;
}
a[href*="twitter.com"]::after,
a[href*="nitter.net"]::after {
  content: "";
  display: inline-block;
  position: static;
  background-repeat: no-repeat;
  background-position: bottom center;
  height: 0.75em;
  width: 0.75em;
  margin: 0 0 2px 4px;
  opacity: 0.5;
}

/*=--------------------------------------------=*/
/*= Blogs and People =*/
/*=--------------------------------------------=*/

/* PG/HN/YC (shared logo): */
a[href*="paulgraham.com"]::after,
a[href*="ycombinator.com"]::after {
  /* primary user: news.ycombinator.com */
  background-image: url("/static/img/icons/hn.svg");
  filter: var(--anchor-filter);
  -webkit-filter: var(--anchor-filter);
}
a[href*="paulgraham.com"]:hover::after,
a[href*="ycombinator.com"]:hover::after {
  opacity: 0.2;
}
a[href*="paulgraham.com"]::after,
a[href*="ycombinator.com"]::after {
  content: "";
  display: inline-block;
  position: static;
  background-repeat: no-repeat;
  background-position: bottom center;
  height: 0.75em;
  width: 0.75em;
  margin: 0 2px 0 2px;
  opacity: 0.44;
}

/* XKCD babyyy */
a[href*="xkcd.com"]::after {
  content: "XKCD";
  font-size: 0.55em;
  width: 1.5em;
  display: inline-block;
  overflow-wrap: break-word;
  font-family: "Lucida Sans Unicode", "Source Sans Pro", Helvetica,
    "Trebuchet MS", sans-serif;
  line-height: 0.75;
  text-align: center;
  position: relative;
  bottom: 0.3em;
  left: 0.1em;
  opacity: 0.85;
  font-weight: bold;
  filter: var(--anchor-filter);
  -webkit-filter: var(--anchor-filter);
}

/* Josh Comeau's personal website looks like a divet and a W */
a[href*="joshwcomeau.com"]::after {
  content: "w^";
  font-size: 0.55em;
  width: 1em;
  display: inline-block;
  overflow-wrap: break-word;
  font-family: "Lucida Sans Unicode", "Source Sans Pro", Helvetica,
    "Trebuchet MS", sans-serif;
  line-height: 1;
  text-align: center;
  position: relative;
  bottom: 0.3em;
  left: 0.1em;
  opacity: 0.85;
  font-weight: bold;
  filter: var(--anchor-filter);
  -webkit-filter: var(--anchor-filter);
}

/* Kevin Simler's Melting Asphalt blog */
a[href*="meltingasphalt.com"]::after {
  content: "▲▲";
  font-size: 60%;
  bottom: 0.5em;
  letter-spacing: -0.1em;
  filter: var(--anchor-filter);
  -webkit-filter: var(--anchor-filter);
}

/* Maggie Appleton is just an M */
a[href*="maggieappleton.com"]::after {
  content: "M";
  font-family: "Lucida Sans Unicode", "Source Sans Pro", Helvetica,
    "Trebuchet MS", sans-serif;
  font-weight: bolder;
  filter: var(--anchor-filter);
  -webkit-filter: var(--anchor-filter);
}

/* SSC logo too bad to use */
a[href*="yvain"]::after,
a[href*="slatestarcodex"]::after {
  /* primary user: slatestarcodex.com */
  content: "SSC";
  filter: var(--anchor-filter);
  -webkit-filter: var(--anchor-filter);
}
/* SSC's book */
a[href*="unsongbook.com"]::after {
  content: "א";
  filter: var(--anchor-filter);
  -webkit-filter: var(--anchor-filter);
}

/* OB logo too bad to use */
a[href*="overcomingbias.com"]::after {
  content: "OB";
  filter: var(--anchor-filter);
  -webkit-filter: var(--anchor-filter);
}

/* LW logo is just a colored 'LW', so no point in converting */
a[href*="greaterwrong.com"]::after,
a[href*="lesswrong.com"]::after {
  /* other user: wiki.lesswrong.com */
  content: "LW";
  filter: var(--anchor-filter);
  -webkit-filter: var(--anchor-filter);
}

/* ======================================= */
/* CSS for file links. This is copypasta */
/* ======================================= */

/*  PDFs */
a[href$='.pdf' i]::after,
a[href$='/pdf' i]::after,
a[href$='type=pdf' i]::after,
a[href*='.pdf#' i]::after,
a[href*='pdfs.semanticscholar.org' i]::after,
a[href$='.epub' i]::after,
a[href*='citeseerx.ist.psu.edu' i]::after,
a[href*='eprint.iacr.org' i]::after,
/*  Textfiles */
a[href$='.opml' i]::after,
a[href$='.txt' i]::after,
a[href$='.xml' i]::after,
/*  Code */
a[href$='.css' i]::after,
a[href$='.hs' i]::after,
a[href$='.js' i]::after,
a[href$='.json' i]::after,
a[href$='.jsonl' i]::after,
a[href^="."][href$='.php' i]::after,
a[href$='.sh' i]::after,
a[href$='.R' i]::after,
a[href$='.patch' i]::after,
a[href$='.diff' i]::after,
/*  Word */
a[href$='.doc' i]::after,
a[href$='.docx' i]::after,
a[href*='docs.google.com' i]::after,
/*  Excel */
a[href$='.xls' i]::after,
a[href$='.xlsx' i]::after,
a[href$='.ods' i]::after,
/*  CSV */
a[href$='.csv' i]::after,
/*  Images */
a[href$='.gif' i]::after,
a[href$='.bmp' i]::after,
a[href$='.ico' i]::after,
a[href$='.jpg' i]::after,
a[href$='.jpeg' i]::after,
a[href$='.png' i]::after,
a[href$='.svg' i]::after,
a[href$='.xcf' i]::after,
a[href*='imgur.com']::after,
/*  Audio */
a[href$='.mp3' i]::after,
a[href$='.wav' i]::after,
a[href$='.flac' i]::after,
a[href$='.ogg' i]::after,
a[href$='.rm' i]::after,
/*  Video */
a[href$='.swf' i]::after,
a[href$='.avi' i]::after,
a[href$='.mp4' i]::after,
a[href$='.webm' i]::after,
/*  Archives */
a[href$='.tar' i]::after,
a[href$='.zip' i]::after,
a[href$='.xz'  i]::after,
a[href$='.img' i]::after,
a[href$='.bin' i]::after,
a[href$='.pkl' i]::after,
a[href$='.onnx' i]::after,
a[href$='.pt' i]::after,
/*  Misc */
a[href$='.ebt' i]::after,
a[href$='.mdb' i]::after,
a[href$='.mht' i]::after,
a[href$='.ttf' i]::after {
  content: "";
  display: inline-block;
  position: static;
  background-repeat: no-repeat;
  background-position: bottom center;
  height: 0.75em;
  width: 0.75em;
  margin: 0 0 0 2px;
  opacity: 0.49;
  filter: var(--anchor-filter);
  -webkit-filter: var(--anchor-filter);
}
/*  PDFs */
a[href$='.pdf' i]:hover::after,
a[href$='/pdf' i]:hover::after,
a[href$='type=pdf' i]:hover::after,
a[href*='.pdf#' i]:hover::after,
a[href$='.epub' i]:hover::after,
a[href*='pdfs.semanticscholar.org' i]:hover::after,
a[href*='citeseerx.ist.psu.edu' i]:hover::after,
a[href*='eprint.iacr.org' i]:hover::after,
/*  Textfiles */
a[href$='.opml' i]:hover::after,
a[href$='.txt' i]:hover::after,
a[href$='.xml' i]:hover::after,
/*  Code */
a[href$='.css' i]:hover::after,
a[href$='.hs' i]:hover::after,
a[href$='.js' i]:hover::after,
a[href$='.json' i]:hover::after,
a[href$='.jsonl' i]:hover::after,
a[href^="."][href$='.php' i]:hover::after,
a[href$='.sh' i]:hover::after,
a[href$='.R' i]:hover::after,
a[href$='.patch' i]:hover::after,
a[href$='.diff' i]:hover::after,
/*  Word */
a[href$='.doc' i]:hover::after,
a[href$='.docx' i]:hover::after,
a[href*='docs.google.com' i]:hover::after,
/*  Excel */
a[href$='.xls' i]:hover::after,
a[href$='.xlsx' i]:hover::after,
a[href$='.ods' i]:hover::after,
/*  CSV */
a[href$='.csv' i]:hover::after,
/*  Images */
a[href$='.gif' i]:hover::after,
a[href$='.bmp' i]:hover::after,
a[href$='.ico' i]:hover::after,
a[href$='.jpg' i]:hover::after,
a[href$='.jpeg' i]:hover::after,
a[href*='imgur.com']:hover::After,
a[href$='.png' i]:hover::after,
a[href$='.svg' i]:hover::after,
a[href$='.xcf' i]:hover::after,
/*  Audio */
a[href$='.mp3' i]:hover::after,
a[href$='.wav' i]:hover::after,
a[href$='.flac' i]:hover::after,
a[href$='.ogg' i]:hover::after,
a[href$='.rm' i]:hover::after,
/*  Video */
a[href$='.swf' i]:hover::after,
a[href$='.avi' i]:hover::after,
a[href$='.mp4' i]:hover::after,
a[href$='.webm' i]:hover::after,
/*  Archives */
a[href$='.tar' i]:hover::after,
a[href$='.zip' i]:hover::after,
a[href$='.xz'  i]:hover::after,
a[href$='.img' i]:hover::after,
a[href$='.bin' i]:hover::after,
a[href$='.pkl' i]:hover::after,
a[href$='.onnx' i]:hover::after,
a[href$='.pt' i]:hover::after,
/*  Misc */
a[href$='.ebt' i]:hover::after,
a[href$='.mdb' i]:hover::after,
a[href$='.mht' i]:hover::after,
a[href$='.ttf' i]:hover::after {
  opacity: 0.3;
}

/*  PDFs.
    */
a[href$=".pdf" i]::after,
a[href$="/pdf" i]::after,
a[href$="type=pdf" i]::after,
a[href*=".pdf#" i]::after,
a[href$=".epub" i]::after,
a[href*="pdfs.semanticscholar.org" i]::after,
a[href*="citeseerx.ist.psu.edu" i]::after,
a[href*="eprint.iacr.org" i]::after {
  opacity: 0.5;
  /* PDFs are linked on every page, so make another exception */
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48cGF0aCBkPSJNMTgxLjkgMjU2LjFjLTUtMTYtNC45LTQ2LjktMi00Ni45IDguNCAwIDcuNiAzNi45IDIgNDYuOXptLTEuNyA0Ny4yYy03LjcgMjAuMi0xNy4zIDQzLjMtMjguNCA2Mi43IDE4LjMtNyAzOS0xNy4yIDYyLjktMjEuOS0xMi43LTkuNi0yNC45LTIzLjQtMzQuNS00MC44ek04Ni4xIDQyOC4xYzAgLjggMTMuMi01LjQgMzQuOS00MC4yLTYuNyA2LjMtMjkuMSAyNC41LTM0LjkgNDAuMnpNMjQ4IDE2MGgxMzZ2MzI4YzAgMTMuMy0xMC43IDI0LTI0IDI0SDI0Yy0xMy4zIDAtMjQtMTAuNy0yNC0yNFYyNEMwIDEwLjcgMTAuNyAwIDI0IDBoMjAwdjEzNmMwIDEzLjIgMTAuOCAyNCAyNCAyNHptLTggMTcxLjhjLTIwLTEyLjItMzMuMy0yOS00Mi43LTUzLjggNC41LTE4LjUgMTEuNi00Ni42IDYuMi02NC4yLTQuNy0yOS40LTQyLjQtMjYuNS00Ny44LTYuOC01IDE4LjMtLjQgNDQuMSA4LjEgNzctMTEuNiAyNy42LTI4LjcgNjQuNi00MC44IDg1LjgtLjEgMC0uMS4xLS4yLjEtMjcuMSAxMy45LTczLjYgNDQuNS01NC41IDY4IDUuNiA2LjkgMTYgMTAgMjEuNSAxMCAxNy45IDAgMzUuNy0xOCA2MS4xLTYxLjggMjUuOC04LjUgNTQuMS0xOS4xIDc5LTIzLjIgMjEuNyAxMS44IDQ3LjEgMTkuNSA2NCAxOS41IDI5LjIgMCAzMS4yLTMyIDE5LjctNDMuNC0xMy45LTEzLjYtNTQuMy05LjctNzMuNi03LjJ6TTM3NyAxMDVMMjc5IDdjLTQuNS00LjUtMTAuNi03LTE3LTdoLTZ2MTI4aDEyOHYtNi4xYzAtNi4zLTIuNS0xMi40LTctMTYuOXptLTc0LjEgMjU1LjNjNC4xLTIuNy0yLjUtMTEuOS00Mi44LTkgMzcuMSAxNS44IDQyLjggOSA0Mi44IDl6Ii8+PC9zdmc+");
}

/*  Textfiles.
    */
a[href$=".opml" i]::after,
a[href$=".txt" i]::after,
a[href$=".xml" i]::after {
  content: "📄";
}

/*  Code, scripts, etc.
    */
a[href$=".css" i]::after,
a[href$=".hs" i]::after,
a[href$=".js" i]::after,
a[href$=".json" i]::after,
a[href$=".jsonl" i]::after,
a[href$=".R" i]::after,
a[href$=".diff" i]::after,
a[href$=".patch" i]::after,
a[href^="."][href$=".php" i]::after,
a[href$=".sh" i]::after {
  background-image: url("/static/img/icons/code.svg");
}

/*  CSV files.
    */
a[href$=".csv" i]::after {
  background-image: url("/static/img/icons/csv.svg");
}

/*  Images.
    */
a[href$=".gif" i]::after,
a[href$=".bmp" i]::after,
a[href$=".ico" i]::after,
a[href$=".jpg" i]::after,
a[href$=".jpeg" i]::after,
a[href$=".png" i]::after,
a[href$=".svg" i]::after,
a[href$=".xcf" i]::after,
a[href*="imgur.com"]::after {
  background-image: url("/static/img/icons/image.svg");
}