/** Reset some basic elements */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }

/** Variables **********************************************/
html { --background-color: #fff; --transparent-background-color: rgba(255,255,255,0.2); --semitransparent-background-color: rgba(255,255,255,0.3); --background-contrast-color: #f0f0f0; --background-contrast-color-border: #e0e0e0; --dark-text-color: #000; --text-color:     #333; --dimmed-text-color: #555; --dimmed-background-color: #f9f9f9; --theme-color:   rgb(0,150,190); --theme-color-transparent:   rgba(0,150,190,0); }

@media (prefers-color-scheme: dark) { html { --background-color: #111; --transparent-background-color: rgba(17,17,17,0.2); --semitransparent-background-color: rgba(19,19,19,0.3); --background-contrast-color: #222; --background-contrast-color-border: #555; --dark-text-color: #fff; --text-color:     #ccc; --dimmed-text-color: #999; --dimmed-background-color: #222; --theme-color:   rgb(0,180,228); } }

/************************************************************/
/** Basic styling */
body { font-family: "Martel", Georgia, sans-serif; font-size: 12pt; line-height: 1.5em; font-weight: 100; color: var(--text-color); background-color: var(--background-color); -webkit-text-size-adjust: 100%; }

/** Set `margin-bottom` to maintain vertical rhythm */
p, blockquote, pre, ul, ol, dl, figure { margin-bottom: 20px; }

hr { /* Inset, by Dan Eden */ border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3); }

/** Figures */
figure > img { display: block; }

figcaption { font-size: 12pt; }

/** Lists */
ul, ol { margin-left: 50px; }

li > ul, li > ol { margin-bottom: 0; }

/** Headings */
h1, h2, h3, h4, h5, h6 { font-weight: 100; line-height: 1.2em; }

/** Simple formats */
strong { font-weight: bold; }

/** Links */
a { color: var(--text-color); text-decoration: underline; }

a:hover { color: var(--theme-color); text-decoration: none; }

article a { font-weight: 100; }

article a:hover { text-decoration: none; }

/** Blockquotes */
blockquote { color: var(--text-color); border-left: 10px solid var(--dimmed-text-color); padding-left: 25px; font-size: 18px; font-style: italic; }

blockquote > :last-child { margin-bottom: 0; }

/** Code formatting */
code { border-radius: 3px; background-color: var(--background-contrast-color); border: 1px solid var(--background-contrast-color-border); border-radius: 2px; }

code, pre { font-family: 'Source Code Pro', 'Fira Mono', 'Andale Mono', 'Consolas', 'Monaco', monospace; font-weight: 400; }

figure.highlight code, code.highlighter-rouge { font-size: 10pt; }

figure.highlight pre, pre.highlight { font-size: 10pt; border-radius: 4px; background-color: var(--background-contrast-color); border: 1px solid var(--background-contrast-color-border); border-radius: 2px; line-height: 1.4em; }

td.rouge-gutter { border-right: 1px solid var(--background-contrast-color-border); }

pre.lineno { opacity: 0.4; /* padding right 3px, otherwise 0 */ padding: 0.3em; /* 0 3px 0 0; */ text-align: right; font-size: 9pt; }

pre code { background: none; }

code { padding: 1px 5px; }

pre { padding: 4px 6px; overflow-x: scroll; }

pre > code { border: 0; padding-right: 0; padding-left: 0; }

/** Wrapper */
.wrapper { margin-right: auto; margin-left: auto; padding-right: 0; padding-left: 0; }

/** Clearfix */
.wrapper:before, .wrapper:after { content: ""; display: table; clear: both; }

/** Site header   ********************************************************** */
.header-wrapper { position: absolute; display: block; left: 0px; top: 0px; height: 200px; width: 100%; z-index: 50; padding: 0; }

.menuopen .header-wrapper { height: 100px; }

.site-header { background-color: var(--transparent-background-color); border-bottom: 1px solid var(--semitransparent-background-color); position: sticky; left: 0px; top: 0px; height: 100px; width: 100%; z-index: 50; padding: 0; }

.site-title { position: relative; left: 5%; line-height: 100px; float: left; font-size: 18px; }

.site-title a { color: var(--text-color) !important; }

.site-title .page-link { line-height: 1.5em; }

.site-header a, .mobile-menu a { color: var(--dimmed-text-color); text-decoration: none; }

.site-header a:hover, .site-header a:active, .site-header a.active, .mobile-menu a:hover, .mobile-menu a:active, .mobile-menu a.active { color: var(--dark-text-color); }

.site-header .site-nav { position: absolute; right: 5%; float: right; }

.site-nav { font-size: 18px; line-height: 100px; }

.site-nav .page-link { line-height: 1.5em; }

.site-nav .page-link:not(:first-child) { margin-left: 10px; }

.site-nav a { text-decoration: underline; text-decoration-color: var(--theme-color-transparent); text-decoration-style: solid; text-decoration-thickness: 2px; text-underline-offset: 8px; transition: 300ms; }

.site-nav a:hover, .site-nav a:active, .site-nav a.active { text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--theme-color); }

.site-nav a#togglemenu { text-decoration: none; }

@media only screen and (max-width: 500px) { .site-nav .desktop-menu { display: none; } }

/** Burger menu for mobile */
@keyframes span1 { 0% { top: 0%;
    transform-origin: 50% 50%; }
  50% { top: 50%;
    transform: rotate(0deg) translateY(-50%); }
  100% { top: 50%;
    transform: rotate(45deg) translateY(-50%); } }

@keyframes span2 { 0% { opacity: 1; }
  45% { opacity: 1; }
  65% { opacity: 0; }
  100% { opacity: 0; } }

@keyframes span3 { 0% { bottom: 0%;
    transform-origin: 50% 50%; }
  45% { bottom: 50%;
    transform: rotate(0deg) translateY(50%); }
  100% { bottom: 50%;
    transform: rotate(-45deg) translateY(50%); } }

#togglemenu { display: none; }

@media only screen and (max-width: 500px) { #menu { display: none; } .menuopen #menu { display: block; } #togglemenu { display: block; cursor: pointer; } }

#togglemenu > span { display: inline-block; margin-left: 0.4rem; width: 1.1rem; height: 0.75rem; position: relative; vertical-align: middle; position: relative; bottom: 1px; }

#togglemenu > span > span { display: block; position: absolute; width: 100%; height: 2px; background: #999; }

#togglemenu > span > span:nth-child(1) { top: 0; transform-origin: 50% 0%; }

#togglemenu > span > span:nth-child(2) { top: 50%; margin-top: -1px; }

#togglemenu > span > span:nth-child(3) { bottom: 0; transform-origin: 50% 100%; }

.menuopen #togglemenu > span > span:nth-child(1) { animation: span1 0.25s; animation-iteration-count: 1; animation-fill-mode: forwards; }

.menuopen #togglemenu > span > span:nth-child(2) { animation: span2 0.25s; animation-iteration-count: 1; animation-fill-mode: forwards; }

.menuopen #togglemenu > span > span:nth-child(3) { animation: span3 0.25s; animation-iteration-count: 1; animation-fill-mode: forwards; }

.mobile-menu { visibility: hidden; }

.mobile-menu .site-nav { padding-top: 100px; display: flex; flex-flow: column nowrap; text-align: center; width: 100%; height: 100%; }

.mobile-menu .site-nav .page-link { margin: 0 !important; }

.mobile-menu .site-nav a { line-height: 100px; }

.mobile-menu .site-nav a:hover, .mobile-menu .site-nav a:active, .mobile-menu .site-nav a.active { background-color: var(--background-color); display: inline-block; border-width: 0; }

.menuopen .mobile-menu { visibility: visible; }

.mobile-menu { position: fixed; background-color: var(--dimmed-background-color); z-index: 1; width: 100%; height: 100%; top: 0; left: 0; bottom: 0; right: 0; }

@media only screen and (max-width: 600px) { .desktoponly { display: none; } }

/** Site footer  ********************************************************** */
.site-footer { font-size: 16px; background-color: var(--dimmed-background-color); color: #aaa; clear: both; margin-top: -100px; position: absolute; left: 0px; bottom: 0px; width: 100%; min-height: 100px; font-family: "Overpass", Helvetica, sans-serif !important; }

.site-footer a { color: #aaa; }

.site-footer .copyright { line-height: 100px; position: relative; float: left; left: 5%; padding: 0; margin: 0; }

.site-footer .contacticon { line-height: 100px; position: relative; float: right; right: 5%; padding: 0; margin: 0; }

.site-footer p { margin-bottom: 0; }

/** Pagination   ********************************************************** */
.pagination { width: 100% !important; background-color: var(--dimmed-background-color); display: block; }

.pagination .previous { position: absolute; left: 5%; float: left; }

.pagination .next { position: absolute; right: 5%; float: right; }

.pagination .pagination-inactive { opacity: 0.5; }

.paginationicon { font-size: 50px; }

.paginationicon a { color: var(--theme-color); }

.page-container { position: relative; min-height: 100vh; }

/** Page content   ********************************************************** */
.page-content { padding: 0; padding-top: 100px; /* VERTICAL PADDING FOR TITLE ON EVERY PAGE */ padding-bottom: 100px; }

.post-list { margin: 0px 0; list-style: none; }

.post-list > li { margin-bottom: 40px; }

.post-list h1, .post-list h2, .post-list h3, .post-list h4, .post-list h5, .post-list h6 { font-family: "Overpass", Helvetica, sans-serif !important; }

.post-list h2 { font-size: 32px; font-weight: bold; margin-top: 0px !important; }

.post-list p { margin: 0 !important; color: var(--text-color); }

.post-list a { text-decoration: none; }

.contacticon { font-size: 30px; display: block; margin: 10px; }

/** Posts  ********************************************************** */
.post-header { margin-top: 20px; margin-bottom: 40px; text-align: center; }

.post-title { font-size: 28pt; letter-spacing: -1px; line-height: 1; }

a.post-title { text-decoration: none; }

.post-content { font-family: "Overpass", Helvetica, sans-serif; /*    font-weight: 900; */ }

.post-content p { margin-bottom: 2em; }

.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 { font-family: "Martel", Georgia, sans-serif; margin-top: 2.1em; margin-bottom: 0.4em; }

.post-content h1 { font-size: 26pt; }

.post-content h2 { font-size: 22pt; }

.post-content h3 { font-size: 14pt; }

.post-content h4 { font-size: 10pt; }

.post-content ul, .post-content ol { margin-left: 1em !important; }

.post-content { margin-left: 10%; margin-right: 10%; line-height: 2em; }

@media (max-width: 700px) { .post-content { margin-left: 5%; margin-right: 5%; } }

.post-meta { font-size: 10pt; color: var(--dimmed-text-color) !important; margin-bottom: 0px; }

/**  Portfolio grid ********************************************************** */
.clearfix:before, .clearfix:after { content: " "; display: table; }

.clearfix:after { clear: both; }

ul.portfolio { list-style-type: none; margin: 0; padding: 0; line-height: 0; width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); font-family: "Overpass", Helvetica, sans-serif; }

@media (max-width: 1290px) { ul.portfolio { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 960px) { ul.portfolio { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 600px) { ul.portfolio { grid-template-columns: repeat(1, 1fr); } }

ul.portfolio li { position: relative; }

.portfolio div.info { line-height: 1.2em; position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; }

div.info { padding-top: 1em; opacity: 0.0; transition-duration: .3s; -moz-transition-duration: .3s; -webkit-transition-duration: .3s; -o-transition-duration: .3s; }

div.info .project-name { font-size: 24px; font-weight: 400; color: #fff; padding-bottom: 0.25em; }

div.info .project-date { font-size: 18px; font-weight: 100; color: #ccc; }

a:hover div.info, a:active div.info { opacity: 1.0; }

.portfolio .thumbnail { width: 100% !important; height: auto !important; }

li.darken { background-color: #000; }

li.darken a:hover div.info, li.darken a:active div.info { background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 20; }

li.darken a:hover img, li.darken a:active img { z-index: 1; }

/**  Portfolio pages ********************************************************** */
figcaption { font-size: 0.8em; line-height: 1.5em; }

.gallery { display: flex; min-width: 100%; justify-content: space-around; flex-wrap: wrap; margin: 20px -5px; /* top/bottom left-right */ }

/* for galleries where we want the height to be equal for the whole thing. Note that in that case we might end up with images cropped due to object-fit: cover below That's what we want as it's better than images being distorted. */
.fit-height img { min-height: 100%; }

.gallery .gallery-item { padding: 5px; flex: 1 0 24%; }

.gallery .gallery-item img { max-width: 100%; object-fit: cover; }

@media (max-width: 1290px) { .gallery { flex-wrap: wrap; } .gallery .gallery-item { flex: 1 0 40%; } }

@media (max-width: 600px) { .gallery { margin: 20px 0; } .gallery .gallery-item { flex: 1 0 100%; } .gallerysmall .gallery-item { flex: 1 0 40% !important; } }

.rowcol { width: 100%; height: 100%; float: left; object-fit: cover; box-sizing: border-box; padding: 5px; }

.wide-image-row { width: 100%; margin-bottom: 20px; justify-content: space-around; display: flex; }

.wide-image-row img { max-width: 100%; margin: 0; padding: 0; align-self: flex-start; /* fixes Safari image stretch */ }

.alignright { float: right; display: block; max-width: 50%; }

.alignright img { max-width: 100%; margin: 0; padding: 0; }

@media (max-width: 700px) { .alignright { max-width: 100% !important; } }

.wide-video-row { width: 100%; margin-bottom: 20px; justify-content: space-around; }

.wide-video-row img { max-width: 100%; margin: 0; padding: 0; }

.columnstwo { line-height: 0; -webkit-column-count: 2; -webkit-column-gap: 0px; -moz-column-count: 2; -moz-column-gap: 0px; column-count: 2; column-gap: 10px; }

.columnstwo .columns-col { margin: 0px; margin-bottom: 10px; }

.columnstwo .columns-col, .columnstwo img, .columnstwo iframe { width: 100%; height: auto; min-height: 50px; }

@media (max-width: 700px) { .columnstwo { -webkit-column-count: 1; -webkit-column-gap: 0px; -moz-column-count: 1; -moz-column-gap: 0px; column-count: 1; column-gap: 0px; } }

.videowrapper { float: none; clear: both; width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; }

.videowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/**  Lab ********************************************************** based on https://css-tricks.com/seamless-responsive-photo-grid/ If we have a very new browser (post-2021) we can use masonry CSS? https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/ */
#lab { /* Prevent vertical gaps */ line-height: 0; }

/*   -webkit-column-count: 4; -webkit-column-gap:   0px; -moz-column-count:    4; -moz-column-gap:      0px; column-count:         4; column-gap:           0px; flex-direction: column; */
/* @media (max-width: 1290px) { #lab { -moz-column-count:    3; -webkit-column-count: 3; column-count:         3; } } @media (max-width: 960px) { #lab { -moz-column-count:    2; -webkit-column-count: 2; column-count:         2; } } @media (max-width: 600px) { #lab { -moz-column-count:    1; -webkit-column-count: 1; column-count:         1; } } */
/* Colcade setup */
/* Using floats */
.grid-col { float: left; width: 25%; display: block; }

@media (max-width: 1290px) { .grid-col { width: 33.333%; } .grid-col--4 { display: none; } }

@media (max-width: 960px) { .grid-col { width: 50%; } .grid-col--3 { display: none; } }

@media (max-width: 600px) { .grid-col { width: 100%; } .grid-col--2 { display: none; } }

#lab img { /* Just in case there are inline attributes */ width: 100% !important; height: auto !important; }

/**  About + Blog Posts ********************************************************** */
.long-text { max-width: 800px; width: 66%; margin: 0 auto; }

.long-text p { text-align: justify; }

@media (max-width: 700px) { .long-text { width: 90%; } }

.long-text figure { padding: 5pt; }

/*# sourceMappingURL=main.css.map */