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)}.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}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}#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;padding-right:1rem}#hamburger{display:block}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}}header nav ul{margin:0;padding:0}header nav{position:relative;top:4px}header nav li{list-style-type:none;display:inline}header nav a{display:inline-flex;flex-direction:column;padding-bottom:34px;margin-right:16px;color:var(--colorText);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);border-bottom:solid 4px #fff;padding-bottom:0}header nav a.active:hover{padding-bottom:0;border-bottom-color:#fff}header nav a:hover{color:var(--colorAccentLight);padding-bottom:4px;border-bottom:solid 4px var(--colorBeta);transition:border-bottom 500ms ease-out,padding-bottom 500ms ease-out;-o-transition:border-bottom 500ms ease-out,padding-bottom 500ms ease-out;-moz-transition:border-bottom 500ms ease-out,padding-bottom 500ms ease-out;-webkit-transition:border-bottom 500ms ease-out,padding-bottom 500ms ease-out}#squirrel{position:relative;top:4000px;text-align:center}#squirrel div{margin:0 auto;text-align:center}.teaser{max-width:1200px;background-color:#fff;margin:0 0 3em 0;box-shadow:16px 8px 32px #ddd;padding:.75em 1.5em .75em 1.5em}.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}@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:960px;margin-bottom:2em;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}header .logo,header .logo a{height:51px}header h1{display:none}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}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}