style.css

@-webkit-keyframes rotate45-openC{0%{transform:rotate(0deg);right:50%}50%{transform:rotate(45deg);right:50%}to{transform:rotate(45deg);right:200%}}@keyframes rotate45-openC{0%{transform:rotate(0deg);right:50%}50%{transform:rotate(45deg);right:50%}to{transform:rotate(45deg);right:200%}}@-webkit-keyframes rotate45-openD{0%{transform:rotate(0deg);left:50%}50%{transform:rotate(45deg);left:50%}to{transform:rotate(45deg);left:200%}}@keyframes rotate45-openD{0%{transform:rotate(0deg);left:50%}50%{transform:rotate(45deg);left:50%}to{transform:rotate(45deg);left:200%}}@-webkit-keyframes closeC-rotate45{0%{transform:rotate(45deg);right:200%}50%{transform:rotate(45deg);right:50%}to{transform:rotate(0deg);right:50%}}@keyframes closeC-rotate45{0%{transform:rotate(45deg);right:200%}50%{transform:rotate(45deg);right:50%}to{transform:rotate(0deg);right:50%}}@-webkit-keyframes closeD-rotate45{0%{transform:rotate(45deg);left:200%}50%{transform:rotate(45deg);left:50%}to{transform:rotate(0deg);left:50%}}@keyframes closeD-rotate45{0%{transform:rotate(45deg);left:200%}50%{transform:rotate(45deg);left:50%}to{transform:rotate(0deg);left:50%}}@-webkit-keyframes rotate-45-openC{0%{transform:rotate(0deg);right:50%}50%{transform:rotate(-45deg);right:50%}to{transform:rotate(-45deg);right:200%}}@keyframes rotate-45-openC{0%{transform:rotate(0deg);right:50%}50%{transform:rotate(-45deg);right:50%}to{transform:rotate(-45deg);right:200%}}@-webkit-keyframes rotate-45-openD{0%{transform:rotate(0deg);left:50%}50%{transform:rotate(-45deg);left:50%}to{transform:rotate(-45deg);left:200%}}@keyframes rotate-45-openD{0%{transform:rotate(0deg);left:50%}50%{transform:rotate(-45deg);left:50%}to{transform:rotate(-45deg);left:200%}}@-webkit-keyframes closeC-rotate-45{0%{transform:rotate(-45deg);right:200%}50%{transform:rotate(-45deg);right:50%}to{transform:rotate(0deg);right:50%}}@keyframes closeC-rotate-45{0%{transform:rotate(-45deg);right:200%}50%{transform:rotate(-45deg);right:50%}to{transform:rotate(0deg);right:50%}}@-webkit-keyframes closeD-rotate-45{0%{transform:rotate(-45deg);left:200%}50%{transform:rotate(-45deg);left:50%}to{transform:rotate(0deg);left:50%}}@keyframes closeD-rotate-45{0%{transform:rotate(-45deg);left:200%}50%{transform:rotate(-45deg);left:50%}to{transform:rotate(0deg);left:50%}}@-webkit-keyframes rotate135-openC{0%{transform:rotate(0deg);right:50%}50%{transform:rotate(135deg);right:50%}to{transform:rotate(135deg);right:-200%}}@keyframes rotate135-openC{0%{transform:rotate(0deg);right:50%}50%{transform:rotate(135deg);right:50%}to{transform:rotate(135deg);right:-200%}}@-webkit-keyframes rotate135-openD{0%{transform:rotate(0deg);left:50%}50%{transform:rotate(135deg);left:50%}to{transform:rotate(135deg);left:-200%}}@keyframes rotate135-openD{0%{transform:rotate(0deg);left:50%}50%{transform:rotate(135deg);left:50%}to{transform:rotate(135deg);left:-200%}}@-webkit-keyframes closeC-rotate135{0%{transform:rotate(135deg);right:-200%}50%{transform:rotate(135deg);right:50%}to{transform:rotate(0deg);right:50%}}@keyframes closeC-rotate135{0%{transform:rotate(135deg);right:-200%}50%{transform:rotate(135deg);right:50%}to{transform:rotate(0deg);right:50%}}@-webkit-keyframes closeD-rotate135{0%{transform:rotate(135deg);left:-200%}50%{transform:rotate(135deg);left:50%}to{transform:rotate(0deg);left:50%}}@keyframes closeD-rotate135{0%{transform:rotate(135deg);left:-200%}50%{transform:rotate(135deg);left:50%}to{transform:rotate(0deg);left:50%}}*{font-family:'Courier New',Courier,monospace;font-display:auto}#app,body,html{height:100%}body{margin:0;min-width:400px}#app{width:100%;position:relative;overflow:hidden}#overlay-c,#overlay-d{background:#000;position:absolute;top:-200%;width:200%;bottom:-200%}#overlay-c{right:50%;transform-origin:center right}#overlay-d{left:50%;transform-origin:center left}#overlay-c.rotate45-open,#overlay-d.rotate45-open{-webkit-animation-name:rotate45-openC;animation-name:rotate45-openC;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}#overlay-d.rotate45-open{-webkit-animation-name:rotate45-openD;animation-name:rotate45-openD}#overlay-c.close-rotate-45,#overlay-c.close-rotate45,#overlay-c.rotate-45-open,#overlay-d.close-rotate45,#overlay-d.rotate-45-open{-webkit-animation-name:closeC-rotate45;animation-name:closeC-rotate45;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}#overlay-c.close-rotate-45,#overlay-c.rotate-45-open,#overlay-d.close-rotate45,#overlay-d.rotate-45-open{-webkit-animation-name:closeD-rotate45;animation-name:closeD-rotate45}#overlay-c.close-rotate-45,#overlay-c.rotate-45-open,#overlay-d.rotate-45-open{-webkit-animation-name:rotate-45-openC;animation-name:rotate-45-openC}#overlay-c.close-rotate-45,#overlay-d.rotate-45-open{-webkit-animation-name:rotate-45-openD;animation-name:rotate-45-openD}#overlay-c.close-rotate-45{-webkit-animation-name:closeC-rotate-45;animation-name:closeC-rotate-45}#overlay-c.close-rotate135,#overlay-c.rotate135-open,#overlay-d.close-rotate-45,#overlay-d.close-rotate135,#overlay-d.rotate135-open{-webkit-animation-name:closeD-rotate-45;animation-name:closeD-rotate-45;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}#overlay-c.close-rotate135,#overlay-c.rotate135-open,#overlay-d.close-rotate135,#overlay-d.rotate135-open{-webkit-animation-name:rotate135-openC;animation-name:rotate135-openC}#overlay-c.close-rotate135,#overlay-d.close-rotate135,#overlay-d.rotate135-open{-webkit-animation-name:rotate135-openD;animation-name:rotate135-openD}#overlay-c.close-rotate135,#overlay-d.close-rotate135{-webkit-animation-name:closeC-rotate135;animation-name:closeC-rotate135}#overlay-d.close-rotate135{-webkit-animation-name:closeD-rotate135;animation-name:closeD-rotate135}#c-svg,#d-svg{position:absolute;top:50%;transform:translateY(-50%);width:25%;height:auto}#c-svg{right:0}#d-svg{left:0}#content-header>h1,.overlay-link{color:#fff;text-transform:uppercase}.overlay-link{display:inline-block;cursor:pointer}@media screen and (max-width:599px){#c-svg,#d-svg{width:64px;height:auto}.overlay-link{font-size:14px;width:80px;text-align:center}#about-link,#projects-link{position:absolute;top:calc(50% - 32px)}#about-link{right:0;transform:translateY(-50%) rotate(-45deg)}#projects-link{transform:translateY(-50%) rotate(45deg);left:0}#contact-link{position:absolute;transform:translateY(-50%) rotate(-135deg);top:calc(50% + 32px);right:0}}@media screen and (min-width:600px) and (max-width:949px){#c-svg,#d-svg{width:96px;height:auto}.overlay-link{font-size:18px;width:120px;text-align:center}#about-link,#projects-link{position:absolute;top:calc(50% - 50px)}#about-link{right:0;transform:translateY(-50%) rotate(-45deg)}#projects-link{transform:translateY(-50%) rotate(45deg);left:0}#contact-link{position:absolute;transform:translateY(-50%) rotate(-135deg);top:calc(50% + 50px);right:0}}@media screen and (min-width:950px){#c-svg,#d-svg{width:96px;height:auto}.overlay-link{font-size:18px;width:120px;text-align:center}#about-link,#projects-link{position:absolute;top:calc(50% - 50px)}#about-link{right:0;transform:translateY(-50%) rotate(-45deg)}#projects-link{transform:translateY(-50%) rotate(45deg);left:0}#contact-link{position:absolute;transform:translateY(-50%) rotate(-135deg);top:calc(50% + 50px);right:0}}#content{background:#fff;position:relative;width:100%}#content-header{height:50px;position:fixed;top:0;left:0;right:0;display:flex;flex-direction:row;align-items:center;justify-content:center;background:#000;box-shadow:0 0 2px 0 rgba(0,0,0,.5)}#content-header>h1{text-align:center}#home-link{position:absolute;top:0;left:4px;bottom:0}#home-link-img{margin-top:9px;height:32px;width:auto;transform-origin:center}#social-links{position:absolute;right:4px;top:0;bottom:0;display:flex;flex-direction:row;align-items:center}#social-links>a>img{height:32px;width:auto}.content-link{color:#000;display:inline-block;text-transform:uppercase;cursor:pointer}#content-body{margin:50px auto}@media screen and (max-width:599px){.content-link{font-size:14px}#content-body{padding:10px;width:100%}}@media screen and (min-width:600px) and (max-width:949px){.content-link{font-size:16px}#content-body{padding:10px 20%;width:450px}}@media screen and (min-width:950px){.content-link{font-size:18px}#content-body{padding:10px 20%;width:600px}}#content-about,#content-contact{display:flex;flex-direction:column;align-items:center;justify-content:center}.green{color:green;font-weight:700}div.about-changer,html,p.about{width:100%}@media screen and (max-width:599px){p.about{font-size:24px}img.about{width:50%;height:auto;border:10px solid #000;border-radius:50%}}@media screen and (min-width:600px) and (max-width:949px){p.about{font-size:28px}img.about{width:35%;height:auto;border:10px solid #000;border-radius:50%}}@media screen and (min-width:950px){p.about{font-size:32px}img.about{width:35%;height:auto;border:10px solid #000;border-radius:50%}}.project{display:flex;flex-direction:row;align-items:center;justify-content:center;height:256px;color:inherit;text-decoration:inherit}div.project-logo{height:128px;width:128px;flex-shrink:0}img.project-logo{height:100%;width:100%}.project-details{margin-left:5px}@media screen and (max-width:599px){p.contact{font-size:24px}}@media screen and (min-width:600px) and (max-width:949px){p.contact{font-size:28px}}@media screen and (min-width:950px){p.contact{font-size:32px}}