*{box-sizing:border-box}body{color:#fdfafa;background-color:#151313;margin:0;font-family:Inter,sans-serif}main{max-width:1100px;margin:0 auto;padding:100px 32px}header{z-index:100;background-color:#080808;border-bottom:1px solid #333;width:100%;padding:24px 32px;position:sticky;top:0}nav{justify-content:flex-end;align-items:center;display:flex}nav a{color:#f5f5f5;text-decoration:none}.nav-links{gap:32px;display:flex}.nav-links a:hover{color:#a3a3a3}h1{font-size:70px}.hero{grid-template-columns:1fr 1fr;align-items:center;gap:64px;min-height:400px;display:grid}.hero h1 span{display:block}.hero-animation{justify-content:flex-end;align-items:center;display:flex}.pixel-a{grid-template-rows:repeat(7,28px);grid-template-columns:repeat(5,28px);gap:8px;animation:3s ease-in-out infinite float;display:grid}.pixel{width:28px;height:28px}.pixel.on{background-color:#f5f5f5;box-shadow:0 0 12px #ffffff1f}.pixel.off{background-color:#0000}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}#projects>h2{border-bottom:1px solid #333;margin-top:20px;padding-bottom:10px}#projects>h2,#contact>h2{letter-spacing:-.5px;font-size:32px;font-weight:700}.about-grid{grid-template-columns:1fr 1fr;align-items:center;gap:64px;display:grid}.about-profile{background-color:#242424;border:1px solid #444;border-radius:8px;padding:32px}.about-profile h3{letter-spacing:-.5px;margin:16px 0;font-size:32px;font-weight:700}.about-content h2{letter-spacing:-1px;font-size:56px;font-weight:700;line-height:1.1}.about-profile p:last-child{border-top:1px solid #444;padding-top:16px}.about-content{border-left:1px solid #444;padding-left:32px}.about-profile p{color:#a3a3a3;font-size:15px;line-height:1.6}.about-profile p:first-child,.about-profile p:last-child{text-transform:uppercase;letter-spacing:1.5px;font-size:12px}.cv-button{color:#f5f5f5;background-color:#242424;border:1px solid #444;border-radius:8px;width:fit-content;margin-top:16px;padding:12px 20px;text-decoration:none;display:inline-block}.cv-button:hover{background-color:#333}.contact-grid{grid-template-columns:1fr 1fr;align-items:center;gap:64px;display:grid}#contact>h2{border-bottom:1px solid #333;padding-bottom:10px}#contact{margin-top:40px}.contact-left h2{max-width:400px;font-size:56px;line-height:1.1}.contact-right{border-left:1px solid #444;padding-left:32px}.contact-item{background-color:#242424;border:1px solid #444;border-radius:8px;margin-bottom:16px;padding:16px 20px}.contact-item h3{text-transform:uppercase;color:#a3a3a3;letter-spacing:2px;margin-bottom:8px;font-size:13px}.contact-item a{color:#f5f5f5;font-size:18px;text-decoration:none}.contact-item a:hover{color:#a3a3a3}.projects-grid{grid-template-columns:repeat(2,1fr);gap:24px;display:grid}.project-card{background-color:#1c1c1c;border:1px solid #333;border-radius:10px;overflow:hidden}.project-card img{aspect-ratio:16/10;object-fit:cover;width:100%;display:block}.project-info{padding:20px}.project-info h3{margin:0 0 8px}.project-info p{color:#a3a3a3;margin:0}.project-toggle{width:100%;color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:none;padding:0;display:block}.modal-overlay{z-index:1000;background-color:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background-color:#302f2f;border:1px solid #333;border-radius:10px;width:90%;max-width:1050px;height:1000px;max-height:90vh;overflow-y:auto}.modal-header{background-color:#1c1c1c;justify-content:center;align-items:center;display:flex;position:relative}.modal-header button{position:absolute;right:12px}.modal-content img{border-radius:8px;width:80%;height:auto;margin:20px auto;display:block}.modal-details{border-bottom:1px solid #555;grid-template-columns:2fr 1fr;gap:32px;padding:24px 32px;display:grid}.modal-technologies{border-left:1px solid #555;padding-left:24px}.modal-links{justify-content:space-between;display:flex}.modal-links a{color:#f5f5f5;background-color:#1c1c1c;border:1px solid #555;border-radius:8px;width:auto;margin-top:10px;padding:10px 20px;text-decoration:none;display:inline-block}.modal-links a:hover{background-color:#404040}@media (width<=700px){.projects-grid{grid-template-columns:1fr}}
