.modalContent{border-radius:16px;width:100%;overflow-y:auto;position:relative;border-radius:1rem;padding:10px;max-width:1700px;margin:0 auto}.projects-header{font-family:var(--font-base);font-size:35px;color:var(--color4);text-align:center;padding:10px 30px;box-shadow:0 0 180px 1px var(--color1);border-radius:10px;display:inline;margin:auto}.closeButton{position:absolute;top:55px;right:15px;height:35px;display:flex;align-items:center;justify-content:center;background:var(--color3);border:none;color:var(--color4);font-size:1rem;cursor:pointer;z-index:10;transition:color .2s;border-radius:20px;padding:10px;gap:7px;box-shadow:0 0 10px var(--color1-opacity-15)}.closeButton:hover{color:var(--color2)}.modalGrid{display:flex;justify-content:center;gap:10px;align-items:center}.modalImageContainer{position:relative;height:100%;background-color:var(--color5-opacity-15);flex:1 1}.outside{display:block}.inside{display:none}.modalImage{width:100%;height:100%;object-fit:cover;background-color:var(--color5-opacity-15)}.modalImageContainer:hover .modalImage{object-fit:contain}.modalDetails{flex:1 1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:linear-gradient(to left,var(--color5-opacity-15),var(--color1-opacity-15));border-radius:30px;border-left:5px solid var(--color1);border-right:5px solid var(--color5);padding:10px}.modalDetails h2{color:var(--color4);margin-top:0;margin-bottom:15px;font-size:1.8rem;text-align:center}.techStack{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:20px}.techStack span{background:var(--color1);color:var(--color3);padding:5px 12px;border-radius:20px;font-size:.8rem;font-weight:500}.section{margin-bottom:20px}.section h3{color:var(--color2);margin-bottom:10px;font-size:1.1rem}.section p,.section ul{color:var(--color4);line-height:1.6;font-size:.95rem}.section ul{padding-left:20px}.section ul li{margin-bottom:8px}.buttonGroup{display:flex;flex-wrap:wrap;gap:10px;margin:25px 0}.githubButton,.liveButton{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:8px;font-weight:500;text-decoration:none;transition:all .2s ease}.liveButton{background:var(--color2);color:var(--color1)}.liveButton:hover{background:var(--color4);transform:translateY(-2px)}.githubButton{background:rgba(var(--color3),.1);color:var(--color3);border:1px solid rgba(var(--color3),.3)}.githubButton:hover{background:rgba(var(--color3),.2);transform:translateY(-2px)}.demoCredentials{background:rgba(var(--color3),.05);border-radius:8px;margin-top:20px;border:1px dashed rgba(var(--color3),.2)}.demoCredentials h3{margin-top:0;margin-bottom:12px;color:var(--color2);font-size:1.1rem}.credentialItem{display:flex;align-items:center;flex-wrap:wrap;margin-bottom:10px;color:var(--color4)}.credentialLabel{margin-right:10px;font-size:.9rem;display:flex;align-items:center;gap:5px}@media (max-width:768px){.modalGrid{flex-direction:column}.outside{display:none}.inside{display:block;margin-bottom:20px}}@media (max-width:480px){.buttonGroup{flex-direction:column}.githubButton,.liveButton{justify-content:center}}