:root{--bg-light: hsla(240, 20%, 98%, 1);--bg-dark: hsla(210, 23%, 95%, 1);--text-muted: hsla(215, 22%, 15%, 1);--text: hsla(220, 23%, 5%, 1);--primary: hsla(57, 100%, 50%, 1);--secondary: hsla(349, 90%, 35%, 1);--glow: hsl(0, 0%, 100%);--shade: hsla(0, 0%, 5%, 30%);--shader: hsla(0, 0%, 5%, 50%);--status-planning: hsl(194, 45%, 70%);--status-wip: hsl(0, 45%, 70%);--status-live: hsl(109, 45%, 70%);--status-deprecated: hsl(0, 0%, 70%);--size-main: 4.5rem;--size-gap: 2.75rem;--size-border: 2.25rem;--size-border-small: .8rem}@media screen and (max-width: 420px){:root{--size-main: 2.25rem;--size-gap: 1.375rem;--size-border: 2.25rem}}.flex{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.responsive{width:100%}@media screen and (min-width: 960px){.responsive{width:960px}}*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}body{max-width:100vw;min-height:100vh;min-height:100svh}header{padding:calc(var(--size-border));position:-webkit-sticky;position:sticky;top:0;z-index:100;width:100%}main#app{height:100%;max-width:100%;gap:var(--size-gap);padding:var(--size-gap)}main#app h2.headline-projects{width:100%}main#app section{min-width:12rem;max-width:60ch;padding:var(--size-border);align-items:start}main#app section .status-lable{display:flex;justify-content:center;align-items:center;align-self:end;width:4rem;height:2rem;margin:0;padding:.25rem 0}main#app section .status-lable img{max-height:100%;max-width:100%}main#app section div.demos-project{width:100%;flex-direction:row;flex-wrap:wrap;gap:0 2rem}main#app section img{align-self:center}main#app .tile-contact h2{text-align:center!important}main#app img{max-height:12rem}main#app .btn-grp{display:flex;gap:0rem}main#app .btn-grp .grp-btn{padding:1rem 1.25rem;width:max-content}main#app .btn-grp .grp-btn:nth-child(1){border-top-right-radius:.2rem;border-bottom-right-radius:.2rem}main#app .btn-grp .grp-btn:nth-child(2){border-top-left-radius:.2rem;border-bottom-left-radius:.2rem}main#app button,main#app .btn{margin:1rem 0;padding:1rem 2.5rem}main#app .btn{display:inline-block}main#app hr{margin:1rem 0;width:100%;align-self:center}@media screen and (min-width: 960px){main#app{flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}main#app #portrait{margin:.3rem}main#app #professional{max-width:calc(var(--size-gap) + 12rem + 40ch + 2 * var(--size-border))}}h1{font-family:"Noto Serif Display",Times New Roman,serif;font-size:45px;font-weight:400;line-height:52px;letter-spacing:0;margin:0;color:var(--text)}h1.display-large{font-family:"Noto Serif Display",Times New Roman,serif;font-size:57px;font-weight:400;line-height:64px;letter-spacing:-.25px;margin:0}h1.display-small{font-family:"Noto Serif Display",Times New Roman,serif;font-size:36px;font-weight:400;line-height:44px;letter-spacing:0;margin:0}h2{font-family:"M Plus Rounded 1c",monospace;font-size:28px;font-weight:400;line-height:36px;letter-spacing:0;margin:0;color:var(--text)}h2.headline-large{font-family:"M Plus Rounded 1c",monospace;font-size:32px;font-weight:400;line-height:40px;letter-spacing:0;margin:0}h2.headline-small{font-family:"M Plus Rounded 1c",monospace;font-size:24px;font-weight:400;line-height:32px;letter-spacing:0;margin:0}h3{font-family:"M Plus Rounded 1c",monospace;font-size:16px;font-weight:500;line-height:24px;letter-spacing:.15px;margin:0;color:var(--text)}h3.title-large{font-family:"M Plus Rounded 1c",monospace;font-size:22px;font-weight:500;line-height:28px;letter-spacing:0;margin:0}h3.title-small{font-family:"M Plus Rounded 1c",monospace;font-size:14px;font-weight:500;line-height:20px;letter-spacing:.1px;margin:0}h4,button,a{font-family:Open Sans,sans-serif;font-size:12px;font-weight:500;line-height:16px;letter-spacing:.5px;margin:0}h4.lable-large,button.lable-large,a.lable-large{font-family:Open Sans,sans-serif;font-size:14px;font-weight:500;line-height:20px;letter-spacing:.1px;margin:0}h4.lable-small,button.lable-small,a.lable-small{font-family:Open Sans,sans-serif;font-size:11px;font-weight:500;line-height:16px;letter-spacing:.5px;margin:0}a{text-decoration:none;color:var(--secondary)}a.btn{color:var(--bg-light)}p{font-family:Open Sans,sans-serif;font-size:14px;font-weight:400;line-height:20px;letter-spacing:.25px;margin:0;color:var(--text-muted);text-indent:4ch}p.body-large{font-family:Open Sans,sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:.5px;margin:0}p.body-small{font-family:Open Sans,sans-serif;font-size:12px;font-weight:400;line-height:16px;letter-spacing:.4px;margin:0}p.long{max-width:40ch}button,.btn{background-color:var(--primary);color:var(--text);box-shadow:inset 2px 2px 4px var(--glow),inset -1px -1px 2px var(--shade),1px 1px 2px var(--shader),2px 2px 4px var(--shade)}button.btn-secondary,.btn.btn-secondary{background-color:transparent;color:var(--secondary);border:2px solid var(--secondary)!important}button:hover,.btn:hover{transform:scale(1.025)}button:active,.btn:active{transform:scale(.975)}*{-ms-overflow-style:none;scrollbar-width:none;scroll-behavior:smooth}*::-webkit-scrollbar{display:none}#navbar,#navbottom{width:100%;flex-direction:row;justify-content:center;gap:1rem;background-color:var(--bg-dark)}#navbar a,#navbottom a{padding:.5rem;color:var(--text-muted);opacity:50%;transition:opacity ease-out .15s}#navbar a:hover,#navbottom a:hover{opacity:100%}#navbottom{padding-bottom:1rem}body{background-color:var(--bg-dark);z-index:-1}div#mainContainer{width:100%}header{background-color:var(--bg-light);text-align:center}main#app h2.headline-projects{text-align:center!important}main#app .tile-contact h3{color:var(--secondary)}main#app section{border-radius:var(--size-border);background-color:var(--bg-light)}main#app section .status-lable{box-shadow:none;cursor:default}main#app section .status-lable.status-planning{background-color:var(--status-planning)}main#app section .status-lable.status-wip{background-color:var(--status-wip)}main#app section .status-lable.status-live{background-color:var(--status-live)}main#app section .status-lable.status-deprecated{background-color:var(--status-deprecated)}main#app section .status-lable img{background-color:transparent;border:none}main#app section .status-lable:hover{transform:scale(1)}main#app img{border-radius:var(--size-border);background-color:var(--bg-light);border:4px solid var(--bg-light)}main#app button,main#app .btn{border:none;border-radius:var(--size-border-small);cursor:pointer}@media screen and (max-width: 959px){#app #professional p{max-width:40ch!important}}