styles.css

:root{--colorAlpha: hsl(170, 60%, 35%);--colorBeta: hsl(192, 68%, 35%);--colorGamma: hsl(158, 20%, 42%);--colorSubdued: hsl(170, 2%, 55%);--colorShadow: hsl(170, 2%, 55%);--colorBlack: hsl(170, 16%, 9%);--colorText: hsl(170, 6%, 29%);--colorTextLight: hsl(170, 60%, 92%);--colorAccent: hsl(165, 61%, 31%);--colorErr: hsl(6, 100%, 47%);--colorAccentLight: hsl(186, 59%, 50%);--colorSubduedBg: hsl(174, 2%, 95%);--colorTransparent: hsla(170, 100%, 100%, 0);--colorGradA: hsl(170, 60%, 35%);--colorGradB: hsl(192, 69%, 30%);--breakpoint: 800px}#resume{background-color:#fff;padding:1em}#skills{float:left;clear:right;width:60%;margin-left:4%}#summary{float:left;width:35%}#summary ul{float:left}#resume section{min-width:960px;max-width:1280px}#resume h2{clear:both}#resume h4{margin:0;padding:0}#resume #summary{margin:0}#resume #summary h2{width:100%}#resume ul{font-size:.875em;margin-top:2px}#resume .inset{clear:both;margin:0 0 0 20px}#resume .job h3{border-bottom:solid .0625em #afafaf;margin:0 0 0 0}#resume #s-k-i-l-l-s{font-family:"Ubuntu Mono","Monaco";font-size:23px;float:left;letter-spacing:30px;line-height:1.58em;margin:12px 0 0 0;text-transform:uppercase;width:1em}#resume .skills{font-size:.85em;line-height:1.55em;max-width:700px;word-spacing:4px}@media all{.page-break{display:none}}.accent{color:var(--colorAccent)}.h2-dark{font-size:1.5em;font-family:"Ubuntu",sans-serif;color:var(--colorBlack)}.h1-dark{font-size:2em;font-family:"Ubuntu",sans-serif;color:var(--colorBlack)}.print-only{display:none}body{font-family:"PT Sans",Geneva,Verdana,sans-serif;font-weight:normal;font-size:1.25rem;line-height:1.5;background:url("/bg.png");background-attachment:fixed;color:var(--colorText)}main a{color:var(--colorAccent);text-decoration:underline}main a:hover{color:var(--colorAccentLight) !important;transition:color 250ms ease-in-out;-o-transition:color 250ms ease-in-out;-moz-transition:color 250ms ease-in-out;-webkit-transition:color 250ms ease-in-out}main a.grow{transition:transform 250ms ease-out,color 250ms ease-out}a.contrast{color:inherit}a.contrast:hover{color:var(--colorTextLight) !important;transition:color 250ms ease-in-out;-o-transition:color 250ms ease-in-out;-moz-transition:color 250ms ease-in-out;-webkit-transition:color 250ms ease-in-out}table{border-spacing:0}table tbody{line-height:1.67}table th{background-color:var(--colorAlpha);text-align:left;color:#fff}table tr:nth-child(even){background-color:var(--colorSubduedBg)}table th,table td{padding:5px;border-bottom:solid 1px var(--colorSubdued)}header{background-color:#fff;border-bottom:solid 4px;border-bottom-color:var(--colorBlack);box-shadow:0 4px 20px var(--colorShadow)}#logo{height:150px;min-width:142px}header .logo{height:150px}header .logo a{display:block;height:150px;text-decoration:none;color:inherit}header .logo a:visited{color:inherit}header h1{margin:0 0 0 0;padding:0;font-weight:normal}header h1 a{display:block;text-decoration:none;color:inherit}header h1 a:visited{color:inherit}.site-title{font-family:"Ubuntu",sans-serif;font-weight:bold;font-size:1.5rem;line-height:1.1}.site-title .title-name{display:block;color:var(--colorBlack)}.site-title .title-tag{display:block;color:#1b856c}#nav-main-parent{flex-direction:column}#hamburger{display:none;font-size:32px;align-self:flex-end;cursor:pointer}header nav ul span[data-action=close]{display:none;text-align:right;padding:0 4px 0 0;cursor:default}@media only screen and (max-width: 600px){#nav-main-parent{width:100%;flex-direction:row;align-items:center;padding-right:1rem}#hamburger{display:block;margin-left:auto;align-self:center}header nav ul span[data-action=close]{display:initial}header nav ul{display:none;width:240px;flex-direction:column;position:absolute;right:0px;top:16px;background-color:#fff;padding-left:1rem !important;box-shadow:0px 4px 16px var(--colorShadow)}header nav ul.show{display:flex}header nav a.active{text-decoration:underline}}@media screen and (min-width: 601px){header{align-items:center}#nav-main-parent{flex-direction:row;align-items:center;flex:1;justify-content:flex-start;margin-right:15%;}header nav{margin-left:4.5rem;flex:1;}#nav-main{top:15px}header nav ul{display:flex;justify-content:space-between;align-items:flex-start;}header nav a::after{content:"";position:absolute;left:0;right:0;bottom:30px;height:4px;background:var(--colorBeta);opacity:0;transform:translateY(30px);transition:transform 400ms ease-out,opacity 400ms ease-out}header nav a:hover::after{opacity:1;transform:translateY(0)}header nav a.active::after{opacity:1;transform:translateY(0)}}@media screen and (min-width: 601px) and (max-width: 820px){#nav-main-parent{padding-left:1rem;}.site-title{font-size:1.15rem}header nav{margin-left:1rem}header nav a{margin-right:10px;font-size:.95rem;}}header nav ul{margin:0;padding:0;white-space:nowrap;}header nav{position:relative;top:4px}header nav li{list-style-type:none;display:inline}header nav a{display:inline-flex;flex-direction:column;position:relative;vertical-align:top;padding-bottom:34px;margin-right:16px;color:var(--colorBlack);font-family:"Ubuntu",sans-serif;font-weight:bold;white-space:nowrap;text-decoration:none;transition:border-bottom 400ms ease-out,padding-bottom 400ms ease-out;-o-transition:border-bottom 400ms ease-out,padding-bottom 400ms ease-out;-moz-transition:border-bottom 400ms ease-out,padding-bottom 400ms ease-out;-webkit-transition:border-bottom 400ms ease-out,padding-bottom 400ms ease-out}header nav a span{align-self:center}header nav a.active{color:var(--colorAccentLight)}header nav a:hover{color:var(--colorAccentLight);}#squirrel{position:relative;top:4000px;text-align:center}#squirrel div{margin:0 auto;text-align:center}.teaser{max-width:1200px;margin:1em auto;padding:14px 42px;background-color:#fff;border-radius:15px;filter:drop-shadow(0 0 .75rem #f0f0f0)}.teaser-header{margin-bottom:4px}.heading{padding-bottom:.25em;border-bottom:solid 1px var(--colorSubdued);margin-bottom:0}.heading a{text-decoration:none}.blog-post-title{font-family:"Ubuntu",sans-serif;font-size:1.25rem;margin:0;border-bottom:solid 1px;border-bottom-color:var(--colorSubdued);color:var(--colorAccent);text-transform:uppercase}.blog-post-title a{text-decoration:none;color:var(--colorAccent)}.blog-post-title a:hover{color:var(--colorAccentLight) !important;transition:color 300ms ease-in-out;-o-transition:color 300ms ease-in-out;-moz-transition:color 300ms ease-in-out;-webkit-transition:color 300ms ease-in-out}.case-study-title{font-family:"Ubuntu",sans-serif;font-size:1.25rem;margin:0;border-bottom:solid 1px;border-bottom-color:var(--colorSubdued);color:var(--colorAccent);text-transform:uppercase}.case-study-title a{text-decoration:none;color:var(--colorAccent)}.case-study-title a:hover{color:var(--colorAccentLight) !important;transition:color 300ms ease-in-out;-o-transition:color 300ms ease-in-out;-moz-transition:color 300ms ease-in-out;-webkit-transition:color 300ms ease-in-out}.sub-heading{color:var(--colorSubdued);font-size:1.125rem;padding-top:6px}.sub-heading a{color:var(--colorAccent);font-weight:bold;text-decoration:none}.page-title{padding-top:0em;margin-top:0em;margin-bottom:0em}.page-subtitle{padding-top:0em;margin-top:0em;margin-bottom:1em}.post-date{font-size:1rem;color:var(--colorSubdued)}.post-date a{text-decoration:none}.author{font-size:1rem;font-weight:bold;color:var(--colorGamma)}.case-study-date{font-size:1rem;color:var(--colorSubdued)}.case-study-date a{text-decoration:none}.has-dropcap:first-letter{font-family:serif;float:left;font-size:6rem;line-height:.65;margin:.1em .1em .2em 0}.dropcap{color:var(--colorAlpha);font-family:serif;float:left;font-size:6rem;line-height:1;margin:.1em .1em .2em 0;padding:.1em}.dropcap:before,.dropcap:after{content:"";display:block}.dropcap:before{margin-top:-.2em}.dropcap:after{margin-bottom:-.15em}.sr-only:not(:focus):not(:active){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.video-embed{margin:1em auto}video{max-width:100%;height:auto}@media screen and (min-width: 900px){.video-embed iframe{width:600px;height:400px}}.note{border-width:4px;border-style:solid;border-image:linear-gradient(to bottom, var(--colorGradA) 43%, var(--colorGradB)) 1 100%;border-color:var(--colorAccent);margin-left:2em;padding:1em 2em 1em 0;background-color:var(--colorSubduedBg);max-width:960px;margin-bottom:2em;line-height:1.5}.alt-note{border-width:4px;border-style:solid none none solid;border-color:var(--colorAccent);padding:1em 2em 1em 2em;background-color:color-mix(in hsl, var(--colorSubduedBg) 50%, var(--colorTransparent));max-width:1200px;margin:1em auto;line-height:1.5;box-shadow:4px 4px 8px var(--colorShadow)}.quotation{font-family:"PT Serif","Garamond",serif}.quotation::before{position:relative;left:-10px;top:12px;float:inline-start;padding-right:8px;content:"❝";font-size:2em}.note h2{padding-left:1em;font-size:2rem}.note h3,h4,h5,h6{text-indent:1rem;font-size:1rem}.note ul,.note p{margin-left:1rem}.note li{margin-bottom:.5rem;margin-top:.5rem}.media-block{display:flex;align-items:flex-start;max-width:1024px}.media-block img,iframe{margin-right:1rem !important}img.circle-frame{border:solid 3px var(--colorBeta);border-radius:50%;background:url("/bg.png");background-attachment:fixed}.media-block>div{flex:1}.media-block>div :first-child{margin-top:0}.responsive-row{display:flex}@media screen and (max-width: 900px){.responsive-row{flex-direction:column;align-items:center}}@media screen and (max-width: 600px){main{padding-top:63px !important}.media-block{flex-direction:column}#logo{height:auto;min-width:auto;width:48px !important}header{padding:.5rem 0 0 .5rem !important;position:fixed;z-index:5;}header .logo,header .logo a{height:51px}header .site-title{font-size:.85rem}header nav a{padding-bottom:0;height:48px}header nav a span{display:none}.blog-post{padding-top:1.5rem}}.sidebar-block{background-color:rgba(255,255,255,.45);border:solid 1px #efefef;font-size:95%;overflow:hidden;padding:0 1em 1em 1em}.sidebar-block a{text-decoration:none;color:#8f8f8f;text-shadow:0px -1px 0px #666}.sidebar-block a:visited{color:#8f8f8f}.sidebar-block h3{color:#9f9f9f;text-align:center;text-shadow:0px -1px 0px #666}.sidebar-block ul{list-style:none;margin:0;padding:0}.sidebar-block .icon{font-size:1.25em;padding-right:5px}.banner{justify-content:center;align-items:center;background:var(--colorGradA);background:linear-gradient(139deg, var(--colorGradA) 35%, var(--colorGradB) 100%);color:#fff;width:100%;padding:0;margin:0}article.blog-post{background:#fff}article.case-study{background:#fff}.bg-gradient{display:flex;justify-content:center;align-items:center;background:var(--colorGradA);background:linear-gradient(139deg, var(--colorGradA) 35%, var(--colorGradB) 100%);color:#fff}.button{display:inline-block;box-sizing:border-box;font-family:"Ubuntu",sans-serif;font-weight:bold;font-size:1rem;color:#fff;text-align:center;text-decoration:none;background-image:linear-gradient(to right, #1b856c, #26b795);border:none;border-radius:3em;min-width:10em;height:3em;line-height:3em;padding:0 1.5em;cursor:pointer;transition:all .3s ease}.button:hover{color:#fff !important;transform:scale(1.1);transition:all .3s ease;}blockquote{margin:0;background-color:var(--colorGamma);color:#f9fbfa;font-family:"PT Serif","Garamond",serif;padding-left:.875em;padding-bottom:.25em;padding-top:.25em;border-left:solid .375em var(--colorBlack)}pre{padding:16px;line-height:1.2;overflow:scroll}pre code{font-size:.875rem;overflow-x:scroll}p code,li code{background-color:#efefef;bottom:2px;font-size:.625em;line-height:1.5em;padding:.25em;position:relative;overflow:scroll}.note code{background-color:#fff}body>footer{background-color:rgba(255,255,255,.45);border:solid 1px #efefef;font-size:95%;overflow:hidden;padding:1em 1em .5em 1em}a.contact-me{cursor:pointer}#contact-form{position:fixed;top:10vh;width:75%;margin:0 auto;z-index:10}@media screen and (max-width: 800px){#contact-form{width:96%;margin:0 2% 0 2%}}#contact-form .modal{box-shadow:0px 4px 16px var(--colorShadow);border-left:solid 16px var(--colorBlack);background:var(--colorGradA);background:linear-gradient(139deg, var(--colorGradA) 35%, var(--colorGradB) 100%);padding:16px;position:absolute}#contact-form .modal span[data-action=close]{float:right;color:#fff;cursor:pointer}#contact-form .modal span[data-action=close]::after{content:"close";vertical-align:text-bottom;margin-left:4px}#contact-form .modal label{color:#fff;display:block}@media screen and (max-width: 800px){#contact-form .modal label{font-size:1.125rem}}#contact-form .modal input{margin-bottom:16px}#contact-form .modal input:invalid{border:solid 2px var(--colorErr)}#contact-form .modal input[type=submit]{float:right}#contact-form .modal input[name=hpf]{visibility:collapse}#contact-form .modal textarea{margin-top:8px;margin-bottom:16px;display:block;width:100%}#contact-form .modal p.success{color:#fff;text-align:center}#contact-form .modal p.error{color:var(--colorErr);text-align:center}@media screen and (min-width: 601px){main:has(>.w-70-ns:only-child){padding-left:0;padding-right:0}main>.w-70-ns:only-child{margin-left:auto;margin-right:auto;padding-right:0}}@media screen and (max-width: 600px){main>.w-70-ns:only-child{width:100%;padding-right:0}}main>.w-70-ns>.teaser:first-child{margin-top:0}.home .teaser h2,.home .teaser h3,.home .teaser p,.home .teaser ul,.home .alt-note h2,.home .alt-note h3,.home .alt-note p,.home .alt-note ul{margin-top:.4em;margin-bottom:.4em}.home .teaser>:first-child,.home .alt-note>:first-child{margin-top:.6em}.home .teaser>:last-child,.home .alt-note>:last-child{margin-bottom:.6em}