:root{--contentWidth:80vmin}body,html{overflow-x:hidden;position:relative}body{background-color:#333;display:flex;font-family:Helvetica,Arial,sans-serif;margin:0;width:100vw}a:link{color:#3cf}a:visited{color:#c3f}h2{display:inline-block}#gl_canvas{opacity:0;position:fixed;transition:opacity 2s}#content{color:#ddd;margin:0 auto;max-width:var(--contentWidth);overflow-x:visible;padding:0 1em;transition:transform 1s ease 0s;z-index:5}.screen{background-color:rgba(0,0,0,.625);padding:0 1em 1em;position:relative}.leftscreen{transform:translateX(-100vw)}.offscreen{left:0;position:absolute;right:0;transform:translateX(100vw);transition:visibility 0s 1s;visibility:collapse}.focused{transition:visibility 0s 0s;visibility:visible}.centered{align-items:center;display:flex;flex-direction:column;height:100vh;padding:0}.title{animation:fadein 2s ease 1s forwards;font-size:8vmin;margin:auto 0;opacity:0;text-align:center}.prompt{animation:fadein 1s ease 4s forwards;font-size:1em;opacity:0}.spacer{height:50vh}#projects{position:relative}#project-selection{background-color:transparent;display:flex;flex-wrap:wrap;justify-content:space-between;margin:0 -4px;padding:0}#project-selection>div{background-color:rgba(0,0,0,.625);flex:1 1 0;margin:0 4px 8px;min-width:35vmin;padding:0 1em}#project-selection>#projects-title{flex:1 1 60%}#projects .clickable{cursor:pointer}#projects .clickable:hover{background-color:rgba(0,128,255,.625)}#projects .clickable:active{background-color:rgba(128,192,255,.625)}#project-selection>div{display:flex;flex-direction:column;justify-content:space-between}#mobile-ocr{left:0;position:absolute;right:0}.tech-items{display:table;justify-content:space-evenly;padding:0}.tech-items li{display:table-row}.tech-items li a,.tech-items li span,.tech-items li svg{display:table-cell}.tech-items li a,.tech-items li span{padding-right:1em;text-align:right}.contact-list{list-style:none}.contact-list li{padding-bottom:.125em;padding-top:.125em}.contact-list img{margin-right:.5em}.contact-list a,.contact-list img{vertical-align:middle}.screen>a>svg,h2 svg{fill:currentColor;height:.75em;width:1em}ul.two-column{column-count:2}ul.auto-column{display:grid;grid-template-columns:repeat(auto-fit,minmax(10em,1fr))}ul.auto-column>li{display:inline-block list-item}@-moz-keyframes fadein{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadein{0%{opacity:0}to{opacity:1}}@-o-keyframes fadein{0%{opacity:0}to{opacity:1}}@keyframes fadein{0%{opacity:0}to{opacity:1}}