html{scroll-snap-type:y mandatory;scroll-behavior:smooth}*{padding:0;margin:0;box-sizing:border-box;font-family:Inter}body{background-color:#1a141e;color:#fff}section{height:100vh;scroll-snap-align:center}section:nth-child(1){background-color:#1a141e}section:nth-child(2){background-color:#000}section:nth-child(3){background-color:#1a141e}section:nth-child(4){background-color:#000}section:nth-child(5){background-color:#1a141e}section:nth-child(6){background-color:#000}a{text-decoration:none;color:inherit}#icons{font-size:1.5rem;margin-right:10px}.header{height:100px}.header .wrapper{max-width:1366px;margin:auto 150px;display:flex;align-items:center;justify-content:space-between;height:100%}.header .wrapper span{font-weight:700;font-size:2.5em}.header .wrapper .socials{display:flex;gap:20px}.header .wrapper .socials img{width:40px}.header .wrapper .menu{background-color:#1a141e}.header .wrapper .links{display:flex;background-color:#1a141e;gap:50px;font-size:20px;right:0;margin-left:700px}.menu{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#000;color:#fff}.menu .bg{z-index:999;position:fixed;top:0;left:0;bottom:0;width:400px;background-color:#000}.menu .bg .links{position:absolute;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}.menu .bg .links a{font-size:40px}.menu button{z-index:999;width:40px;height:40px;border-radius:50%;position:fixed;top:33px;left:31.5px;background-color:transparent;border:none;cursor:pointer}.hero{height:calc(100vh - 100px);overflow:hidden;background:linear-gradient(180deg,#1a141e,#000000);position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:20px}.textContainer{font-size:clamp(40px,8vw,90px);letter-spacing:7px;line-height:140%;font-weight:600;max-width:80%;transform:translateY(-20%)}.imageContainer{width:100%;max-width:500px;height:auto;margin-top:20px}.aspiring{font-size:clamp(16px,3vw,30px)}@media (max-width: 768px){.hero{height:auto;padding:50px 20px}.textContainer{font-size:7vw;width:100%}.imageContainer{width:80%}}.about{height:100vh;overflow:hidden;position:relative;display:flex;flex-direction:center;align-items:center;text-align:center;justify-content:center;background:linear-gradient(180deg,#000000,#1a141e);padding:50px;color:#fff;gap:50px}.about .textContainer{flex:1;text-align:left;font-size:60px;letter-spacing:8px;line-height:180%;margin-top:28vh}.about .aboutContent{font-size:18px;line-height:1.8}.about .aboutContent p{margin-bottom:16px}.about .headshot{float:left;width:150px;height:150px;object-fit:cover;border-radius:10px;margin:4px 24px 12px 0}@media (max-width: 768px){.about{height:auto;padding:50px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.textContainer{font-size:7vw;width:100%;margin-top:20vh}.aboutContent{font-size:16px}.headshot{float:none;display:block;margin:0 auto 20px;width:120px;height:120px}}.projects{height:100vh;overflow:hidden;background:linear-gradient(180deg,#000000,#1a141e);position:relative}.projects .textContainer{position:absolute;text-align:center;transform:translate(-50%,-140%);top:20%;left:50%;font-size:60px;letter-spacing:8px;line-height:140%;display:inline-block}.projects .imageContainer{height:100%;position:absolute;top:0;right:0}.projects .center{display:flex;align-items:center;justify-content:center;height:100vh}.projects .projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;justify-content:center;width:50%;height:50%}.projects .project-card{background:#1a141e;border:2px solid #333;border-radius:8px;padding:1.5rem;text-align:left;transition:all .3s ease;box-shadow:0 4px 8px #0000004d}.projects .project-card:hover{border-color:#1a141e;box-shadow:0 6px 12px #ff007f80}.projects .project-card .project-title{font-size:1.5rem;margin-bottom:1rem;color:#fff}.projects .project-card .project-description{font-size:1rem;margin-bottom:1.5rem;color:#ccc}.projects .project-card .project-link{display:inline-block;padding:.5rem 1rem;background:#000000;color:#fff;border-radius:4px;text-decoration:none;font-weight:700;transition:background .3s ease}.projects .project-card .project-link:hover{background:#333}.contact{padding:3rem 2rem;display:flex;flex-direction:column;align-items:center;background:linear-gradient(180deg,#1a141e,#000000);color:#fff}.contact .textContainer{font-size:60px;letter-spacing:5px;text-align:center;margin-bottom:2rem}.contact form{display:flex;flex-direction:column;gap:1.5rem;width:100%;max-width:600px;background:#1a1a1a;padding:2rem;border-radius:10px;box-shadow:0 4px 8px #0000004d}.contact form .input-box{display:flex;flex-direction:column;gap:.5rem}.contact form .input-box label{font-size:1rem;font-weight:600;color:#aaa}.contact form .input-box .field{padding:.8rem 1rem;font-size:1rem;border:1px solid #333;border-radius:5px;background-color:#222;color:#fff;outline:none}.contact form .input-box .field:focus{border-color:#06b6d4;box-shadow:0 0 4px #06b6d4}.contact form .input-box .mess{resize:none;height:150px}.contact form button{align-self:center;padding:.8rem 2rem;font-size:1rem;font-weight:700;color:#fff;background:#1a141e;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s}.contact form button:hover{background:#000000}@media (max-width: 768px){.contact{padding:2rem 1rem}.contact .textContainer{font-size:2rem}.contact form{padding:1.5rem}}.skills{height:100vh;overflow:hidden;background:linear-gradient(180deg,#1a141e,#000000);position:relative}.skills .textContainer{position:absolute;text-align:center;transform:translate(-50%,-140%);top:20%;left:50%;font-size:60px;letter-spacing:8px;line-height:140%;display:inline-block}.skills .imageContainer{height:100%;position:absolute;top:0;right:0}.skills .center{display:flex;align-items:center;justify-content:center;height:100vh}.skills .skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;width:50%;height:50%}.skills .skill-card{background:#1a141e;border:1px solid #333;box-shadow:0 4px 8px #0000004d,0 0 15px #0ff3;border-radius:10px;padding:1.5rem;text-align:center;transition:transform .3s ease,box-shadow .3s ease}.skills .skill-card img{width:50px;height:50px;margin-bottom:1rem;filter:drop-shadow(0 0 10px cyan)}.skills .skill-card span{font-size:1.2rem;font-weight:700}.skills .skill-card:hover{transform:translateY(-5px);box-shadow:0 8px 16px #00000080,0 0 25px #00ffff80}
