:root{--primary-color:#42392d;--bg:#f5f5f5;--fg:white;font-size:clamp(14px,1.2vw,18px)}*{box-sizing:border-box;margin:0;padding:0}::selection{background-color:var(--primary-color);color:#fff}body{background-color:var(--bg);color:var(--primary-color)}body,button{font-family:Josefin Sans,sans-serif}main{min-height:100vh}a{cursor:pointer;color:unset;text-decoration:none}.banner{text-align:center;padding:20vh clamp(2rem,5vw,4rem);font-size:clamp(2em,4vw,4rem)}.banner p{text-align:center;opacity:.8;font-size:.5em}.heading{filter:blur(5px);font-optical-sizing:auto;color:var(--primary-color);font-family:Oxanium,sans-serif;font-size:2em;font-style:normal;font-weight:400;transition:all 1s;transform:scale(0)skewY(10deg)}h1.active{filter:blur();transform:scale(1)}.project-tile{text-align:center;-webkit-user-select:none;user-select:none}.img-anchor{position:relative}.view-project{cursor:pointer;background-color:var(--primary-color);color:var(--fg);border:none;border-radius:20px;padding:10px 20px;position:absolute;bottom:40px;right:10%}.project-tile img{border:2px solid var(--primary-color);border-radius:20px;width:100%;height:auto;margin:20px 0;transition:all .2s}.visual-showcase{transition:all .2s}.visual-showcase:hover{transform:scale(1.05)}.view-project{transition:all .2s}.visual-showcase .view-project:hover{transform:scale(1.05)}.project-tile h3{font-size:1.4rem}.web-projects{grid-template-columns:1fr;gap:100px;width:100%;padding:0 40px;display:grid}@media (width>=800px){.web-projects{grid-template-columns:repeat(2,1fr)}}header{--header-fg:#fff;color:var(--header-fg);background-color:var(--primary-color);z-index:2;width:100%;font-size:1rem;display:flex;position:sticky;top:0}.header-logo{margin:auto 0;padding:0 20px}.header-logo svg{width:auto;height:40px;fill:var(--header-fg)}.header-logo path{fill:#0000;stroke:var(--header-fg);transition:all 2s;animation:2s forwards logo-appear}.nav-bar{margin-left:auto}.nav-bar ul{background-color:var(--primary-color);flex-direction:row;align-items:flex-end;padding:20px;list-style:none;display:flex}.nav-bar a:not(:last-child):after{content:"|";padding:0 10px}@keyframes logo-appear{70%{fill:#0000}to{fill:var(--header-fg);stroke-dashoffset:0}}footer{background-color:var(--primary-color);height:40px;margin-top:100px}