*{margin:0;box-sizing:border-box}*,body{padding:0}body{font-family:sans-serif;font-size:16px;line-height:1.5;background-color:#1d1e20;color:#dadadb;width:900px;margin:0 auto}.pixel-font{font-family:Press Start\ 2P,monospace}@media screen and (max-width:768px){body{width:100%;padding:0 2rem}}a{text-decoration:none;color:#dadadb}li{list-style:none}.nav-container{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;background-color:#1d1e20}.nav-container .logo{font-size:1.5rem;font-weight:700}.cta-btn{background-color:#ffcc1a;color:#1d1e20;padding:.5rem 1rem;border-radius:5px;font-size:1rem;font-weight:600;transition:all .5s ease-in-out;cursor:pointer;display:inline-block}.cta-btn:hover{background-color:#dadadb}hr{border:none;background-color:#9b9c9d;height:1px;width:80%;margin:0 auto}@media screen and (max-width:768px){hr{width:100%}}.footer-container{display:flex;justify-content:space-around;align-items:center;padding:2rem 0;background-color:#1d1e20}.footer-container p{font-size:.8rem;color:#9b9c9d}.footer-container .social_icons{display:flex;justify-content:space-between;align-items:center;gap:0 1rem}.footer-container .social_icons a{color:#9b9c9d;font-size:1.5rem;transition:all .5s ease-in-out}.footer-container .social_icons a:hover{color:#dadadb}.hero-container{height:90vh;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:2rem 0}.hero-container .profile-img{width:200px;height:200px;border-radius:50%;margin:0 auto;object-fit:cover}.hero-container .hero-text{text-align:center;margin:1rem 0;width:80%}@media screen and (max-width:768px){.hero-container .hero-text{width:100%}}.hero-container .hero-text h2{font-size:2.2rem;font-weight:600;margin-bottom:1rem}.hero-container .hero-text p{font-size:1.2rem;font-weight:400;margin-bottom:1rem}.hero-container .social-icons{display:flex;justify-content:center;align-items:center;gap:0 1rem}.hero-container .social-icons a{color:#9b9c9d;font-size:1.5rem;transition:all .5s ease-in-out}.hero-container .social-icons a:hover{color:#dadadb}.scroll-indicator{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:100}.arrow-down{display:inline-block;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid #fff}.arrow-circle{width:40px;height:40px;border:2px solid gold;border-radius:50%;display:flex;align-items:center;justify-content:center;animation:bounce 1.2s ease-in-out infinite;cursor:pointer}@keyframes bounce{0%{transform:translateY(0)}50%{transform:translateY(15px)}to{transform:translateY(0)}}.about-container{padding:2rem 0}.about-container h2{font-size:2rem;font-weight:600;margin-bottom:1rem}.about-container .flex-about{display:flex;justify-content:space-between;align-items:center;gap:0 2rem}.about-container .flex-about .about-text{width:50%}.about-container .flex-about .about-text p{font-size:1rem;font-weight:400;margin-bottom:1rem}.about-container .flex-about .about-img{width:50%}.about-container .flex-about .about-img .profile-img{overflow:hidden;width:100%;height:500px;object-fit:cover;border:2px solid #dadadb;filter:grayscale(100%);transition:all .5s ease-in-out;cursor:cell}.about-container .flex-about .about-img .profile-img:hover{filter:grayscale(0);transform:scale(1.02)}@media screen and (max-width:768px){.about-container .flex-about{flex-direction:column}.about-container .flex-about .about-img,.about-container .flex-about .about-text{width:100%}}.skills-container{padding:2rem 0}.skills-container h2{font-size:2rem;font-weight:600;margin-bottom:1rem}.skills-container .grid-skills{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:2rem;gap:2rem}@media screen and (max-width:768px){.skills-container .grid-skills{grid-template-columns:repeat(2,1fr)}}.skills-container .grid-skills .skill-card{background-color:#dadadb;color:#1d1e20;display:flex;justify-content:center;align-items:center;gap:0 1rem;padding:1rem;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,.2);transition:all .5s ease-in-out;cursor:context-menu}.skills-container .grid-skills i{font-size:1.5rem}.skills-container .grid-skills .html:hover{background-color:#e34f26}.skills-container .grid-skills .css:hover{background-color:#264de4}.skills-container .grid-skills .js:hover{background-color:#f7df1e}.skills-container .grid-skills .react:hover{background-color:#61dafb}.skills-container .grid-skills .language:hover,.skills-container .grid-skills .python:hover{background-color:#3776ab}.skills-container .grid-skills .tool:hover{background-color:#e34f26}.projects-container{padding:2rem 0}.projects-container h2{font-size:2rem;font-weight:600;margin-bottom:1rem}.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:2rem;gap:2rem}@media screen and (max-width:768px){.projects-grid{grid-template-columns:repeat(1,1fr)}}.project-card{border:1px solid #e6e6e6;padding:20px;border-radius:5px}.project-card .project-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.project-card .folder-icon{font-size:35px;color:#ffcc17}.project-header .small-icons{display:flex;gap:0 5px}.project-card .small-icons a{margin-right:5px;cursor:pointer;transition:all .5s ease}.project-card .small-icons a:hover{color:#ffcc17}.project-card .project h3{font-size:20px;margin-bottom:10px}.project-card .project p{font-size:16px;margin-bottom:10px;color:#b3b3b3}.contact-container{padding:2rem 0 4rem;display:flex;justify-content:center;align-items:center;flex-direction:column;width:80%;margin:0 auto}@media screen and (max-width:768px){.contact-container{width:100%}}.contact-container h2{font-size:2rem;font-weight:600;margin-bottom:1rem}.contact-container p{font-size:1rem;font-weight:400;margin-bottom:1rem;text-align:center}.timelineContainer{position:relative;margin:50px 0;padding-left:-20px;border-left:3px solid #ddd}.timelineItem{position:relative;margin-bottom:30px;opacity:.5;transition:opacity .3s ease-in-out}.timelineItem.active{opacity:1}.timelinePoint{position:absolute;left:-11px;top:40px;width:20px;height:20px;background-color:#ddd;border-radius:50%;border:3px solid #fff;z-index:1;transition:background-color .3s ease-in-out}.timelineItem.active .timelinePoint{background-color:#3498db}.timelineContent{padding-left:30px}.timelineContent h3{margin:0 0 5px;font-size:50px}.timelineContent p{margin:0 0 5px;font-size:25px}.timelineContent span{font-size:20px;color:#888}