header{position:fixed;top:0;display:flex;justify-content:flex-end;height:90px}header .brand{order:1;margin-top:10px;margin-right:20px}header::after{content:'';order:3;height:10px;width:106px;background-color:#000;position:absolute;top:100px}#hero{margin-top:60px;height:240px;padding:20px;position:relative;margin-bottom:40px}#hero .proj-link{position:absolute;bottom:0px;left:10px}#hero::before{content:'';background-color:#bbbcbe;position:absolute;top:0;right:30px;z-index:-2;width:70vw;height:500px}#hero::after{content:'';border:2px solid #f00;position:absolute;top:10px;right:15px;z-index:-1;width:70vw;height:500px}#intro{margin-top:140px;overflow:hidden}#intro h2{padding:10px;margin:0;text-align:right;background-color:#0570bc;color:#fff;background-image:radial-gradient(at 6% 13%, hsl(0,69%,62%) 0, transparent 50%),radial-gradient(at 98% 100%, hsl(224,89%,30%) 0, transparent 50%)}#intro .intro{margin:1em 2em;font-size:15px;line-height:2}#intro>a{margin:0 2em;color:#0570bc;text-decoration:none;text-align:right;float:right;clear:both}#intro-contact{background-color:#0570bc;color:#fff;clear:both;margin:1em;padding:1em}#intro-contact h2{margin:0 0 1em}#intro-contact .contact-list{padding:0;margin:0;font-size:14px;list-style:none}#intro-contact .contact-list li{word-break:break-all;padding:1em 0}#intro-contact .contact-list span{display:inline-block;width:80px}#intro-contact .contact-list a{color:#fff}