@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";@font-face{font-family:ChillPixelMono;src:url(/my-portfolio/assets/ChillPixels-Mono-CEZCFTon.otf);font-weight:400;font-style:normal}@font-face{font-family:PublicPixel;src:url(/my-portfolio/assets/PublicPixel-CLZwyX5N.ttf);font-weight:400;font-style:normal}*{margin:0;padding:0}:root{--background-color: #fdeac8;--secondary-color: #ff9faf;--text-color: #555555;background-color:var(--background-color)}body{font-family:ChillPixelMono,sans-serif;overflow-x:hidden;font-size:18px}nav{position:fixed;top:0;left:0;background-color:#faebd7;width:0px;z-index:5}.menu-btn{position:fixed;padding:20px;top:0;left:0;right:0;display:flex;gap:0px;transition:all .7s;z-index:1;pointer-events:none;justify-content:space-between}@media (min-width: 540px){.menu-btn{justify-content:left}.menu-btn.open{translate:28px}}.menu-btn>.btn:first-child{padding:8px 24px;margin-right:16px}nav .btn{padding:8px 16px;fill:var(--background-color)}.btn{pointer-events:all;position:relative;font-family:chill,sans-serif;font-size:18px;display:inline-flex;gap:.25rem;box-shadow:6px 6px 2px #52525240;background-color:var(--text-color);color:var(--background-color);cursor:pointer;transition:all .3s;padding:4px 24px;border:var(--background-color) solid 1px;text-decoration:none}.btn:hover{scale:1.14;fill:var(--secondary-color);box-shadow:8px 8px 6px #52525240;z-index:2}.btn:active{transform:scale(.95)}.btn.open{background-color:var(--background-color);fill:var(--text-color);border:var(--text-color) solid 1px;box-shadow:6px 6px #d0c5b4}.btn.open:hover{box-shadow:6px 6px 4px #d0c5b4}.menu-body{background-color:var(--text-color);color:var(--background-color);font-size:2em;font-family:PublicPixel;text-decoration:none!important;position:fixed;top:0;bottom:0;left:-100%;right:100vw;z-index:0;transition:all .7s;display:inline-flex;flex-direction:column;gap:16px;padding-top:140px;padding-left:20px;box-sizing:border-box;opacity:0;text-align:left}.menu-body.open{left:0;right:0;opacity:1}@media (min-width: 540px){.menu-body{padding-left:50px}}.menu-body a{text-decoration:none!important}a{display:inline-block;color:inherit;text-decoration-style:solid;text-decoration-thickness:2px;transition:all .3s}a:hover{color:var(--secondary-color)}h2{display:inline-block;font-size:1.2em;text-align:center;color:var(--background-color);background-color:var(--text-color);padding:4px 16px 8px;margin:.3em auto;font-family:PublicPixel}h3{font-size:1.2em;text-align:center;padding-top:4px;padding-bottom:8px;margin:.3em auto;font-family:PublicPixel;color:var(--text-color)}.skills,p{padding:16px;text-align:left;line-height:1.5;width:clamp(0px,95vw,680px);margin:auto;box-sizing:border-box;color:var(--text-color)}.skills{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;align-items:center;gap:16px;text-align:center}.skills li{display:inline-block;padding:4px 8px;border:solid 2px var(--text-color);box-shadow:1px 1px #222831,4px 4px #52525240}hr{width:100px;height:2px;background-color:none;margin:40px auto;border:none;border-bottom-width:medium;border-bottom-style:none;border-bottom-color:currentcolor;border-bottom:dashed 2px var(--text-color)}.projectLink{color:inherit;transition:all .2s}.projectLink:hover{color:#ff9faf}.media-container{display:flex;flex-direction:column;align-items:center;gap:24px}.media{height:auto;max-width:min(100%,clamp(0px,95vw,1200px));box-shadow:1px 1px #f6d4b1,6px 6px #52525240}.youtube{aspect-ratio:16/9;width:min(100%,clamp(0px,95vw,1200px))}.project-btns{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;align-items:center;gap:16px;padding-bottom:16px;text-align:center}.project-btn{padding:4px 8px;border:solid 2px var(--text-color);color:var(--text-color);opacity:.4;cursor:pointer;transition:all .3s}.project-btn:hover{color:var(--text-color);opacity:1;scale:1.1}.project-btn:active{transform:scale(.95)}.project-btn.active{background-color:var(--text-color);color:var(--secondary-color);opacity:1;cursor:unset}.project-btn.active:hover{scale:1}.project-btn.active:active{transform:none}.footer{display:flex;gap:32px;flex-direction:column;font-size:12px;width:clamp(0px,95vw,680px);margin:auto;padding:32px 0;text-align:center;color:var(--text-color);z-index:2;position:relative}#scroll-tip{position:fixed;bottom:16px;left:50%;transform:translate(-50%);font-size:14px;background-color:var(--text-color);color:var(--background-color);border:var(--background-color) solid 2px;padding:4px 16px;transition:all .3s;pointer-events:none;animation:bounce 1s ease-in-out infinite;opacity:0;z-index:2}@keyframes bounce{0%{transform:translate(-50%) scale(1);box-shadow:5px 5px #00000053}50%{transform:translate(-50%,-10px) scale(1.02);box-shadow:6px 6px 1px #00000024}to{transform:translate(-50%) scale(1);box-shadow:5px 5px #00000053}}.loader-container{position:absolute;width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#333;color:var(--background-color);z-index:999}.wrapper{border:4px dashed var(--text-color);width:75vw;padding:20px}.title-text{font-size:clamp(24px,5vw,42px);text-align:left;margin:0;padding-left:0;padding-top:0;padding-bottom:10px}.loader{max-width:75vw;height:40px;background:var(--text-color);border:2px solid var(--background-color);align-items:center;justify-content:center}.loader-bar{height:100%;width:0%;background:var(--background-color);transition:width .2s ease-out}.text-wapper{display:flex;justify-content:space-between}.loader-text{font-family:"Press Start 2P",cursive;color:var(--background-color);font-size:clamp(6px,2vw,12px);text-shadow:2px 2px #000;margin:0;padding-left:0;padding-right:0;width:auto}main{text-align:center;position:relative}section{padding-bottom:64px;margin-bottom:80px;position:relative;z-index:2}section:after{content:"";border-bottom:dashed 2px var(--text-color);position:absolute;bottom:0;transform:translate(-50%);width:clamp(0px,95vw,680px)}#section1{margin-top:40%}#contact{margin-bottom:0}h1{display:inline-block;background-color:var(--text-color);color:var(--background-color);font-size:2em;padding:4px 16px 8px;margin:0 auto .3em;font-family:PublicPixel}.link{background-color:var(--text-color);color:var(--background-color);font-size:1.2em;padding:2px 4px;text-decoration:none;transition:all .2s}.link:hover{color:var(--secondary-color)}
