<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* CSS styles for the homepage */
/* For the curious folks, yes, this is all hand-crafted HTML and CSS. Keep in mind I am terrible at this! */

:root {
  --color-bg: rgb(99, 212, 204);
  --color-fg: rgb(0, 0, 0);

  font-size: 100%; /* https://adrianroselli.com/2019/12/responsive-type-and-zoom.html */
  --font-size: 1.3rem;
  --ratio: 1.333; /* https://www.modularscale.com */
  --h4: calc(var(--font-size) * var(--ratio));
  --h3: calc(var(--h4) * var(--ratio));
  --h2: calc(var(--h3) * var(--ratio));
  --h1: calc(var(--h2) * var(--ratio) * var(--ratio));
  --small: 0.975rem;
  --smaller: 0.832rem;
  --bigger: 1.3rem;

  --bold: 900;
}

@supports (color: color(display-p3 1 1 1)) {
  /* Apple devices natively support more colors (P3 color space) */
  /*  so let's make the colors even prettier for iOS, iPadOS, and macOS users */
  :root {
    --color-bg: color(display-p3 0.179 0.875 0.821);
    --color-fg: color(display-p3 0.0 0.0 0.0);
  }
}



/*

RRRRRRRRRRRRRRRRR  EEEEEEEEEEEEEEEEEEEEEE  SSSSSSSSSSSSSSSEEEEEEEEEEEEEEEEEEEEETTTTTTTTTTTTTTTTTTTTTTT  SSSSSSSSSSSSSSS
R::::::::::::::::R E::::::::::::::::::::ESS:::::::::::::::E::::::::::::::::::::T:::::::::::::::::::::TSS:::::::::::::::S
R::::::RRRRRR:::::RE::::::::::::::::::::S:::::SSSSSS::::::E::::::::::::::::::::T:::::::::::::::::::::S:::::SSSSSS::::::S
RR:::::R     R:::::EE::::::EEEEEEEEE::::S:::::S     SSSSSSEE::::::EEEEEEEEE::::T:::::TT:::::::TT:::::S:::::S     SSSSSSS
  R::::R     R:::::R E:::::E       EEEEES:::::S             E:::::E       EEEEETTTTTT  T:::::T  TTTTTS:::::S
  R::::R     R:::::R E:::::E            S:::::S             E:::::E                    T:::::T       S:::::S
  R::::RRRRRR:::::R  E::::::EEEEEEEEEE   S::::SSSS          E::::::EEEEEEEEEE          T:::::T        S::::SSSS
  R:::::::::::::RR   E:::::::::::::::E    SS::::::SSSSS     E:::::::::::::::E          T:::::T         SS::::::SSSSS
  R::::RRRRRR:::::R  E:::::::::::::::E      SSS::::::::SS   E:::::::::::::::E          T:::::T           SSS::::::::SS
  R::::R     R:::::R E::::::EEEEEEEEEE         SSSSSS::::S  E::::::EEEEEEEEEE          T:::::T              SSSSSS::::S
  R::::R     R:::::R E:::::E                        S:::::S E:::::E                    T:::::T                   S:::::S
  R::::R     R:::::R E:::::E       EEEEEE           S:::::S E:::::E       EEEEEE       T:::::T                   S:::::S
RR:::::R     R:::::EE::::::EEEEEEEE:::::SSSSSSS     S:::::EE::::::EEEEEEEE:::::E     TT:::::::TT     SSSSSSS     S:::::S
R::::::R     R:::::E::::::::::::::::::::S::::::SSSSSS:::::E::::::::::::::::::::E     T:::::::::T     S::::::SSSSSS:::::S
R::::::R     R:::::E::::::::::::::::::::S:::::::::::::::SSE::::::::::::::::::::E     T:::::::::T     S:::::::::::::::SS
RRRRRRRR     RRRRRREEEEEEEEEEEEEEEEEEEEEESSSSSSSSSSSSSSS  EEEEEEEEEEEEEEEEEEEEEE     TTTTTTTTTTT      SSSSSSSSSSSSSSS

First up, making all the browsers behave the same by default

*/

*, *::before, *::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html, body {
  height: 100%;
  margin: 0 auto;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
p[lang="en"] {
  text-align: justify;
  hyphens: auto;
}

/*

 FFFFFFFFFFFFFFFFFFFFFF    OOOOOOOOO    NNNNNNNN        NNNNNNNTTTTTTTTTTTTTTTTTTTTTTT  SSSSSSSSSSSSSSS
 F::::::::::::::::::::F  OO:::::::::OO  N:::::::N       N::::::T:::::::::::::::::::::TSS:::::::::::::::S
 F::::::::::::::::::::FOO:::::::::::::OON::::::::N      N::::::T:::::::::::::::::::::S:::::SSSSSS::::::S
 FF::::::FFFFFFFFF::::O:::::::OOO:::::::N:::::::::N     N::::::T:::::TT:::::::TT:::::S:::::S     SSSSSSS
   F:::::F       FFFFFO::::::O   O::::::N::::::::::N    N::::::TTTTTT  T:::::T  TTTTTS:::::S
   F:::::F            O:::::O     O:::::N:::::::::::N   N::::::N       T:::::T       S:::::S
   F::::::FFFFFFFFFF  O:::::O     O:::::N:::::::N::::N  N::::::N       T:::::T        S::::SSSS
   F:::::::::::::::F  O:::::O     O:::::N::::::N N::::N N::::::N       T:::::T         SS::::::SSSSS
   F:::::::::::::::F  O:::::O     O:::::N::::::N  N::::N:::::::N       T:::::T           SSS::::::::SS
   F::::::FFFFFFFFFF  O:::::O     O:::::N::::::N   N:::::::::::N       T:::::T              SSSSSS::::S
   F:::::F            O:::::O     O:::::N::::::N    N::::::::::N       T:::::T                   S:::::S
   F:::::F            O::::::O   O::::::N::::::N     N:::::::::N       T:::::T                   S:::::S
 FF:::::::FF          O:::::::OOO:::::::N::::::N      N::::::::N     TT:::::::TT     SSSSSSS     S:::::S
 F::::::::FF           OO:::::::::::::OON::::::N       N:::::::N     T:::::::::T     S::::::SSSSSS:::::S
 F::::::::FF             OO:::::::::OO  N::::::N        N::::::N     T:::::::::T     S:::::::::::::::SS
 FFFFFFFFFFF               OOOOOOOOO    NNNNNNNN         NNNNNNN     TTTTTTTTTTT      SSSSSSSSSSSSSSS


 I'd really like to use system fonts to save energy usage, but the part of me that likes pretty stuff won.
  Fonts are optimized tho!

 */

 @font-face {
   font-family: "IBM Plex Sans";
   src: url("./fonts/IBM/Plex/SansVariable/IBMPlexSansVar-Roman.woff2") format("woff2");
   font-weight: 100 700;
   font-stretch: 85% 100%;
   font-style: normal;
   font-display: swap;
 }

/*

LLLLLLLLLLL                           AAA          YYYYYYY       YYYYYYY    OOOOOOOOO    UUUUUUUU     UUUUUUUTTTTTTTTTTTTTTTTTTTTTTT
L:::::::::L                          A:::A         Y:::::Y       Y:::::Y  OO:::::::::OO  U::::::U     U::::::T:::::::::::::::::::::T
L:::::::::L                         A:::::A        Y:::::Y       Y:::::YOO:::::::::::::OOU::::::U     U::::::T:::::::::::::::::::::T
LL:::::::LL                        A:::::::A       Y::::::Y     Y::::::O:::::::OOO:::::::UU:::::U     U:::::UT:::::TT:::::::TT:::::T
  L:::::L                         A:::::::::A      YYY:::::Y   Y:::::YYO::::::O   O::::::OU:::::U     U:::::UTTTTTT  T:::::T  TTTTTT
  L:::::L                        A:::::A:::::A        Y:::::Y Y:::::Y  O:::::O     O:::::OU:::::D     D:::::U        T:::::T
  L:::::L                       A:::::A A:::::A        Y:::::Y:::::Y   O:::::O     O:::::OU:::::D     D:::::U        T:::::T
  L:::::L                      A:::::A   A:::::A        Y:::::::::Y    O:::::O     O:::::OU:::::D     D:::::U        T:::::T
  L:::::L                     A:::::A     A:::::A        Y:::::::Y     O:::::O     O:::::OU:::::D     D:::::U        T:::::T
  L:::::L                    A:::::AAAAAAAAA:::::A        Y:::::Y      O:::::O     O:::::OU:::::D     D:::::U        T:::::T
  L:::::L                   A:::::::::::::::::::::A       Y:::::Y      O:::::O     O:::::OU:::::D     D:::::U        T:::::T
  L:::::L         LLLLLL   A:::::AAAAAAAAAAAAA:::::A      Y:::::Y      O::::::O   O::::::OU::::::U   U::::::U        T:::::T
LL:::::::LLLLLLLLL:::::L  A:::::A             A:::::A     Y:::::Y      O:::::::OOO:::::::OU:::::::UUU:::::::U      TT:::::::TT
L::::::::::::::::::::::L A:::::A               A:::::A YYYY:::::YYYY    OO:::::::::::::OO  UU:::::::::::::UU       T:::::::::T
L::::::::::::::::::::::LA:::::A                 A:::::AY:::::::::::Y      OO:::::::::OO      UU:::::::::UU         T:::::::::T
LLLLLLLLLLLLLLLLLLLLLLLAAAAAAA                   AAAAAAYYYYYYYYYYYYY        OOOOOOOOO          UUUUUUUUU           TTTTTTTTTTT

*/


body {
  font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
  background: var(--color-bg);
  overscroll-behavior: none;
  width: 100%;
  height: auto;

  display: grid;
  grid-template-columns:
    minmax(1ch, 1fr)
    minmax(21ch, 90ch)
    minmax(1ch, 1fr);
  justify-content: center;
  align-items: center;
  align-content: center;
}

h2 {
  text-align: left;
  font-size: var(--h2);

  border-bottom: 0.5rem solid var(--color-fg);

  margin-left: 0.5rem;
  margin-right: 0.5rem;
  line-height: 1.1em;
  padding-bottom: 0em;
  margin-bottom: 3rem;
}

/*
   ###    ########   #######  ##     ## ########
  ## ##   ##     ## ##     ## ##     ##    ##
 ##   ##  ##     ## ##     ## ##     ##    ##
##     ## ########  ##     ## ##     ##    ##
######### ##     ## ##     ## ##     ##    ##
##     ## ##     ## ##     ## ##     ##    ##
##     ## ########   #######   #######     ##

 */


.about {
  grid-column: 2;
}

h1 {
  text-align: left;
  font-size: var(--h1);

  padding-top: 30vh;
  padding-bottom: 30vh;
}

sup {
  vertical-align: super;
  font-size: calc(var(--h1) / 2);
}

.about &gt; h1 &gt; span {
  animation: 3s fancyfont ease-in-out alternate infinite;
}

@keyframes fancyfont {
  0% {
    font-weight: 100;
    font-stretch: 85%;
  }
  100% {
    font-weight: 700;
    font-stretch: 100%;
  }
}


/*

##      ## ########  #### ######## #### ##    ##  ######    ######
##  ##  ## ##     ##  ##     ##     ##  ###   ## ##    ##  ##    ##
##  ##  ## ##     ##  ##     ##     ##  ####  ## ##        ##
##  ##  ## ########   ##     ##     ##  ## ## ## ##   ####  ######
##  ##  ## ##   ##    ##     ##     ##  ##  #### ##    ##        ##
##  ##  ## ##    ##   ##     ##     ##  ##   ### ##    ##  ##    ##
 ###  ###  ##     ## ####    ##    #### ##    ##  ######    ######

*/

.writing {
  grid-column: 2;
  margin-left: 1rem;
}

.writing &gt; p {
  font-size: var(--h3);
  margin-left: 3rem;
  line-height: 3rem;
}

li {
  font-size: var(--h4);
  line-height: 3rem;
  background-color: var(--color-bg);
}
ul {
  padding-left: 7rem;
}
ul li {
  list-style: none;
  margin-bottom: 0.25rem;
}
li.active {
  text-decoration: underline;
}
li &gt; a {
  color: var(--color-fg);

  text-decoration: none;
  border-bottom: 0.1rem solid var(--color-fg);
}
li &gt; a:hover {
  text-decoration: none;
  background-color: var(--color-fg);
  color: var(--color-bg);
}
li &gt; a:hover &gt; * {
  background-color: var(--color-fg);
  color: var(--color-bg);
}


.typefully {
  width: var(--h3);
  display: inline;
}

.typefull {
  fill: var(--color-fg);
}


/*

 ######   #######  ##    ## ########    ###     ######  ########
##    ## ##     ## ###   ##    ##      ## ##   ##    ##    ##
##       ##     ## ####  ##    ##     ##   ##  ##          ##
##       ##     ## ## ## ##    ##    ##     ## ##          ##
##       ##     ## ##  ####    ##    ######### ##          ##
##    ## ##     ## ##   ###    ##    ##     ## ##    ##    ##
 ######   #######  ##    ##    ##    ##     ##  ######     ##

*/


.contact {
  grid-column: 2;
  padding-top: 10vh;
  padding-bottom: 5vh;
}

.socials {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 3ch;
}
.socials &gt; a {
  width: 11ch;
  margin: 3ch;
}
</pre></body></html>