html{height:100%;box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}*{margin:0;padding:0}body{margin:0;min-height:100%;display:flex;flex-flow:row wrap;text-align:center}#inner-flex-container{display:flex;flex-direction:column;width:calc(100% - 250px);order:1}nav{flex:1 250px;order:0}header{flex:1;order:0;background:rgba(200,200,200,.5);z-index:1;display:flex;align-items:center;flex-direction:column}header li{list-style:none}main{flex:4;order:1;padding:0 4em}footer{flex:1;order:2}em{font-style:italic}header a{text-decoration:none;color:#000}a span{font-weight:100;transition:all .5s;border-bottom:1px solid}a span:nth-child(2){transition-delay:.1s}a span:nth-child(3){transition-delay:.2s}a span:nth-child(4){transition-delay:.3s}a:hover span{font-weight:700}a:hover span:nth-child(4){transition-delay:.3s}a:hover span:nth-child(3){transition-delay:.2s}a:hover span:nth-child(2){transition-delay:.1s}a:hover span:nth-child(1){transition-delay:0s}a.hover-shadow:hover{text-shadow:1px 1px 0 #ddd,2px 2px 0 #ddd,3px 3px 0 #ddd}a.hover-color:hover{border-color:#8b008b}a[href^="mailto:"]::before{content:'📧';padding-bottom:.2em;position:relative;display:block;font-size:2em}p.copyright{font-family:monospace;margin-top:.2em}@media screen and (max-width:500px){body{flex-direction:column}nav{flex:1;order:1}main{padding:0 2em}header{max-height:6em}#inner-flex-container{width:100%;flex:1}}