@import url("//fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&family=Lora:ital,wght@0,400;0,700;1,400&family=Oswald:wght@200..700&display=swap");

/* Grayscale Design palette: https://grayscale.design/app?lums=98.00,92.00,82.00,67.00,50.00,33.00,18.00,8.00,2.00,1.00&palettes=%23C14953,%2381C3D7,%23D9DCD6,%234F6272,%23404E5C&filters=0%7C0,0%7C0,0%7C0,0%7C0,0%7C0&names=bittersweet-shimmer,sky-blue,platinum,payne-gray,charcoal&labels=,,,, */
:root {
  --grayscale-50: rgb(253, 253, 253);
  --grayscale-100: rgb(246, 246, 246);
  --grayscale-200: rgb(234, 234, 234);
  --grayscale-300: rgb(214, 214, 214);
  --grayscale-400: rgb(188, 188, 188);
  --grayscale-500: rgb(155, 155, 155);
  --grayscale-600: rgb(118, 118, 118);
  --grayscale-700: rgb(80, 80, 80);
  --grayscale-800: rgb(39, 39, 39);
  --grayscale-900: rgb(25, 25, 25);

  --bittersweet-shimmer-50: rgb(254, 252, 252);
  --bittersweet-shimmer-100: rgb(251, 244, 245);
  --bittersweet-shimmer-200: rgb(246, 230, 231);
  --bittersweet-shimmer-300: rgb(238, 206, 209);
  --bittersweet-shimmer-400: rgb(227, 174, 178);
  --bittersweet-shimmer-500: rgb(214, 133, 140);
  --bittersweet-shimmer-600: rgb(195, 79, 89);
  --bittersweet-shimmer-700: rgb(141, 48, 56);
  --bittersweet-shimmer-800: rgb(69, 24, 27);
  --bittersweet-shimmer-900: rgb(46, 16, 18);

  --sky-blue-50: rgb(251, 253, 254);
  --sky-blue-100: rgb(239, 247, 250);
  --sky-blue-200: rgb(217, 237, 243);
  --sky-blue-300: rgb(182, 220, 232);
  --sky-blue-400: rgb(133, 197, 216);
  --sky-blue-400a: rgba(133, 197, 216, 0.7);
  --sky-blue-500: rgb(70, 167, 196);
  --sky-blue-600: rgb(48, 127, 151);
  --sky-blue-700: rgb(32, 86, 102);
  --sky-blue-800: rgb(16, 42, 50);
  --sky-blue-900: rgb(11, 28, 33);

  --platinum-50: rgb(253, 253, 253);
  --platinum-100: rgb(245, 246, 244);
  --platinum-200: rgb(232, 234, 230);
  --platinum-300: rgb(211, 215, 208);
  --platinum-400: rgb(183, 189, 178);
  --platinum-500: rgb(150, 158, 141);
  --platinum-600: rgb(112, 121, 103);
  --platinum-700: rgb(76, 82, 70);
  --platinum-800: rgb(37, 40, 34);
  --platinum-900: rgb(24, 26, 22);

  --payne-gray-50: rgb(252, 253, 253);
  --payne-gray-100: rgb(244, 246, 248);
  --payne-gray-200: rgb(230, 234, 238);
  --payne-gray-300: rgb(207, 215, 222);
  --payne-gray-400: rgb(176, 189, 200);
  --payne-gray-500: rgb(138, 158, 174);
  --payne-gray-600: rgb(97, 121, 140);
  --payne-gray-700: rgb(66, 82, 95);
  --payne-gray-800: rgb(32, 40, 46);
  --payne-gray-900: rgb(21, 26, 30);

  --charcoal-50: rgb(252, 253, 253);
  --charcoal-100: rgb(244, 246, 248);
  --charcoal-200: rgb(230, 234, 238);
  --charcoal-300: rgb(208, 215, 222);
  --charcoal-400: rgb(177, 189, 201);
  --charcoal-500: rgb(140, 158, 175);
  --charcoal-600: rgb(99, 120, 142);
  --charcoal-700: rgb(67, 82, 97);
  --charcoal-800: rgb(32, 39, 46);
  --charcoal-900: rgb(21, 26, 31);

  --canvas-bg-color: var(--charcoal-200);
  --bg-color: var(--charcoal-50);
  --code-bg-color: #f4f4f4;
  --text-color: var(--charcoal-800);
  --secondary-color: var(--sky-blue-600);
  --tertiary-color: var(--charcoal-200);
  --link-color: var(--sky-blue-500);
  --link-hover-color: var(--sky-blue-600);
  --link-bg-color: #dae4e7;
  --selection-color: var(--sky-blue-400a);
  /*  */
  --info-bg-color: var(--sky-blue-300);
  --info-color: var(--sky-blue-600);

  /* fonts */
  --serif-typefaces: "Lora", "Georgia", "Times New Roman", serif;
  --sans-serif-typefaces: "Lato", "Lucida Grande", "Lucida Sans Unicode",
    "Lucida Sans", "Verdana", sans-serif;
  --heading-typefaces: "Oswald", sans-serif;

}

html {
  height: 100%;
}

body {
  background: var(--canvas-bg-color);
  color: var(--text-color);
  font-family: var(--serif-typefaces);
  font-size: 16px;
  font-size: clamp(16px, 2.4vw, 21px);
  margin: auto;
  min-height: 100%;
  position: relative;
  width: 100%;
}

/*  wrapper
============================================================================= */
#wrapper {
  background: var(--bg-color);
  border: none;
  box-sizing: border-box;
  display: block;
  margin: 0 auto 10rem auto;
  max-width: 100%;
  padding: 1.5rem 3rem;
  width: 48rem;
  filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.075));
}

@media all and (max-width: 760px) {
  #wrapper {
    padding: 1rem 1.5rem;
  }
}

/*  header
============================================================================= */
#header {
  border-bottom: solid 1px var(--charcoal-200);
  padding: 0.5rem 3rem 1rem 3rem;
  margin: 0 -3rem;
}

#title {
  font-family: var(--heading-typefaces);
  font-size: 2.5em;
  font-weight: 900;
  margin: 0;
  letter-spacing: -0.2rem;
  text-transform: uppercase;
}

#header nav {
  font-size: 1rem;
  margin: 0;
}

.nav-link,
.nav-spacer,
.article-more-link {
  font-family: var(--sans-serif-typefaces);
  color: var(--secondary-color);
}

.nav-spacer {
  margin: 0 0.5em;
}

/*  posts
============================================================================= */
.article {
  border-bottom: solid 1px var(--charcoal-300);
  margin: 1rem 0 3rem 0;
  padding-bottom: 2rem;
}

.article-header {
  margin-bottom: 1.25rem;
}

.article-title {
  font-family: var(--heading-typefaces);
  font-size: 2em;
  font-weight: 800;
  margin-bottom: 0.5rem;
  line-height: 1.05;
  letter-spacing: -0.125rem;
}

.article-entry {
  /* line-height: 1.5; */
  line-height: 1.6;
  margin-bottom: 1em;
  overflow: visible;
}

.article-category {
  line-height: 1.5;
}

.article-meta,
.archive-article-date,
.article-nav,
.page-nav,
.article-footer,
.archive-article-word-count {
  color: var(--secondary-color);
  font-family: var(--sans-serif-typefaces);
  font-size: 0.7em;
  height: auto;
  line-height: inherit;
  margin: 0;
  padding: 0;
}

@media all and (max-width: 760px) {
  .article-meta,
  .archive-article-date,
  .article-nav,
  .page-nav,
  .article-footer,
  .archive-article-word-count {
    font-size: 0.7em;
  }
}

/* archive */
.archives-wrap {
  margin: 0.25rem 0;
  position: relative;
  top: 0.5rem;
}

@media all and (max-width: 620px) {
  .archives-wrap {
    margin-left: 1rem;
  }
}

.month {
  color: var(--secondary-color);
  cursor: pointer;
  font-family: var(--sans-serif-typefaces);
}

.hidden,
.hidden-input {
  display: none;
  margin-bottom: 1em;
}

.hidden-input ~ .month::before {
  content: "+ ";
  position: absolute;
  left: -1em;
}

.hidden-input:checked ~ .month::before {
  content: "– ";
}

.hidden-input:checked ~ .hidden {
  display: block;
}

.archive-article {
  margin: 0.25em 0;
  position: relative;
}

.archive-article-header {
  align-items: center;
  display: inline-flex;
}

.archive-article-date {
  position: absolute;
  right: calc(100% - 1.5em);
}

.archive-article-title {
  margin-right: 0.5em;
}

.archive-article-title {
  font: inherit;
  left: 2em;
  letter-spacing: 0;
  margin: 0;
  max-width: calc(100vw - 6rem);
  position: relative;
  text-align: left;
  text-decoration: none;
  text-transform: none;
}

.article-nav {
  display: flex;
  margin: 2em 0;
}

#article-nav-older,
#article-nav-newer {
  flex-basis: 50%;
}

#article-nav-newer {
  order: 1;
  text-align: right;
}

/* pagination */
.page-nav {
  margin: 1em 0;
  text-align: center;
}

.page-number,
.space,
.extend {
  font-size: 1.3em;
  margin: 0 0.4em;
}

.current {
  color: var(--text-color);
}

/*  typography
============================================================================= */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-typefaces);
  letter-spacing: 0rem;
  text-decoration: none;
  margin: 0 0 0.5rem 0;
}

h1 {
  font-size: 2.5rem;
  font-weight: 600;
}
h2 {
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.075rem;
}

h3,
h4,
h5,
h6 {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.05rem;
  text-transform: uppercase;
  margin-top: 1.5rem;
}

h4,
h5,
h6 {
  font-size: 1.25rem;
  margin-top: 1rem;
}

a {
  color: inherit;
  text-decoration: none;
}

p, ol, ul {
  margin: 0 0 1rem 0;
}

ul,
ol {
  padding-left: 1rem;
}

ul {
  margin-bottom: 0.5rem;
}

ul > li {
  margin-bottom: 0.5rem;
}

blockquote {
  font-size: 0.95em;
  display: block;
  margin: 0 -3rem 1rem -3rem;
  padding: 1rem 3rem;
  border-left: 3px solid var(--charcoal-400);
  border-right: 3px solid var(--charcoal-400);
  background-color: var(--charcoal-200);
}

blockquote > p {
  margin: 0;
}


/*  blog component
============================================================================= */
.article .article-entry blockquote footer,
.caption {
  color: var(--secondary-color);
  display: block;
  text-align: center;
}

.article .article-entry blockquote footer cite:before {
  content: " — ";
}

.pullquote {
  border: 0;
  color: var(--secondary-color);
  font-size: 1.2em;
  font-family: var(--sans-serif-typefaces);
  margin: 0;
  width: 40%;
}

.pullquote p {
  margin: 0;
}

.pullquote.left {
  float: left;
  padding: 1em 1em 1em 0;
  text-align: left;
}

.pullquote.right {
  float: right;
  padding: 0 1em 1em 1em;
  text-align: right;
}

.caption {
  color: #aeb4b9;
  display: block;
  font-size: 0.8em;
  text-align: center;
}

.katex {
  font-size: 1.1em;
}

.article-entry a {
  -webkit-transition-duration: 0.3s;
  -webkit-transition-property: border-bottom;
  border-bottom: 3px solid var(--link-color);
  transition-duration: 0.3s;
  transition-property: border-bottom;
}

.article-entry a:hover {
  -webkit-transition-duration: 0.3s;
  -webkit-transition-property: border-bottom;
  border-bottom: 3px solid var(--link-hover-color);
  transition-duration: 0.3s;
  transition-property: border-bottom;
}

#title a,
.article-title a,
a.nav-link,
.archive-article-title a,
.article-nav a,
a.page-number,
a.extend,
.month,
.article-footer a,
.article-category a,
.article-tag a,
.article-more-link a {
  -webkit-transition-duration: 0.3s;
  -webkit-transition-property: background;
  transition-duration: 0.3s;
  transition-property: background;
}

#title a:hover,
.article-title a:hover,
a.nav-link:hover,
.archive-article-title a:hover,
.article-nav a:hover,
a.page-number:hover,
a.extend:hover,
.month:hover,
.article-footer a:hover,
.article-category a:hover,
.article-tag a:hover,
.article-more-link a:hover {
  -webkit-transition-duration: 0.3s;
  -webkit-transition-property: background;
  background: var(--link-bg-color) !important;
  transition-duration: 0.3s;
  transition-property: background;
}

.article-category,
.article-tag {
  color: var(--secondary-color);
  font-family: var(--sans-serif-typefaces);
  margin-top: 2em;
}

.article-more-link {
  font-size: 0.9em;
  letter-spacing: 0.1em;
  margin-bottom: 1.1em;
  text-align: center;
  text-transform: uppercase;
}

/* miscellaneous */
img {
  box-sizing: border-box;
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

a img {
  -webkit-transition-duration: 0.3s;
  -webkit-transition-property: border;
  border: 3px solid var(--bg-color);
  transition-duration: 0.3s;
  transition-property: border;
}

a img:hover {
  -webkit-transition-duration: 0.3s;
  -webkit-transition-property: border;
  border: 3px solid var(--secondary-color);
  transition-duration: 0.3s;
  transition-property: border;
}

.article-gallery img,
table {
  margin: 1em auto;
}

td,
th,
table caption,
table td,
table th {
  border-bottom: 1px solid var(--tertiary-color);
  padding: 0.25em;
}

.video-container {
  position: relative;
  padding-top: 56.25%;
  margin-bottom: 1em;
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
}

::selection {
  background-color: var(--selection-color);
}

#settings-container {
  background: var(--tertiary-color);
  bottom: 0;
  position: fixed;
  right: 0;
}

#sans-font,
#dark-mode {
  cursor: pointer;
  float: right;
  padding: 0.5em;
}