:root{--primary-color:#3498db;--secondary-color:#2c3e50;--text-color:#333;--bg-color:#ecf0f1}body{font-family:Roboto,sans-serif;line-height:1.6;margin:0;padding:0;background-color:var(--bg-color);color:var(--text-color)}.container{max-width:1200px;margin:0 auto;padding:0 20px}header{background-color:var(--primary-color);color:#fff;padding:1rem 0;box-shadow:0 2px 5px rgba(0,0,0,.1)}nav{display:flex;justify-content:space-between;align-items:center}.logo{font-size:1.5rem;font-weight:700}.nav-links{display:flex;list-style:none;margin:0;padding:0}.nav-links li{margin-left:20px}.nav-links a{color:#fff;text-decoration:none;transition:color .3s ease}.nav-links a.router-link-active,.nav-links a:hover{color:var(--secondary-color)}.menu-toggle{display:none;background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer}main{padding:2rem 0}.hero{background-color:var(--secondary-color);color:#fff;text-align:center;padding:4rem 0;margin-bottom:2rem}.hero h1{font-size:2.5rem;margin-bottom:1rem}.hero p{font-size:1.2rem;max-width:600px;margin:0 auto}.tech-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}.tech-card{background-color:#fff;border-radius:8px;padding:1.5rem;box-shadow:0 4px 6px rgba(0,0,0,.1);transition:transform .3s ease}.tech-card:hover{transform:translateY(-5px)}.tech-card i{font-size:3rem;color:var(--primary-color);margin-bottom:1rem}.tech-card h3{margin-bottom:.5rem}footer{background-color:var(--secondary-color);color:#fff;text-align:center;padding:1rem 0;margin-top:2rem}.blog-post{background-color:#fff;border-radius:8px;padding:2rem;margin-bottom:2rem;box-shadow:0 4px 6px rgba(0,0,0,.1)}.blog-post h2{color:var(--primary-color)}.tutorial-list{list-style:none;padding:0}.tutorial-list li{background-color:#fff;border-radius:8px;padding:1rem;margin-bottom:1rem;box-shadow:0 2px 4px rgba(0,0,0,.1)}.resource-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.resource-item{padding:1rem;text-align:center;box-shadow:0 2px 4px rgba(0,0,0,.1)}.about-section,.resource-item{background-color:#fff;border-radius:8px}.about-section{padding:2rem;box-shadow:0 4px 6px rgba(0,0,0,.1)}@media (max-width:768px){.nav-links{display:none;flex-direction:column;position:absolute;top:60px;left:0;right:0;background-color:var(--primary-color);padding:1rem}.nav-links.active{display:flex}.nav-links li{margin:10px 0}.menu-toggle{display:block}.hero h1{font-size:2rem}.hero p{font-size:1rem}.tech-grid{grid-template-columns:1fr}}