html,body,#root{margin:0;padding:0;width:100%;min-height:100%;overflow-x:hidden;background:linear-gradient(to left,#000,#111,#201f1f);background-attachment:fixed}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}#root{margin:0 auto;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.navbar-container{font-family:Outfit,sans-serif;width:100%;height:80px;position:fixed;top:0;left:0;z-index:10;background-color:#000}.navbar-wrapper{height:100%;width:auto;display:flex;justify-content:space-between;align-items:center;padding:0 2rem;position:relative;z-index:5}.content{display:flex;gap:2rem}.content a{font-size:18px;color:#fff;cursor:pointer;font-weight:500;text-decoration:none;transition:color .3s ease}.content a:hover{color:#61dafb}.model-wrapper{margin-top:60px}.model-wrapper canvas{width:100%;height:100%}@media (max-width: 745px){.model-wrapper{width:150px}}@media (max-width: 620px){.model-wrapper{width:100px}}@media (max-width: 570px){.model-wrapper{width:100px}.content a{font-size:15px}}@media (max-width: 520px){.model-wrapper{width:50px}.content a{font-size:12px}.content{gap:10px}}.about-container{font-family:Montserrat,sans-serif;display:grid;align-items:center;grid-template-columns:1fr 1fr;gap:50px;padding-top:30px}#about{padding-top:100px}.about-span{color:#fff;font-size:24px}.animate-left,.animate-right{opacity:0;transition:all .9s ease}.animate-left{transform:translate(-200px)}.animate-right{transform:translate(200px)}.animate .animate-left,.animate .animate-right{opacity:1;transform:translate(0)}.about-title{font-size:20px;color:#fff}.unvan{font-size:18px;color:#c4c3c3}.about-content{font-size:15px;color:#afacac}.lottie-gif{width:400px;height:400px}.content-wrapper{display:flex;padding:10px;flex-direction:column;text-align:left}@media (max-width: 710px){.lottie-gif{width:310px}}@media (max-width: 650px){.lottie-gif{width:270px}.about-title{font-size:14px}.unvan{font-size:11px}.about-content{font-size:13px}.about-container{gap:0}}@media (max-width: 520px){.about-container{display:flex;flex-direction:column}.content-wrapper{text-align:center}}.skills-card-wrapper{font-family:Montserrat,sans-serif;display:flex;justify-content:space-around;align-items:center;padding:10px}.skill-card{position:relative;background-color:#000;border-radius:12px;display:flex;flex-direction:column;align-items:center;padding:20px 30px;min-width:250px;min-height:320px;box-shadow:0 6px 20px #0003;overflow:hidden;z-index:1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transform-style:preserve-3d}.stars-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}.skill-card h3{position:relative;z-index:1;color:#fff}.skill-card ul{list-style:none;padding:0;margin:0}.skill-card li{margin-bottom:8px;color:#fff}.skills-title{font-size:24px;color:#fff;font-family:Montserrat,sans-serif}@media (max-width: 967px){.skill-card{min-width:180px;min-height:270px}.skills-card-wrapper{font-size:13px}}@media (max-width: 760px){.skill-card{min-width:120px;min-height:210px}.skills-card-wrapper{font-size:9px}}@media (max-width: 570px){.skills-card-wrapper{display:flex;flex-direction:column;gap:20px}}.project-title{font-size:24px;margin-top:30px;color:#fff}.project-wrapper{display:grid;grid-template-columns:auto auto auto;justify-content:space-around;padding:10px 22px}.project-card-container{font-family:Montserrat,sans-serif;display:flex;flex-direction:column;width:300px;height:500px;background-color:#000;border-radius:16px;padding:20px;margin-top:25px}.card-img{position:relative;width:100%;height:200px;border-radius:16px;overflow:hidden}.card-img img{width:100%;height:100%;object-fit:cover;border-radius:16px}.github-icon{position:absolute;top:8px;right:8px;width:40px;height:24px;z-index:2;cursor:pointer}.github-icons{width:40px;height:40px}.card-content-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:space-between;flex:1}.card-title{font-size:24px;font-weight:700;text-align:left;align-self:flex-start}.card-content{font-size:14px;margin-top:8px;text-align:left}.card-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.tag{padding:4px 10px;border-radius:12px;font-size:12px;font-weight:500;color:#fff}.tag-react{background-color:#61dafb}.tag-pixel-art{background-color:#e91e63}.tag-mongodb{background-color:#088e49}.tag-node{background-color:#1ee969}.tag-css{background-color:#bfe60f}.tag-api{background-color:#5b5958}.tag-tailwind{background-color:#a2287c}@media (max-width: 1000px){.project-card-container{width:250px;height:450px}}@media (max-width: 890px){.project-card-container{width:200px;height:375px}.card-img{height:120px}}@media (max-width: 780px){.project-wrapper{display:grid;grid-template-columns:auto auto;justify-content:space-around;padding:10px 22px}.project-card-container{width:260px;height:400px}}@media (max-width: 665px){.project-wrapper{display:grid;grid-template-columns:auto auto;justify-content:space-around;padding:10px 22px}.project-card-container{width:200px;height:375px}}@media (max-width: 530px){.project-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center}}.experience-section{display:flex;align-items:center;justify-content:center;margin-top:30px;overflow:visible}.exp-container{font-family:Montserrat,sans-serif;display:flex;flex-direction:column}.exp-title{padding:30px}.exp-title span{font-size:24px;font-weight:700}.timeline{position:relative;margin:0 auto;padding:20px 0;width:90%}.timeline:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:4px;background:#fff;transform:translate(-50%)}.timeline-item{position:relative;margin-bottom:50px}.timeline-icon{background:#fff;color:#000;border-radius:50%;padding:10px;position:absolute;top:0;left:50%;transform:translate(-50%);z-index:2}.timeline-content{background:#000;padding:20px;border-radius:10px;width:40%;position:relative;overflow:hidden}.timeline-content.left{margin-right:auto}.timeline-content.right{margin-left:auto}.timeline-date{font-size:.9rem;color:#b0b0b0;margin-bottom:10px}.timeline-content ul{padding-left:20px;text-align:left}.timeline-content li{margin-bottom:8px;line-height:1.5}.cv-download-btn{display:inline-block;margin-top:15px;padding:10px 18px;background-color:#61dafb;color:#000;font-weight:700;text-decoration:none;border-radius:8px;transition:.3s}.cv-download-btn:hover{background-color:#21a1f1;color:#fff}@media (max-width: 530px){h3{font-size:17px}h4{font-size:14px}.timeline-date{font-size:12px}.timeline-content ul{font-size:13px}}@media (max-width: 470px){h3{font-size:15px}h4{font-size:12px}.timeline-date{font-size:10px}.timeline-content ul{font-size:11px}.timeline-content{padding:10px}}.contact-container{display:grid;grid-template-columns:1fr 1fr;padding-top:100px;padding-bottom:20px}.info-container{display:flex;flex-direction:column;gap:20px;padding:30px 20px;text-align:start;background:linear-gradient(to left,#000,#111,#201f1f);border-radius:5px}input{height:40px;border:none;border-radius:10px;font-size:16px;background-color:#fff;color:#000;padding-left:20px}textarea{font-size:16px;border:none;border-radius:10px;background-color:#fff;color:#000;padding-left:20px}input::placeholder,textarea::placeholder{padding-left:10px;color:#494747}.earth{width:400px;height:400px;border-radius:50%;overflow:hidden;background:linear-gradient(to left,#000,#111,#201f1f);display:flex;align-items:center;justify-content:center;margin:auto}button{height:50px;background-color:#61dafb;border-radius:10px;border:none;font-size:20px}@media (max-width: 960px){.info-container{width:400px}.earth{width:350px;height:350px}}@media (max-width: 790px){.info-container{width:350px}.earth{width:300px;height:300px}}@media (max-width: 690px){.info-container{width:275px}.earth{width:230px;height:230px}}@media (max-width: 540px){.info-container{width:220px;gap:10px;padding:30px 10px}.earth{width:200px;height:200px}}@media (max-width: 445px){.info-container{width:175px;gap:10px;padding:30px 10px}.earth{width:150px;height:150px}}@media (max-width: 380px){.info-container{width:150px;gap:5px;padding:10px}.earth{width:120px;height:120px}input::placeholder,textarea::placeholder{padding-left:5px;color:#494747}}.footer-container{display:grid;grid-template-columns:1fr 1fr;position:relative;width:100%;min-height:90px;padding:10px;overflow:hidden;background-color:#000}.portfolio-wrapper{display:flex;align-items:center;justify-content:center;z-index:1}.portfolio-info{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;text-align:left}.portfolio-info a{text-decoration:none;color:#fff}.footer-container a:active,.footer-container a:hover{color:#61dafb}.canvas-background{position:absolute;top:0;left:0;z-index:0;width:100%;height:100%;pointer-events:none}.social-media{display:flex;align-items:center;justify-content:center;z-index:1}.social-wrapper{width:230px;height:40px;background-color:#fff2;border-radius:10px;padding:10px;display:flex;align-items:center;justify-content:center;gap:20px;z-index:1}.social-wrapper svg{font-size:30px;cursor:pointer;transition:transform .25s ease,font-size .25s ease}.social-wrapper svg:hover{font-size:60px;transform:translateY(-10px)}@media (max-width: 573px){.portfolio-info{grid-template-columns:1fr 1fr}.social-wrapper svg{font-size:20px}.social-wrapper{width:180px;height:25px}.social-wrapper svg:hover{font-size:40px}}@media (max-width: 450px){.footer-container{display:flex;flex-direction:column;gap:40px}.portfolio-info{display:flex;gap:25px}.social-wrapper svg{font-size:40px}.social-wrapper{width:290px;height:45px}.social-wrapper svg:hover{font-size:70px}}@media (max-width: 450px){.footer-container{display:flex;flex-direction:column;gap:40px}.portfolio-info{display:grid;grid-template-columns:1fr 1fr 1fr}.social-wrapper svg{font-size:20px}.social-wrapper{width:180px;height:25px}.social-wrapper svg:hover{font-size:40px}}