@import"https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap";@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap";@font-face{font-family:Autography;src:url(/v2/Autography.otf) format("truetype");font-weight:400;font-style:normal}:root{font-family:JetBrains Mono,monospace;line-height:1.5;font-optical-sizing:auto;font-weight:400;font-style:normal;color-scheme:light dark;color:var(--text);background-color:var(--background);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;transition:all 1s ease;cursor:default;--text: #ccd5ff;--background: #00020a;--primary: #6b86ff;--secondary: #12268c;--accent: #2749f1}*{margin:0;padding:0}a{font-weight:500;color:var(--primary);text-decoration:inherit}a:hover{color:var(--accent)}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}#app{position:relative;max-width:1280px;margin:0 auto;text-align:center;padding:0 50px;display:flex;flex-direction:column;gap:25vh}#app section{height:100vh;display:flex;place-content:center;place-items:center}::-webkit-scrollbar{width:5px;height:3px;background-color:#8383831a}::-webkit-scrollbar-thumb{border-radius:4px;background-color:#81818180}::-webkit-scrollbar-thumb:hover{background-color:#818181e6}.primaryheader{position:fixed;left:50%;transform:translate(-50%);max-width:1280px;width:calc(100% - 20px);height:50px;padding:10px;display:flex;justify-content:space-between;z-index:99}.primaryheader img{border-radius:50%;height:35px;aspect-ratio:1/1}.primaryheader div{display:flex;place-items:center;gap:20px}.links a{color:var(--text)}.Landing{position:relative}.hellocontainer{display:inline-block}.hellotyped-out{overflow:hidden;border-right:.1em solid var(--accent);white-space:nowrap;animation:typing 1s forwards;font-size:10rem;width:0;font-family:Chakra Petch,sans-serif;font-weight:400;font-style:normal;position:relative}@keyframes typing{0%{width:0}99%{border-right:.1em solid var(--accent)}to{width:100%;border-right:0em solid var(--accent)}}@keyframes appear{0%{opacity:0}to{opacity:1}}@keyframes scrollbounce{0%{transform:translate(-50%)}50%{transform:translate(-50%,10px)}to{transform:translate(-50%)}}.scroll{opacity:0;position:absolute;bottom:20px;left:50%;font-size:1.5rem;transform:translate(-50%);margin:0;animation:appear 1s 2.5s forwards,scrollbounce 1s 2.5s infinite}.About{gap:50px}.imgcontainer{position:relative;height:450px;width:450px;overflow:hidden;flex:0 0 auto}.imgcontainer img{height:100%;aspect-ratio:1 / 1;background-color:var(--accent);border-radius:10px;position:absolute;top:0;left:0}#img-goggles{transition:transform 1s ease;transform:translate(-450px)}#img-goggles:hover{transform:translate(0)}.about{height:fit-content;text-align:left}.about h1{font-size:6rem;line-height:1.3;margin:1.5rem 0}.about h3{font-size:4rem;margin:1.5rem 0}.about p{font-size:1.2rem}.about span{color:var(--primary)}#goggles{cursor:help}#app .Skills{display:grid;gap:20px;grid-template-areas:"head head head head" "lang run frame other" "html node react figma" "css npm express vite" "js . . ."}.Skills h1{display:flex;gap:10px;place-items:center;place-content:center;width:200px;flex:0 0 auto}.Skills h1:nth-child(1){font-size:2.75rem;grid-area:head;width:max-content}.Skills h1:nth-child(2){grid-area:lang}.Skills h1:nth-child(3){grid-area:run}.Skills h1:nth-child(4){grid-area:frame}.Skills h1:nth-child(5){grid-area:other}.Skills div:nth-child(6){grid-area:html}.Skills div:nth-child(7){grid-area:css}.Skills div:nth-child(8){grid-area:js}.Skills div:nth-child(9){grid-area:node}.Skills div:nth-child(10){grid-area:npm}.Skills div:nth-child(11){grid-area:react}.Skills div:nth-child(12){grid-area:express}.Skills div:nth-child(13){grid-area:figma}.Skills div:nth-child(14){grid-area:vite}.Skills div:nth-child(6):after{content:"HTML"}.Skills div:nth-child(7):after{content:"CSS"}.Skills div:nth-child(8):after{content:"JS"}.Skills div:nth-child(9):after{content:"Nodejs"}.Skills div:nth-child(10):after{content:"NPM"}.Skills div:nth-child(11):after{content:"React"}.Skills div:nth-child(12):after{content:"Express"}.Skills div:nth-child(13):after{content:"Figma"}.Skills div:nth-child(14):after{content:"Vite"}.ionicon path{fill:var(--text)}.ionicon{height:25px;width:25px}.skillschild{width:250px;height:130px;border-radius:10px;transition:all .5s ease;filter:grayscale(100%);display:flex;place-items:center;place-content:center;gap:10px}.skillschild:after{font-size:1.5rem;padding:5px;display:none}.skillschild:hover:after{display:block}.skillschild:hover{background-color:var(--accent);filter:grayscale(0%)}.skillschild img{height:80px;aspect-ratio:1 / 1}.Projects{align-items:center;display:flex;height:100vh;justify-content:center;margin:0;overflow:hidden;padding:0;flex-direction:column}.Projects h1{font-size:2.75rem;width:max-content}#cards{display:flex;flex-wrap:wrap;gap:8px;max-width:1156px;width:calc(100% - 20px);padding:25px}#cards:hover>.card:after{opacity:1}.card{background-color:#ffffff1a;border-radius:20px;display:flex;height:300px;flex-direction:column;position:relative;width:380px}.card:hover:before{opacity:1}.card:before,.card:after{border-radius:inherit;content:"";height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .5s;width:100%}.card:before{background:radial-gradient(800px circle at var(--mouse-x) var(--mouse-y),rgba(255,255,255,.1),transparent 40%);z-index:3}.card:after{background:radial-gradient(600px circle at var(--mouse-x) var(--mouse-y),rgba(255,255,255,.4),transparent 40%);z-index:1}.card>.card-content{background-color:var(--background);border-radius:inherit;display:flex;flex-direction:column;flex-grow:1;top:1px;right:1px;bottom:1px;left:1px;padding:10px;position:absolute;z-index:2}.card-image{align-items:center;display:flex;height:150px;justify-content:center;overflow:hidden}.card-image>img{height:calc(100% - 10px);aspect-ratio:1/1;border-radius:20px}.card-info-wrapper{align-items:center;display:flex;flex-grow:1;justify-content:center;padding:0 20px}.card-info{align-items:center;display:flex;flex-direction:column;gap:10px}.card-info>h3{font-size:1.5rem}.card-info>h4{font-size:.85rem;margin-top:5px;text-align:justify}.card a{position:absolute;width:100%;height:100%;z-index:3;cursor:pointer}footer{width:100%;padding:20px 0;display:flex;place-items:center;justify-content:space-around}footer p{pointer-events:none;display:flex;place-items:center}footer p span{font-family:Autography,monospace;font-size:1.75rem;margin-left:10px}#goTop{opacity:0;position:fixed;bottom:25px;right:25px;z-index:99;border:none;outline:none;background-color:var(--primary);color:#fff;cursor:pointer;border-radius:50%;transition:opacity .25s ease;height:50px;width:50px}#goTop:hover{background-color:var(--accent)}
