body, html {
  width: 100%;
  height: 100%;
  margin: 0;
}
* {
  box-sizing: border-box;
}
body {
  background-color: #f1f1f1;
}

/* presentation */
.presentation {
  height: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}
.presentation grid-system {
  height: 100%;
  scroll-snap-align: start;
  overflow: auto;
  display: grid;  
}
grid-system img.contain {
  object-fit: contain;
  width:100%;
  height: 100%;
  image-rendering: crisp-edges;
}

.pattern1 {
  height: 100dvh;
  width: 100%;
  background:
    radial-gradient(
      1000% 50% at 50% 50%,
      hsl(90 100% 30%) 0% 5%,
      hsl(150 80% 20%),
      hsl(90 100% 30%)
    ),
    radial-gradient(
      100% 100% at 50% 50%,
      hsl(90 20% 85%) 30%,
      hsl(40 90% 40%) 60% 70%,
      transparent
    ),
    linear-gradient(
      hsl(250 20% 90%) 0 10%,
      hsl(10 10% 10%),
      hsl(250 20% 90%) 90% 100%
    )
  ;
  background-size:
    10% 20%, 
    10% 10%, 
    100% 50%
  ;
  background-blend-mode:
    color-dodge,
    difference,
    normal;
  animation: fire2 120s linear infinite;
}
@keyframes fire2 {
  from {
    background-position: 0 0, 0 0, 0 0;
  }

  to {
    background-position: 0% 200%, 0% 200%, 0% -500%;
  }
}
/*

Fonts

*/
@font-face {
  font-family: 'body';
  src: url('../fonts/Hershey-Noailles-HelpMe-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  ascent-override: 100%;
  descent-override: 0%;
}
@font-face {
  font-family: 'header';
  src: url('../fonts/Hershey-Noailles-Times-Mono-Regular.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  ascent-override: 100%;
  descent-override: 0%;
}
@font-face {
  font-family: 'code';
  src: url('../fonts/FontWithASyntaxHighlighter-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  ascent-override: 100%;
  descent-override: 0%;
}
/*

Typography

*/
body {
  font-family: 'body', serif;
  font-size: 1rem;
  line-height: 1rem;
  text-overflow: ellipsis;
  font-synthesis: none;
}
*[lang|="fi"] {
  hyphenate-limit-chars: 5 3 3;
  quotes: "»" "»" "’" "’";
}
*[lang|="en"] {
  hyphenate-limit-chars: auto;
}
p + p {
  text-indent: calc(2 * var(--baseline)) each-line;
}
p {
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: 'calt', 'ss01';
  margin-block: 0;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-font-smoothing: antialiased;
}
h1 {
  --lh: 6;
  --fs: 0.90;
  --font: 'header';
  font-family: var(--font), serif;
  font-size: calc(var(--lh) * 1rem / var(--fs));
  line-height: calc(var(--lh) * 1rem);
  letter-spacing: -0.03em;
  word-spacing: 0.0em;
}
h2 {
  font-family: 'header';
  font-size: calc(1.4 * var(--baseline));
  line-height: calc(1.4 * var(--baseline));
  margin-block-start: calc(1.6 * var(--baseline));
  margin-block-end: calc(1 * var(--baseline));
}
h3 {
  font-family: 'header';
  font-size: calc(1.1 * var(--baseline));
  line-height: calc(1.1 * var(--baseline));
  margin-block-start: calc(0.9 * var(--baseline));
  margin-block-end: calc(0 * var(--baseline));
  letter-spacing: 0.5px;
}
h4 {
  font-size: 1rem;
  line-height: var(--baseline);
  margin-block-start: calc(1 * var(--baseline));
  margin-block-end: calc(0 * var(--baseline));
  letter-spacing: 1px;
  font-variant-caps: all-small-caps;
  text-align: center;
}
sup {
  vertical-align: baseline;
  font-variant-position: super;
  font-size: 1em;
}
sub {
  vertical-align: baseline;
  font-variant-position: sub;
  font-size: 1em;
}
/* custom named tags */
no-break {
  display: inline-block;
}
small-caps {
  font-variant-caps: all-small-caps;
}
@media (width >=0) {
  [style*="--leading"], [style*="--ratio"], [style*="--font"] {
    --leading: 1;
    --ratio: 1;
    --font: 'body';
    font-size: calc(var(--leading) * 1rem / var(--ratio));
    line-height: calc(var(--leading) * 1rem);
    font-family: var(--font);
    margin-block-start: calc((var(--leading) - (var(--leading) / var(--ratio))) / 2 * 1rem);
    margin-block-end: calc((var(--leading) - (var(--leading) / var(--ratio))) / 2 * -1rem);
  }
}
@media (width >=640px) {
  [style*="--leading"], [style*="--ratio"], [style*="--font"] {
    font-size: calc(var(--leading-sm, var(--leading)) * 1rem / var(--ratio-sm, var(--ratio)));
    line-height: calc(var(--leading-sm, var(--leading)) * 1rem);
    font-family: var(--font-sm, var(--font));
  }
}
@media (width >=1024px) {
  [style*="--leading"], [style*="--ratio"], [style*="--font"] {
    font-size: calc(var(--leading-md, var(--leading-sm, var(--leading))) * 1rem / var(--ratio-md, var(--ratio-sm, var(--ratio))));
    line-height: calc(var(--leading-md, var(--leading-sm, var(--leading))) * 1rem);
    font-family: var(--font-md, var(--font-sm, var(--font)));
  }
}
@media (width >=1440px) {
  [style*="--leading"], [style*="--ratio"], [style*="--font"] {
    font-size: calc(var(--leading-lg, var(--leading-md, var(--leading-sm, var(--leading)))) * 1rem / var(--ratio-lg, var(--ratio-md, var(--ratio-sm, var(--ratio)))));
    line-height: calc(var(--leading-lg, var(--leading-md, var(--leading-sm, var(--leading)))) * 1rem);
    font-family: var(--font-lg, var(--font-md, var(--font-sm, var(--font))));
  }
}
/*

Background pattern

*/
html {
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 calc(100% / var(--cols) - 1px),
      #e1e1e1 0 calc(100% / var(--cols))
      /* transparent 0 calc(100% / var(--cols)),
      rgb(150 0 0 / 10%) 0 calc((100% / var(--cols)) * 2) */
    ),
    repeating-linear-gradient(
      #eee 0 calc(1 * var(--baseline) - 1px),
      #e1e1e1 0 calc(1 * var(--baseline))
      /* transparent 0 var(--baseline),
      rgb(0 150 0 / 10%) 0 calc(var(--baseline) * 2) */
    )
  ;
}
/*

Grid system

*/
:root {
  --scrollbarWidth: 0px;
  --baseline: 1rem;
  --cols: 60;
  --colwidth: calc((100vw - var(--scrollbarWidth)) / var(--cols));

  font-size: calc((100vw - var(--scrollbarWidth)) / var(--cols));
  line-height: 1rem;
}
grid-system {
  display: grid;
  grid-template-columns: repeat(var(--cols), [col-start] 1fr);
  grid-auto-rows: minmax(var(--baseline), max-content);
}
/*

base 

*/
@media (width >=0) {
  grid-system > * {
    --col: 0;
    --w: var(--cols);
    --row: auto;
    --h: auto;
    grid-column-start: col-start clamp(0, var(--col), var(--cols));
    grid-column-end: span clamp(0, var(--w), calc(var(--cols) - var(--col) + 1));
    grid-row-start: var(--row);
    grid-row-end: span var(--h);
  }
  [style*="--m"] {
    margin:
      calc(var(--baseline) * var(--mt, var(--m)))
      calc(var(--colwidth) * var(--mr, var(--m)))
      calc(var(--baseline) * var(--mb, var(--m)))
      calc(var(--colwidth) * var(--ml, var(--m)))
    ;
  }
  [style*="--mt"] {
    margin-top:calc(var(--baseline) * var(--mt, var(--m)));
  }
  [style*="--mr"] {
    margin-right:calc(var(--colwidth) * var(--mr, var(--m)));
  }
  [style*="--mb"] {
    margin-bottom:calc(var(--baseline) * var(--mb, var(--m)));
  }
  [style*="--ml"] {
    margin-left:calc(var(--colwidth) * var(--ml, var(--m)));
  }
  [style*="--p"] {
    padding:
      calc(var(--baseline) * var(--pt, var(--p)))
      calc(var(--colwidth) * var(--pr, var(--p)))
      calc(var(--baseline) * var(--pb, var(--p)))
      calc(var(--colwidth) * var(--pl, var(--p)))
    ;
  }
  [style*="--pt"] {
    padding-top:calc(var(--baseline) * var(--pt, var(--p)));
  }
  [style*="--pr"] {
    padding-right:calc(var(--colwidth) * var(--pr, var(--p)));
  }
  [style*="--pb"] {
    padding-bottom:calc(var(--baseline) * var(--pb, var(--p)));
  }
  [style*="--pl"] {
    padding-left:calc(var(--colwidth) * var(--pl, var(--p)));
  }
}
/* 

sm 

*/
@media (width >=640px) {
  grid-system > * {
    --col-sm: var(--col);
    --w-sm: var(--w);
    --row-sm: var(--row);
    --h-sm: var(--h);
    grid-column-start: col-start clamp(0, var(--col-sm), var(--cols));
    grid-column-end: span clamp(0, var(--w-sm), calc(var(--cols) - var(--col-sm) + 1));
    grid-row-start: var(--row-sm);
    grid-row-end: span var(--h-sm);
  }
  [style*="--m"] {
    margin:
      calc(var(--baseline) * var(--mt-sm, var(--mt, var(--m-sm, var(--m)))))
      calc(var(--colwidth) * var(--mr-sm, var(--mr, var(--m-sm, var(--m)))))
      calc(var(--baseline) * var(--mb-sm, var(--mb, var(--m-sm, var(--m)))))
      calc(var(--colwidth) * var(--ml-sm, var(--ml, var(--m-sm, var(--m)))))
    ;
  }
  [style*="--mt"] {
    margin-top:calc(var(--baseline) * var(--mt-sm, var(--mt, var(--m-sm, var(--m)))));
  }
  [style*="--mr"] {
    margin-right:calc(var(--colwidth) * var(--mr-sm, var(--mr, var(--m-sm, var(--m)))));
  }
  [style*="--mb"] {
    margin-bottom:calc(var(--baseline) * var(--mb-sm, var(--mb, var(--m-sm, var(--m)))));
  }
  [style*="--ml"] {
    margin-left:calc(var(--colwidth) * var(--ml-sm, var(--ml, var(--m-sm, var(--m)))));
  }
  [style*="--p"] {
    padding:
      calc(var(--baseline) * var(--pt-sm, var(--pt, var(--p-sm, var(--p)))))
      calc(var(--colwidth) * var(--pr-sm, var(--pr, var(--p-sm, var(--p)))))
      calc(var(--baseline) * var(--pb-sm, var(--pb, var(--p-sm, var(--p)))))
      calc(var(--colwidth) * var(--pl-sm, var(--pl, var(--p-sm, var(--p)))))
    ;
  }
  [style*="--pt"] {
    padding-top:calc(var(--baseline) * var(--pt-sm, var(--pt, var(--p-sm, var(--p)))));
  }
  [style*="--pr"] {
    padding-right:calc(var(--colwidth) * var(--pr-sm, var(--pr, var(--p-sm, var(--p)))));
  }
  [style*="--pb"] {
    padding-bottom:calc(var(--baseline) * var(--pb-sm, var(--pb, var(--p-sm, var(--p)))));
  }
  [style*="--pl"] {
    padding-left:calc(var(--colwidth) * var(--pl-sm, var(--pl, var(--p-sm, var(--p)))));
  }
}
/* 

md 

*/
@media (width >=1024px) {
  grid-system > * {
    --col-md: var(--col-sm);
    --w-md: var(--w-sm);
    --row-md: var(--row-sm);
    --h-md: var(--h-sm);
    grid-column-start: col-start clamp(0, var(--col-md), var(--cols));
    grid-column-end: span clamp(0, var(--w-md), calc(var(--cols) - var(--col-md) + 1));
    grid-row-start: var(--row-md);
    grid-row-end: span var(--h-md);
  }
  [style*="--m"] {
    margin:
      calc(var(--baseline) * var(--mt-md, var(--mt-sm, var(--mt, var(--m-md, var(--m-sm, var(--m)))))))
      calc(var(--colwidth) * var(--mr-md, var(--mr-sm, var(--mr, var(--m-md, var(--m-sm, var(--m)))))))
      calc(var(--baseline) * var(--mb-md, var(--mb-sm, var(--mb, var(--m-md, var(--m-sm, var(--m)))))))
      calc(var(--colwidth) * var(--ml-md, var(--ml-sm, var(--ml, var(--m-md, var(--m-sm, var(--m)))))))
    ;
  }
  [style*="--mt"] {
    margin-top:calc(var(--baseline) * var(--mt-md, var(--mt-sm, var(--mt, var(--m-md, var(--m-sm, var(--m)))))));
  }
  [style*="--mr"] {
    margin-right:calc(var(--colwidth) * var(--mr-md, var(--mr-sm, var(--mr, var(--m-md, var(--m-sm, var(--m)))))));
  }
  [style*="--mb"] {
    margin-bottom:calc(var(--baseline) * var(--mb-md, var(--mb-sm, var(--mb, var(--m-md, var(--m-sm, var(--m)))))));
  }
  [style*="--ml"] {
    margin-left:calc(var(--colwidth) * var(--ml-md, var(--ml-sm, var(--ml, var(--m-md, var(--m-sm, var(--m)))))));
  }
  [style*="--p"] {
    padding:
      calc(var(--baseline) * var(--pt-md, var(--pt-sm, var(--pt, var(--p-md, var(--p-sm, var(--p)))))))
      calc(var(--colwidth) * var(--pr-md, var(--pr-sm, var(--pr, var(--p-md, var(--p-sm, var(--p)))))))
      calc(var(--baseline) * var(--pb-md, var(--pb-sm, var(--pb, var(--p-md, var(--p-sm, var(--p)))))))
      calc(var(--colwidth) * var(--pl-md, var(--pl-sm, var(--pl, var(--p-md, var(--p-sm, var(--p)))))))
    ;
  }
  [style*="--pt"] {
    padding-top:calc(var(--baseline) * var(--pt-md, var(--pt-sm, var(--pt, var(--p-md, var(--p-sm, var(--p)))))));
  }
  [style*="--pr"] {
    padding-right:calc(var(--colwidth) * var(--pr-md, var(--pr-sm, var(--pr, var(--p-md, var(--p-sm, var(--p)))))));
  }
  [style*="--pb"] {
    padding-bottom:calc(var(--baseline) * var(--pb-md, var(--pb-sm, var(--pb, var(--p-md, var(--p-sm, var(--p)))))));
  }
  [style*="--pl"] {
    padding-left:calc(var(--colwidth) * var(--pl-md, var(--pl-sm, var(--pl, var(--p-md, var(--p-sm, var(--p)))))));
  }
}
/* 

lg 

*/
@media (width >=1440px) {
  grid-system > * {
    --col-lg: var(--col-md);
    --w-lg: var(--w-md);
    --row-lg: var(--row-md);
    --h-lg: var(--h-md);
    grid-column-start: col-start clamp(0, var(--col-lg), var(--cols));
    grid-column-end: span clamp(0, var(--w-lg), calc(var(--cols) - var(--col-lg) + 1));
    grid-row-start: var(--row-lg);
    grid-row-end: span var(--h-lg);
  }
  [style*="--m"] {
    margin:
      calc(var(--baseline) * var(--mt-lg, var(--mt-md, var(--mt-sm, var(--mt, var(--m-lg, var(--m-md, var(--m-sm, var(--m)))))))))
      calc(var(--colwidth) * var(--mr-lg, var(--mr-md, var(--mr-sm, var(--mr, var(--m-lg, var(--m-md, var(--m-sm, var(--m)))))))))
      calc(var(--baseline) * var(--mb-lg, var(--mb-md, var(--mb-sm, var(--mb, var(--m-lg, var(--m-md, var(--m-sm, var(--m)))))))))
      calc(var(--colwidth) * var(--ml-lg, var(--ml-md, var(--ml-sm, var(--ml, var(--m-lg, var(--m-md, var(--m-sm, var(--m)))))))))
    ;
  }
  [style*="--mt"] {
    margin-top:calc(var(--baseline) * var(--mt-lg, var(--mt-md, var(--mt-sm, var(--mt, var(--m-lg, var(--m-md, var(--m-sm, var(--m)))))))));
  }
  [style*="--mr"] {
    margin-right:calc(var(--colwidth) * var(--mr-lg, var(--mr-md, var(--mr-sm, var(--mr, var(--m-lg, var(--m-md, var(--m-sm, var(--m)))))))));
  }
  [style*="--mb"] {
    margin-bottom:calc(var(--baseline) * var(--mb-lg, var(--mb-md, var(--mb-sm, var(--mb, var(--m-lg, var(--m-md, var(--m-sm, var(--m)))))))));
  }
  [style*="--ml"] {
    margin-left:calc(var(--colwidth) * var(--ml-lg, var(--ml-md, var(--ml-sm, var(--ml, var(--m-lg, var(--m-md, var(--m-sm, var(--m)))))))));
  }
  [style*="--p"] {
    padding: 
      calc(var(--baseline) * var(--pt-lg, var(--pt-md, var(--pt-sm, var(--pt, var(--p-lg, var(--p-md, var(--p-sm, var(--p)))))))))
      calc(var(--colwidth) * var(--pr-lg, var(--pr-md, var(--pr-sm, var(--pr, var(--p-lg, var(--p-md, var(--p-sm, var(--p)))))))))
      calc(var(--baseline) * var(--pb-lg, var(--pb-md, var(--pb-sm, var(--pb, var(--p-lg, var(--p-md, var(--p-sm, var(--p)))))))))
      calc(var(--colwidth) * var(--pl-lg, var(--pl-md, var(--pl-sm, var(--pl, var(--p-lg, var(--p-md, var(--p-sm, var(--p)))))))))
    ;
  }
  [style*="--pt"] {
    padding-top:calc(var(--baseline) * var(--pt-lg, var(--pt-md, var(--pt-sm, var(--pt, var(--p-lg, var(--p-md, var(--p-sm, var(--p)))))))));
  }
  [style*="--pr"] {
    padding-right:calc(var(--colwidth) * var(--pr-lg, var(--pr-md, var(--pr-sm, var(--pr, var(--p-lg, var(--p-md, var(--p-sm, var(--p)))))))));
  }
  [style*="--pb"] {
    padding-bottom:calc(var(--baseline) * var(--pb-lg, var(--pb-md, var(--pb-sm, var(--pb, var(--p-lg, var(--p-md, var(--p-sm, var(--p)))))))));
  }
  [style*="--pl"] {
    padding-left:calc(var(--colwidth) * var(--pl-lg, var(--pl-md, var(--pl-sm, var(--pl, var(--p-lg, var(--p-md, var(--p-sm, var(--p)))))))));
  }
}

/*

Utilities

*/

/* Gives position relative to the parent of absolutely positioned child */
*:has([class*="absolute"]) {
  position: relative;
}
.absolute {
  position: absolute;
}