/*#region @media accessibility prefs~~~~~~~~~~~~~~~~~~~~~~~~*/
@media screen and (prefers-reduced-motion: reduce) {
  }

@media screen and (prefers-reduced-motion: no-preference) {
  html {
    scroll-snap-type: y proximity !important;
    }

  section:not(:last-of-type) {
  //scroll-snap-stop: always; scroll-snap-align: start;
    }

  footer {
    scroll-snap-align: end;
    scroll-snap-stop: always;
    }

  }

//
//@media (prefers-color-scheme: dark) {
//  .light:not(#carousel, .card, .bright, #about .wrapper) {
//    --text-color: var(--color-whitish) !important;
//    --bg-color: var(--color-blackish) !important;
//    }
//
//  .light + footer,
//  footer:not(.card.dark ~) {
//    --important-text-color: var(--color-whitish) !important;
//    --text-color: var(--color-gray-lgt) !important;
//    --bg-color: black !important;
//    }
//  }

//
//@media only (prefers-color-scheme: light) {
//  .dark:not(#carousel, .card) {
//    --color-emphasis: var(--color-accent) !important;
//    --text-color: var(--color-blackish) !important;
//    --bg-color: var(--color-whitish) !important;
//    }
//
//  footer:not(.card.light ~) {
//    --important-text-color: var(--color-blackish) !important;
//    --text-color: var(--color-gray-drk) !important;
//    --bg-color: white !important;
//    }
//  }

/*#endregion @media accessibility prefs~~~~~~~~~~~~~~~~~~~~~~~~*/

/*#region @media responsive breakpoints~~~~~~~~~~~~~~~~~~~~~~~~*/
@media screen and (min-width: 1440px) {
  :root {
    /*#region Typography */
    --font-REM-base: 19px;
    /*#endregion Typography */
    }

  /*#region Margins & Padding~~~~~~~~~~~~~~~~~~~~~~~~ */
  /*#region ~~~~~~margins */
  /*#endregion ~~~~~~margins */
  /*#region ~~~~~~padding */
  /*#endregion ~~~~~~padding */
  /*#region ~~~~~~offset elements */
  /*#endregion ~~~~~~offset elements */
  /*#endregion Margins & Padding~~~~~~~~~~~~~~~~~~~~~~~~ */
  }

@media screen and (max-width: 1439px) {
  :root {
    /*#region Typography */
    --font-REM-base: 18px;
    /*#endregion Typography */
    }
  }

@media screen and (max-width: 1210px) {
  :root {
    /*#region Typography */
    --font-REM-base: 17px;
    /*#endregion Typography */
    }
  }

@media screen and (max-width: 991px) {
  :root {
    --wrapper-size-primary: 94vw;
    --margin-primary: 2vw;
    /*#region Typography */
    --font-REM-base: 16px;
    /*#endregion Typography */
    }

  /*#region Margins & Padding~~~~~~~~~~~~~~~~~~~~~~~~ */
  /*#region ~~~~~~margins */
  /*#endregion ~~~~~~margins */
  /*#region ~~~~~~padding */
  /*#endregion ~~~~~~padding */
  /*#region ~~~~~~offset elements */
  /*#endregion ~~~~~~offset elements */
  /*#endregion Margins & Padding~~~~~~~~~~~~~~~~~~~~~~~~ */
  }

@media only screen and (min-width: 768px) {
  /* tablets and desktop */
  section#about {
    min-height: min-content;
  //height: var(--height) !important;
    }

  /*#region Margins & Padding~~~~~~~~~~~~~~~~~~~~~~~~ */
  /*#region ~~~~~~margins */
  section#about .wrapper {
    margin: auto auto var(--nav-thickness) auto;
    }

  /*#endregion ~~~~~~margins */
  /*#region ~~~~~~padding */
  /*#endregion ~~~~~~padding */
  /*#region ~~~~~~offset elements */
  /*#endregion ~~~~~~offset elements */
  /*#endregion Margins & Padding~~~~~~~~~~~~~~~~~~~~~~~~ */
  #menu-mobile {
    display: none !important;
    }

  /* Detailed sizing parameters within rows and columns */
  /* Property for the parent so that its columns remain equal */
  .row.equal > * {
    max-width: var(--col-w);
  //outline: solid orangered 2px;
    }

  .row .favored {
    flex: 2 1 var(--favored) !important;
  //width: var(--favored);
    }

  :is(.row.favoring) > :not(.favored) {
  //outline: solid orangered 20px; flex: 1 2 var(--unfavored) !important; width: var(--unfavored);
    }
  }

@media only screen and (max-width: 767px) {
  /* phones */
  /*#region Margins & Padding~~~~~~~~~~~~~~~~~~~~~~~~ */
  footer {
    overflow: clip;
    }

  footer *:first-child {
    line-height: 1.3 !important;
    }

  /*#region ~~~~~~margins */
  section#about .wrapper {
    margin: var(--margin-primary) auto;
    }

  /*#endregion ~~~~~~margins */
  /*#region ~~~~~~padding */
  /*#endregion ~~~~~~padding */
  /*#region ~~~~~~offset elements */
  .wrapper:is(.light, .dark) {
    margin: var(--margin-primary) auto;
    width: var(--wrapper-size-primary) !important;
    max-width: var(--wrapper-size-primary) !important;
    height: min-content;
    }

  /*#endregion ~~~~~~offset elements */
  /*#endregion Margins & Padding~~~~~~~~~~~~~~~~~~~~~~~~ */
  :root {
    --wrapper-size-primary: 96vw !important;
    --margin-primary: 2vw !important;

    /*#region Typography */
    --font-REM-base: 17px;
    /*#endregion Typography */
    }

  #menu-desktop {
    display: none !important;
    }

  .row {
    flex-direction: column !important;
    justify-content: flex-end;
    }

  .row.cols-2 > * {
    flex: 1 1 auto;
  //max-height: min-content; max-width: 100% !important;
    }

  #about .row:first-of-type {
    flex-direction: column-reverse !important;
    }

//#about .row:first-of-type >:nth-child(2) {
//  flex: 0 2 min-content !important;
//  align-content: flex-end !important;
//  background-color: blue !important;
//  }

  #about .row figure {
    max-width: min-content !important;
  //display: inline-block; //background-color: orange; align-self: flex-end; //margin-left: auto !important; //margin-right: 0 !important;
    }
  }

@media only screen and (max-width: 479px) {
  :root {
    --wrapper-size-primary: calc(
      100vw - calc(var(--margin-primary) * 2)
    ) !important;
    --margin-primary: var(--gutter-sm) !important;
    /*#region Typography */
    --font-REM-base: 15px;
    /*#endregion Typography */
    }

  #container {
    height: auto;
    }

  main {
    height: auto !important;
    min-height: min-content !important;
    }

  section {
    min-height: min-content !important;
    margin: 0;
    padding: 0;
    }

  section#about {
    --height: min-content !important;
    max-height: min-content !important;
    }

  .wrapper {
    min-width: 100% !important;
    margin: 0 !important;
    padding: var(--gutter-lg) var(--margin-primary) !important;
    }

  footer {
    z-index: 999;
    }
  }

/*#region Margins & Padding~~~~~~~~~~~~~~~~~~~~~~~~ */

/*#region ~~~~~~margins */
/*#endregion ~~~~~~margins */

/*#region ~~~~~~padding */
/*#endregion ~~~~~~padding */

/*#region ~~~~~~offset elements */
/*#endregion ~~~~~~offset elements */

/*#endregion Margins & Padding~~~~~~~~~~~~~~~~~~~~~~~~ */

/*#endregion @media responsive breakpoints~~~~~~~~~~~~~~~~~~~~~~~~*/

/*#region Layout Size, position & behavior~~~~~~~~~~~~~~~~~~~~~~~~*/

/*#region Layout primary~~~~~~~~~~~~~~~~~~~~~~~~*/

html {
  overscroll-behavior: none;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
//overscroll-behavior: none;
  }

body {
  display: flex;
  position: relative;
  overscroll-behavior: none;
  overflow: visible;
  height: auto;
  vertical-align: top;
  }

//These classes (horizontal and vertical)
// are designs for both a standard vertical
// website layout as well an artsy horizontal
// scrolling layout. Ultimately they should go
//in @media queries: both so that A) users
//with reduced motion prefs aren't subjected
//to horizontal scrolling, and B) so that
// it's easier to disable for smaller viewports.
// All the body's children are designed to
// inherit the correct properties for each
// layout, so it should be work to just reclass
// the body tag in the markup and get the proper
// corresponding layout from the children.

body.horizontal {
  --element-flex-dir: column;
  --child-width: var(--nav-thickness);
  --child-height: 100%;
  height: 100%;
  width: auto;
  max-height: 100vh;
  overflow-x: scroll;
  flex-direction: row; //--clampH: 100vh; //--clampW: var(--nav-thickness);
  }

.horizontal * section {
  width: 100vw;
  }

body.vertical {
  --element-flex-dir: row;
  --child-width: 100%;
  --child-height: var(--nav-thickness);
  --footer-height: max(min-content, var(--footer-thickness));
  width: 100%;
  flex-direction: column; //--clampW: 100vw; //--clampH: var(--nav-thickness);//--child-width: 100vw;
  }

//:is(.horizontal) * :is(section, nav) {
//  height: 100vh;
//  width: inherit;
//}
//
//:is(.vertical) * :is(section, nav) {
//  width: 100vw;
//  height: inherit;
//}

//#carousel {
//  position: absolute;
//  width: 100%;
//  height: 100vh;
//  background-color: pink;
//  z-index: 1;
//}

#container {
  position: relative;
  top: 0;
  display: flex;
  flex-direction: inherit;
  width: inherit;
  overflow: clip;
  min-height: min-content;
  height: auto;
  margin-bottom: 0;
  }

nav,
footer {
  max-width: var(--child-width);
  display: flex;
  flex-direction: var(--element-flex-dir);
  justify-content: space-between;
  box-sizing: border-box;
  }

.vertical nav {
//max-height: var(--nav-max);
  }

main {
  position: relative;
  display: flex;
  width: inherit;
  height: auto;
  min-height: min-content;
  flex-direction: inherit;
  overflow: visible; //overflow prevented filter from being sticky //overflow-y: hidden;
  }

section#gallery {
  align-self: flex-start;
  height: auto;
  }

section#about {
//outline: solid 10px red; //outline-offset: -10px; --height: calc(100vh - calc(var(--footer-thickness) + var(--nav-thickness))); align-self: flex-end; overflow: hidden;
  }

section {
  position: relative;
  display: flex;
  min-height: min-content;
  height: auto;
  width: 100%;
  max-width: 100%;
  flex-direction: column;
  box-sizing: border-box;
  }

section.viewport {
  --wrapper-height: calc(100vh - calc(var(--margin) * 2));
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: max(100vh, min-content);
  width: 100vw; //max-height: 100vh; //background-color: purple;
  }

footer {
  /* --margin: calc((100vw - var(--wrapper-size-primary)) * 0.5); */
  display: flex;
  flex-direction: column;
  height: var(--footer-height);
  position: relative;
  bottom: 0;
  /* background-color: blue; */
  }

/*#endregion Layout primary~~~~~~~~~~~~~~~~~~~~~~~~*/

/*#region layout secondary~~~~~~~~~~~~~~~~~~~~~~~~*/

footer > div {
  display: flex;
  flex-direction: row;
  gap: inherit;
  justify-content: space-between;
  flex-wrap: nowrap;
//background-color: pink;
  }

section > header {
  width: auto;
  }

.full-width-wrapper {
  display: flex;
  width: 100%;
  }

.wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--wrapper-size-primary);
  box-sizing: border-box;
//background-color: lime;
  }

.wrapper:is(.light, dark) {
  z-index: 200;
  }

section#about > div.wrapper {
  height: min-content;
  }

section.viewport > div.wrapper {
  height: var(--wrapper-height);
  /*calculating height in descendents of VH-unit//
  //parents is weird and shitty, modify with caution...*/
  justify-content: flex-end;
//border: solid red 20px; //position: relative;
  }

.wrapper > {
  display: flex;
  }

/*#region Grid */
.col,
.row {
  height: min-content;
  width: 100%;
  display: flex;
  }

.col {
  flex-direction: column;
  align-items: center;
  }

.row {
//--element-gutter: var(--gutter-xl);
  /*height: auto;*/
//justify-content: stretch; flex-direction: row; //background-color: lightgreen; //outline: solid green 2px; //outline-offset: -2px;
  }

.row > * {
  display: flex;
  flex-direction: column;
//gap: inherit;
  /*gap: inherit;*/
//width: 100%; //  background-color: lightsalmon; //outline: solid orangered 2px; //outline-offset: -2px;
  /*flex: 0 1 50%;*/
  }

//These can be styled more specifically to have columns
// of varying sizes by giving  the parent row the class
// "favoring" and assigning a "favored" child. There can
//only be one favorite child. Favoritism  disappears at
// smaller breakpoints when the flex-direction switches
//to column for nearly every layout child.

.col,
:is(.row.cols-2, .row.cols-3, .row.cols-4) > * {
  flex-direction: column;
  display: flex;
  }

.row.cols-2 > * {
  --favored: calc(66% - var(--gutter-affordance));
  --unfavored: calc(33% - var(--gutter-affordance));
  --gutter-affordance: calc(var(--element-gutter) * 0.5);
  --col-w: calc(50% - var(--gutter-affordance));
  flex: 1 1 var(--col-w);
  /*flex: 0 0 50%;*/
//background-color: olive;
  }

.row.cols-3 > * {
  --favored: calc(50% - var(--gutter-affordance));
  --unfavored: calc(25% - var(--gutter-affordance));
  --gutter-affordance: calc(var(--element-gutter) * 0.33);
  --col-w: calc(33% - var(--gutter-affordance));
//flex: 0 1 var(--col-w); flex: 1 1 var(--col-w);
  /*background-color: springgreen;*/
  }

.row.cols-4 > * {
  --favored: calc(50% - var(--gutter-affordance));
  --unfavored: calc(16.6% - var(--gutter-affordance));
  --gutter-affordance: calc(var(--element-gutter) * 0.25);
  --col-w: calc(25% - var(--gutter-affordance));
//flex: 0 1 var(--col-w); flex: 1 1 var(--col-w);
  /*background-color: cyan;*/
  }

/*#endregion Grid */

/*#endregion layout secondary~~~~~~~~~~~~~~~~~~~~~~~~*/

/*#region elements and components~~~~~~~~~~~~~~~~~~~~~~~~*/

:root {
//--nav-interior-thickness: clamp(50px, 6vmin, 60px); --nav-thickness: clamp(70px, 8vmin, 85px); --nav-interior-thickness: calc( var(--nav-thickness) - (var(--nav-padding) * 2)); --footer-thickness: calc(var(--nav-thickness) * 1.5); //--nav-thickness: max(8vmin, 85px); --nav-min: max(70px, 8vmin); --nav-max: min(85px, 8vmin);
  }

.wrapper > header {
  width: 100%;
  }

div#filter-controls {
  position: sticky;
  position: -webkit-sticky;
  top: var(--nav-thickness);
  z-index: 999;
  }

table {
  border-collapse: collapse !important;
  display: table;
  border: dashed 5px;
  }

* hr {
  display: block;
  height: 1px;
  border: 0;
  }

/*#endregion elements and components~~~~~~~~~~~~~~~~~~~~~~~~*/

/*#endregion Layout Size, position & behavior~~~~~~~~~~~~~~~~~~~~~~~~*/

/*#region Layout Margins & Padding~~~~~~~~~~~~~~~~~~~~~~~~ */

:root {
  --margin-primary: 8vw;
  --margin-primary-wrapper-calc: calc(
    calc(100vw - var(--wrapper-size-primary)) * 0.5
  );
  --negative-margin-primary: calc(var(--margin-primary) * -1);
  --wrapper-size-primary: min(84vw, 1366px);
//--wrapper-white-space: calc(100vw - calc(var(--margin-primary) * 2)); --gutter-xxl: 4rem; --gutter-xl: 3rem; --gutter-lg: 2.25rem; --gutter-md: 1.5rem; --gutter-sm: 1rem; --gutter-xs: 0.75rem; --gutter-xxs: 0.5rem; --gutter-micropadding: 3px;
  /*   //// */
  --nav-padding: var(--gutter-xs);
  --nav-margin: calc(100vh - var(--nav-thickness));
  }

/*#region ~~~~~~margins */

#container {
  margin: 0;
  }

section {
  --margin: 5em;
//--element-gutter: var(--gutter-sm);
  }

footer {
  --margin: var(--margin-primary-wrapper-calc);
  --gutter: var(--gutter-sm);
  gap: var(--gutter);
  }

.wrapper,
section > header {
  --element-gutter: var(--gutter-md);
//background-color: lime;
  }

.wrapper:not(#about > *),
section > header {
  margin: auto;
  }

.wrapper {
  gap: var(--element-gutter);
  }

section.viewport .wrapper {
  margin: auto;
  }

.full-width-wrapper {
  gap: var(--gutter-lg);
  }

.col,
.row {
  gap: inherit;
  }

.row,
.col,
div.banner {
  --gutter: var(--gutter-sm);
  }

section.banner div.banner {
  margin-top: 25vh;
  }

//figure {
//  margin: 0;
//  }
.row figure img {
  margin-bottom: var(--gutter);
  }

figure img[src*="portrait" i] {
  max-width: min(300px, 100%);
  min-width: min(300px, var(--wrapper-size-primary));
  }

/* Links with "insensitive" anywhere in the URL,
 regardless of capitalization */

hr {
  margin: 1em 0;
  }

table {
  margin: 1em;
  }

/*#endregion ~~~~~~margins */

/*#region ~~~~~~padding */
section {
//padding: 9em 0;
  }

footer {
  padding: var(--gutter) var(--margin) var(--gutter-lg) var(--margin);
  }

section#gallery {
  padding: 9em var(--gutter-sm) 500px var(--gutter-sm);
  }

section.viewport {
//padding: var(--margin) 0;
  }

section > header {
  padding-bottom: var(--margin);
  }

figure {
  padding: 0;
  }

/*#endregion ~~~~~~padding */

/*#region ~~~~~~offset elements */

.wrapper:is(.light, .dark),
main#project-page .wrapper {
  --col-padding: var(--gutter-lg);
  --col-padding-neg: calc(var(--col-padding) * -1);
  }

.wrapper:is(.light, .dark) {
  border-radius: var(--border-radius-xs);
  --offset-wrapper-width: calc(
    var(--wrapper-size-primary) + calc(var(--col-padding) * 2)
  );
  margin: var(--col-padding-neg);
  width: var(--offset-wrapper-width) !important;
  padding: var(--col-padding);
  }

/*#endregion ~~~~~~offset elements */

/*#endregion Layout Margins & Padding~~~~~~~~~~~~~~~~~~~~~~~~ */

/*#region typography~~~~~~~~~~~~~~~~~~~~~~~~ */
:root {
  --font-elegant-text: normal normal var(--font-weight-regular) var(--fontsize-navbar-subtitle) / 0.7 var(--fontface-body);
  --font-filter: normal normal var(--font-weight-regular) 0.8rem/0.7 var(--fontface-body);
  --fontsize-navbar-subtitle: calc(var(--nav-interior-thickness) / 3.5);
  --fontsize-navbar-h1: calc(var(--nav-interior-thickness) * 0.55);
  }

/*#region ~~~~~~font family */
:root {
  --fontface-body: interstate, "Trebuchet MS", Tahoma, sans-serif;
  --font-display: Raygun, "Bodoni 72", "Bodoni M", Monaco, "Fira Code",
  monospace;
  }

@font-face {
  font-family: "Noirpro";
  src: url("../fonts/NoirPro-Regular.woff") format("woff");
  font-style: normal;
//font-kerning: normal;
//text-rendering: optimizeLegibility;
//  font-display: swap;
  }

@font-face {
  font-family: "Raygun";
  src: url("../fonts/RaygunRegular.woff2") format("font/woff2");
//text-rendering: optimizeLegibility;
//font-kerning: normal;
//  font-display: swap;
  font-style: normal;
  }

:is(p, ul, li, dl, dt, dd, h3, h4, h5, h6, small, figcaption) {
  font-family: var(--fontface-body);
  }

:is(h1, h2, h3, h4, h5).display-text {
  font-family: var(--font-display) !important;
  }

h2:not(nav *) {
  font-family: var(--font-display) !important;
  }

/*#endregion ~~~~~~font family */

/*#region ~~~~~~font size */

//:root {
//  --font-REM-base: 16px;
//  --font-h1-size: 4.8rem;
//  --font-h2-size: 3.15rem;
//  --font-h3-size: 2.36rem;
//  --font-h4-size: 1.77rem;
//  --font-h5-size: 1.33rem;
//  --font-h5-2-size: 1.1rem;
//  --font-p-bigger: 1.25rem;
//  --font-p-size: 1rem;
//  --font-h6-size: 0.8rem;
//  }

:root {
//--font-REM-base: 16px; --font-h2-slide: 6rem; --font-h2-size: 4.8rem; //--font-h2-size2: 3.15rem; --font-h2-size2: 3.15rem; --font-h3-size: 1.33rem; --font-h4-size2: 2.36rem; //--font-h4-size: 1.77rem; --font-h4-size: 2.1rem; --font-h5-size: 1.33rem; --font-h5-2-size: 1.1rem; --font-p-bigger: 1.33rem; --font-p-size: 1rem; --font-h6-size: 0.8rem;
  }

h2:not(nav *) {
  --font-size: var(--font-h2-size);
  }

:is(h1, h2, h3) + p {
  --font-size: var(--font-p-bigger);
  }

h3 {
//--font-size: var(--font-h3-size); --font-size: var(--font-h3-size);
  }

h4 {
//--font-size: var(--font-h4-size); --font-size: var(--font-h4-size);
  }

h5 {
  --font-size: var(--font-h5-size);
  }

strong {
  --stronk: calc(var(--font-size) + 0.05rem);
  font-size: var(--stronk) !important;
  vertical-align: baseline;
  }

html,
small,
h6,
li:not(nav *) {
  --font-size: var(--font-REM-base);
  }

:is(h3, h4, h5, h6, p, ul, ol, li, dt, dd, small),
h2:not(nav *) {
  font-size: var(--font-size);
  }

/*#endregion ~~~~~~font size */

/*#region ~~~~~~font weight */
:root {
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-bold: 500;
  --font-weight-regular: 400;
  --font-weight-heavy: 700;
  }

strong,
dt {
  font-weight: var(--font-weight-heavy);
  }

:is(h3, h4),
h2:not(nav *),
h2 + p,
.card p {
  font-weight: var(--font-weight-bold);
  }

p,
h5,
h6,
small {
  font-weight: var(--font-weight-regular);
  }

h6 {
  font-weight: var(--font-weight-bold);
  }

:is(h1, h2, h3).display-text.jumbo,
:is(h1, h2, h3) span.jumbo {
  font-size: 3.815rem !important;
  }

/*#endregion ~~~~~~font weight */

/*#region ~~~~~~text transform, align, and style */
a:hover {
  text-decoration: underline;
  }

* a,
* a:visited,
* a:active {
  text-decoration: none;
  }

//:is(h3, h4, h5, h6, dd) {
//  text-transform: uppercase;
//  }

:is(h1, h2, h3, h4, h5).display-text {
  text-transform: none !important;
  }

.display-text * span:nth-of-type(even),
.banner p span {
  text-align: right;
  display: block;
  }

.display-text {
  text-shadow: 1px 1px 1px #0ff, 2px 2px 1px #0ff;
  }

h3,
h6,
footer > :first-child,
footer :is(h5, h6) {
  text-transform: uppercase;
  }

footer > :first-child {
  text-align: center;
  width: 100%;
  align-self: center;
  }

footer ul {
  list-style-type: none;
  }

footer ul:nth-of-type(2) {
  align-self: center;
//background-color: blue;
  }

/*#endregion ~~~~~~text transform, align, and style */

/*#region ~~~~~~letter spacing*/
:root {
  --letterspacing-xwide: 0.23em;
  --letterspacing-wide: 0.07em;
  --letterspacing-medium: 0.03em;
  --letterspacing-normal: 0.01em;
  --letterspacing-responsive: clamp(0.05rem, calc(1vw / 4), 0.2rem);
  }

h3,
footer > :first-child,
h6 {
  letter-spacing: var(--letterspacing-wide);
  }

p,
h5 {
//letter-spacing: 0.01em; letter-spacing: var(--letterspacing-normal);
  }

li:not(nav *),
figcaption a {
  letter-spacing: var(--letterspacing-medium);
  }

/*#endregion ~~~~~~letter spacing*/

/*#region ~~~~~~line height*/
:root {
  --minimal-line-height: 0.7;
  --regular-line-height: 1.4;
  --list-line-height: 1.5;
  }

main {
  --ul-li-height: 1;
  }

footer {
  --ul-li-height: 1.5;
  }

footer :is(h5, h6) {
  line-height: 2 !important;
  }

footer ul > li > ul li {
  display: block;
  line-height: var(--ul-li-height);
  }

li,
dd {
  line-height: var(--list-line-height);
  }

p {
  line-height: 1.6;
  }

h2:not(nav *) {
  line-height: 1.1;
  }

//:is(h3, h4, h5, h6) {
//  line-height: 1.2;
//  }

:is(h2, h3, h4, h5, h6) {
//vertical-align: text-before-edge !important; line-height: var(--minimal-line-height) !important;
  }

/*#endregion ~~~~~~line height*/

/*#region ~~~~~~margins/padding*/

:is(.wrapper) :is(h2, h3, h4, h5) {
  /* margin-bottom: 0.2em; */
  margin-bottom: var(--gutter);
  }

:is(.wrapper) p + :is(h2, h4, h5) {
  margin-top: 1em;
  }

h3:not(:first-child) {
  margin-top: 2em;
  }

p {
  margin: 0;
  }

p:last-child {
  margin-bottom: 0;
  }

section > header p {
  margin-top: var(--gutter-xxs);
  }

ul h5:last-of-type,
ul h6:last-of-type {
  margin-top: 0;
  margin-bottom: var(--element-gutter);
  }

div > p:not(h2 + *),
dd {
  vertical-align: text-top;
  margin-left: var(--gutter);
  padding-left: var(--gutter);
  }

footer ul > li > ul li {
  padding-left: var(--gutter);
  }

div > p:not(h2 + *),
dd,
footer ul > li > ul li,
aside {
  border-left: var(--dotted-border);
  }

h4 {
  margin-left: calc(var(--gutter) - 3px);
  }

h6 {
  margin-bottom: var(--gutter-xxs);
  }

//h4 {
//  padding: 3rem 0;
//  margin-top: -1.4rem;
//  margin-bottom: -1.4rem;
//  }

dl {
  --gutter: var(--gutter-sm);
  }

dl:not(:last-of-type) {
  margin-bottom: var(--gutter);
  }

dt:not(:first-of-type) {
  margin-top: var(--gutter-xxs);
  }

footer {
  --text-padding: 0 0 0 var(--gutter-xxs);
  }

/*#endregion ~~~~~~margins*/

/*#region ~~~~~~advanced typesetting*/
p {
  hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphenate-limit-chars: 6 4 5;
  hyphenate-limit-zone: 8%;
  hyphenate-limit-last: always;
  hyphenate-limit-lines: 2;
  orphans: 3;
  widows: 3;
  max-width: 50ch;
  }

nobr {
  white-space: nowrap;
  }

aside p {
  max-width: 40ch;
  }

article {
  max-width: 50ch;
  }

section > header > p {
  max-width: 30ch;
  }

:is(p, ul, li, dt, dd, h1, h2, h3, h4, h5, small) {
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  }

/*#endregion ~~~~~~advanced typesetting*/

/*#endregion typography~~~~~~~~~~~~~~~~~~~~~~~~ */

/*#region color~~~~~~~~~~~~~~~~~~~~~~~~*/
:root {
  --color-gray-med: #666;
  --color-gray-lgt: #b0b0b0;
  --color-gray-xlt: #cfcfcf;
  --color-gray-drk: #2d2d2d;
  --color-blackish: #0d0d0d;
  --color-whitish: #f2f2f2;
  --color-accent: #0ff;
  --color-dark: #00f;
  --color-bright: #0f0;
  --color-med: #7bb0a6;
  --color-light: #dcebdb;
  --color-alpha-black-strong: rgba(0, 0, 0, 0.8);
  --color-alpha-black-med: rgba(0, 0, 0, 0.5);
  --color-alpha-black-light: rgba(0, 0, 0, 0.2);
  --color-alpha-white-strong: rgba(255, 255, 255, 0.8);
  --color-alpha-white-med: rgba(255, 255, 255, 0.5);
  --color-alpha-white-light: rgba(255, 255, 255, 0.2);
  }

/*#region ~~~~~~color schemes*/

.light {
  --color-emphasis: var(--color-accent);
  --text-color: var(--color-blackish);
  --bg-color: var(--color-whitish);
  --alpha-color: var(--color-alpha-white-light);
  }

.dark {
  --color-emphasis: var(--color-med);
  --text-color: var(--color-whitish);
  --bg-color: var(--color-blackish);
  --alpha-color: var(--color-alpha-black-med);
  }

.light + footer {
  --important-text-color: var(--color-gray-drk);
  --bg-color: white;
  }

.dark + footer {
  --important-text-color: var(--color-whitish);
  --text-color: var(--color-gray-lgt);
  --bg-color: black;
  }

/*#endregion ~~~~~~color schemes*/

/*#region ~~~~~~font color*/
section,
footer :is(h6, li),
.wrapper:is(.light, dark) {
  color: var(--text-color);
  }

footer h5 {
  color: var(--important-text-color);
  }

main a:hover {
  color: cyan;
  }

main a:active {
  color: blue;
  }

* a,
* a:visited,
* a:active {
  color: inherit;
  }

h6 {
  color: var(--color-gray-med);
  }

/*#endregion ~~~~~~font color*/

/*#region ~~~~~~background color*/

section,
footer,
.wrapper:is(.light, .dark) {
  background-color: var(--bg-color) !important;
  }

#dropdown,
nav,
#filter-controls {
  background-color: var(--color-alpha-black-strong);
  }

hr {
  background-color: #ccc;
  }

/*#endregion ~~~~~~background color*/

/*#endregion color~~~~~~~~~~~~~~~~~~~~~~~~*/

/*#region Appearance: Filters, Animation, border-radius~~~~~~~~~~~~~~~~~~~~~~~~*/

:root * {
  --border-radius-xs: 1px;
  --border-radius-sm: 3px;
  --animate-timing-bezier: cubic-bezier(0.12, 1, 0.71, 0.96);
  --dotted-border: 1px dashed var(--text-color);
  --text-shadow: 1px 1px 1px var(--color-alpha-black-light),
  1px 1px 3px var(--color-alpha-black-light),
  0px 0px 100px var(--color-alpha-black-light);
  --text-shadow-solid: 1px 1px 0 var(--color-emphasis), 2px 2px 0 var(--color-emphasis);
  --text-shadow-soft: 0px 0px 1px rgba(0, 0, 0, 0.1),
  0px 0px 5px rgba(0, 0, 0, 0.1),
  0px 0px 10px rgba(0, 0, 0, 0.03);
  --text-shadow-glow: 0px 0px 50px rgba(255, 255, 255, 1), 0px 0px 10px rgba(255, 255, 255, 0.3);
  --drop-shadow: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.05)) drop-shadow(0px 8px 18px rgba(0, 0, 0, 0.02)) drop-shadow(0px 35px 80px rgba(0, 0, 0, 0.01));
  --drop-shadow-strong: drop-shadow(2px 40px 7px rgba(0, 0, 0, 0.1)) drop-shadow(0px 10px 2px rgba(0, 0, 0, 0.1)) drop-shadow(-15px 20px 5px rgba(0, 0, 0, 0.1));
  --box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.05),
  0px 8px 18px rgba(0, 0, 0, 0.02),
  0px 35px 80px rgba(0, 0, 0, 0.01);
  }

[data-hide] {
  display: none;
  }

[data-blur],
#filter-controls,
.show {
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  }

figure img[src*="portrait" i] {
  box-shadow: var(--box-shadow);
  }


//section#gallery {
//  animation: getfaded 1s linear;
//  will-change: background-color;
//  /* Pause the animation */
//  animation-play-state: paused;
//  /* Bind the animation to scroll */
//  animation-delay: calc(var(--scroll) * -1s);
//  /* These last 2 properites clean up overshoot weirdness */
//  animation-iteration-count: 1;
//  animation-fill-mode: both;
//}

@keyframes getfaded {
  75% {
    background-color: black;
    }
  to {
    background-color: transparent;
    }
  }

main {
  background-color: var(--color-whitish);
  }

.paper {
  background-image: url("../img/paper.jpg");
  background-position: 0 0;
  background-size: 256px;
  }

[data-aos="bgfadeOut"] {
  opacity: 1;
  transition-property: opacity;
  }

[data-aos="bgfadeOut"].aos-animate {
  opacity: 0;
  }

/*#endregion Appearance: Filters, Animation, border-radius~~~~~~~~~~~~~~~~~~~~~~~~*/

/*#region ~~~~~~~~~~~~~~~~~~~~~~boilerplate~~~~~~~~~~~~~~~~~~~~~~  */
/*
  * HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/
   * main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme
   * What follows is the result of much research on cross-browser styling.
   * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
   * Kroc Camen, and the H5BP dev community and team.
   */
/*
   * Remove text-shadow in selection highlight:
   * https://twitter.com/miketaylr/status/12228805301
   *
   * Vendor-prefixed and regular ::selection selectors cannot be combined:
   * https://stackoverflow.com/a/16982510/7133471
   *
   * Customize the background color to match your design.
   */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
  }

::selection {
  background: #b3d4fc;
  text-shadow: none;
  }

/*
   * A better looking default horizontal rule
   */

/*
   * Remove the gap between audio, canvas, iframes,
   * images, videos and the bottom of their containers:
   * https://github.com/h5bp/html5-boilerplate/issues/440
   */

audio,
canvas,
iframe,
svg,
video {
  vertical-align: middle;
  }

/*
   * Remove default fieldset styles.
   */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  }

/*
   * Allow only vertical resizing of textareas.
   */

textarea {
  resize: vertical;
  }

/* ==========================================================================
     Author's custom styles
     ========================================================================== */

/* ==========================================================================
     Helper classes
     ========================================================================== */

/*
   * Hide visually and from screen readers
   */

.hidden,
[hidden] {
  display: none !important;
  }

/*
   * Hide only visually, but have it available for screen readers:
   * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
   *
   * 1. For long content, line feeds are not interpreted as spaces and small width
   *    causes content to wrap 1 word per line:
   *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
   */

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
  }

/*
   * Extends the .sr-only class to allow the element
   * to be focusable when navigated to via the keyboard:
   * https://www.drupal.org/node/897638
   */

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
  }

/*
   * Hide visually and from screen readers, but maintain layout
   */

.invisible {
  visibility: hidden;
  }

/*
   * Clearfix: contain floats
   *
   * For modern browsers
   * 1. The space content is one way to avoid an Opera bug when the
   *    `contenteditable` attribute is included anywhere else in the document.
   *    Otherwise it causes space to appear at the top and bottom of elements
   *    that receive the `clearfix` class.
   * 2. The use of `table` rather than `block` is only necessary if using
   *    `:before` to contain the top-margins of child elements.
   */

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
  }

.clearfix::after {
  clear: both;
  }

/* ==========================================================================
     EXAMPLE Media Queries for Responsive Design.
     These examples override the primary ('mobile first') styles.
     Modify as content requires.
     ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
  }

@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
  }

/* ==========================================================================
     Print styles.
     Inlined to avoid the additional HTTP request:
     https://www.phpied.com/delay-loading-your-print-css/
     ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
    }

  a,
  a:visited {
    text-decoration: underline;
    }

  a[href]::after {
    content: " (" attr(href) ")";
    }

  abbr[title]::after {
    content: " (" attr(title) ")";
    }

  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
    }

  pre {
    white-space: pre-wrap !important;
    }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
    }

  /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group;
    }

  tr,
  img {
    page-break-inside: avoid;
    }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
    }

  h2,
  h3 {
    page-break-after: avoid;
    }
  }

/*#endregion boilerplate  */