:root {
 --white: rgb(248, 245, 245);
 --black: rgba(17, 17, 17, 1);
 --light-grey: rgba(250, 250, 250, 1);
 --background-grey: rgb(235, 235, 235);
 --pink: rgba(238, 107, 255, 1);
 --serif: Fanwood, serif;
 --sans: "Inter", sans-serif;
 --system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 --email-button-padding: .2em 3em 1em 3em;
 --email-button-bg: #FFFFFF;
 --email-button-shadow: 0 0 10px 0 rgba(0,0,0,0.11);
 --email-button-shadow-night: 0 0 10px 0 rgba(210, 210, 210, 0.181);
 --email-button-radius: 26.5px;
 --email-button-font-size: .8rem;
 --icon-padding-right: 5px;
 --icon-top-position: 7px;
}


html {
 font-size: 100%;
 scroll-behavior: smooth;
 scroll-snap-align: start;
 scroll-padding-top:auto;
}

body {
 font-family: var(--sans);
 color: var(--black);
 background-color: var(--white);
 line-height: 1.45;
 font-weight:400;
 width: min(1200px, calc(50% + 300px));
 padding:2vh 1vw 2vh 2vw;
 font-size: clamp(.8rem, 4.8vw, 1.1rem);
}

section {
 max-width: 65ch;
 counter-reset: footnotes;
}

p {
 margin:0;
 display: inline;
 font-feature-settings: "liga", "clig", "kern", "lnum";
}

p:after {
 content: "¶";
 display: inline-block;
 padding:0 .2em;
}

section p:nth-child(5):after {
 content: "";
}

footer {
  position:fixed;
  bottom:0px;
  font-size: .8rem;
  color:#bbbbbb;
  font-weight: 300;
  background-color: var(--white);
  padding: 2vh 1vw calc(2vh + 8px) 0;
  width: 100%;
}

/* Link styles */

a {
 text-decoration: underline;
 text-decoration-thickness: 1px;
 color: var(--black);
 /*transition: text-decoration-thickness .2s ease-in-out;*/
}

a:hover {
 color: var(--black);
 outline: none; 
 text-decoration-thickness: 2px;
}

footer a {
  color:#c2c2c2;
  text-decoration: none;
}

/* Text selection */

::selection {
 background-color: var(--black);
 color: var(--white);
 -webkit-text-fill-color: var(--white);
}

/*  Visually hidden accessible content */

.visually-hidden {
 position: absolute;
 clip: rect(0 0 0 0);
 visibility: hidden;
 opacity: 0;
}

/* Small mobile adjustments  */

@media only screen and (max-width: 860px) {
 body {
 width: auto;
 line-height: 1.6rem;
 }

}

/* Small mobile adjustments  */
@media (max-width: 600px) {
  footer {
  position: relative;
  margin-top: 2rem;
  padding-bottom: 0;
 }
}

/* Night mode styles */
@media (prefers-color-scheme: dark) {
 :root {
   --white: rgba(17, 17, 17, 1);
   --black: rgb(248, 245, 245);
   --background-grey: rgb(35, 35, 35);
   --light-grey: rgba(50, 50, 50, 1);
 }

 body {
   background-color: var(--background-grey);
   color: var(--black);
 }

 a {
   color: var(--black);
 }

 a:hover {
   color: var(--black);
 }

 footer {
  background: var(--background-grey);
 }
}