html,body{width:100vw;height:100%}body{height:100%;margin:0;font-family:Open Sans,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}body #root{height:100%;width:100%}.fill-view-port{width:100%;height:100%}body::-webkit-scrollbar-track{border-radius:4px;background-color:#0000}body::-webkit-scrollbar{width:6px;margin:0 2px;background-color:#0000}body::-webkit-scrollbar-thumb{background:#686868;padding:0 2px;border-radius:10px;background-clip:content-box}.crystal-bridge-color{color:#df7861!important}.blob-container{position:relative;filter:drop-shadow(0px 2px 8px rgba(208,208,208,.25));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:all .3s ease}.blob-container:hover{filter:drop-shadow(0px 4px 12px rgba(208,208,208,.35));transform:scale(1.02)}.blob-container:hover .blob-shine{transform:translate(100%)}.blob-container .blob-shine{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:translate(-100%);transition:transform .6s ease;pointer-events:none}.blobs{position:absolute;top:-15%;right:12%;transform:scale(.95);transform-origin:top right}@media(max-width:599px){.blobs{transform:scale(1);top:-40%;right:-10%}}.about-me{position:relative;padding:3.2rem 5rem 1rem;width:75%}@media(max-width:599px){.about-me{padding:1rem;width:92%!important}}@media(min-width:1800px){.about-me{width:70%}}@media(min-width:1200px)and (max-width:1439px){.about-me{width:76%;padding:2.8rem 4.5rem 0}}.title-backdrop{background-image:url(/assets/abstract-CAfNkQrh.jpg);background-size:cover;width:fit-content;height:fit-content}.title{font-family:"Baloo 2",cursive;font-size:5rem;color:#575757;background-color:transparent;margin:0;line-height:1}@media(max-width:320px){.title{font-size:3rem!important}}@media(max-width:599px){.title{font-size:3.6rem;line-height:1.1}}@media(min-width:1800px){.title{font-size:5.8rem}}@media(min-width:1200px)and (max-width:1439px){.title{font-size:4.8rem}}.who-is-fabian{font-size:2.5rem;margin:0 0 2rem;color:#3e3e3e;font-weight:300;line-height:145%}@media(max-width:320px){.who-is-fabian{font-size:1.55rem!important}}@media(max-width:599px){.who-is-fabian{font-size:1.66rem;font-weight:400;color:#5c5b5b;margin:0 0 1.5rem;line-height:138%}}@media(min-width:1800px){.who-is-fabian{font-size:2.8rem}}@media(min-width:1200px)and (max-width:1439px){.who-is-fabian{font-size:2.3rem;margin:0 0 1.7rem}}.who-is-fabian strong{font-weight:600;color:#686868}@media(max-width:599px){.who-is-fabian strong{color:#292929}}.who-is-fabian a{position:relative;text-decoration:none;color:#a8dadc;padding:2px 4px;margin:-2px -4px;border-bottom:2px solid transparent;transition:border-color .2s ease,text-shadow .2s ease,transform .2s ease}.who-is-fabian a:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0px,rgba(0,0,0,.06) 1px,transparent 1px,transparent 4px),repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0px,rgba(0,0,0,.06) 1px,transparent 1px,transparent 4px);background-repeat:repeat;opacity:0;transition:opacity .2s ease}.who-is-fabian a:hover{border-bottom-color:currentColor;text-shadow:1px 1px 0 rgba(0,0,0,.12),2px 2px 0 rgba(0,0,0,.06);transform:translateY(-1px)}.who-is-fabian a:hover:after{opacity:1}.work{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-gap:25px;margin-bottom:20px}@media(max-width:599px){.work{grid-template-columns:1fr;grid-gap:18px}}@media(min-width:1200px)and (max-width:1439px){.work{grid-gap:20px}}.work a{font-size:1.2rem;text-decoration:none;color:#525252;font-weight:600;background:#fff;border:1px solid rgba(166,139,145,.15);border-radius:6px;box-shadow:0 5px 20px #9781862e;padding:20px 18px;transition:box-shadow .4s}.work a.-resume i{color:#f6cd5d}.work a.-dribbble i{color:#ea4c89}.work a.-linked-in i{color:#0077b5}.work a.-showcase i{color:#8e44ad}.work a.-email i{color:#d93025}@media(max-width:599px){.work a{font-size:1.3rem;padding:20px}}@media(min-width:1200px)and (max-width:1439px){.work a{padding:24px 22px}}.work a:hover{box-shadow:0 4px 55px #9781864d}.work a i{margin-right:4px}@media(max-width:599px){.work a i{margin-right:2px}}
