body{
    font-family:Poppins;
    background:#0f172a;
    color:white;
    margin:0;
    text-align:center;
    }
    
    .hero{
    padding:40px;
    }
    
    .hero h1{
    font-size:42px;
    color:#22c55e;
    }
    
    .controls{
    margin:20px;
    }
    
    input,button{
    padding:10px;
    margin:5px;
    border-radius:6px;
    border:none;
    }
    
    button{
    background:#22c55e;
    cursor:pointer;
    }
    
    #portfolio{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
    padding:20px;
    }
    
    .card{
    background:#1e293b;
    padding:20px;
    border-radius:12px;
    }
    
    .skill{
    background:#22c55e;
    color:black;
    padding:4px 10px;
    margin:4px;
    display:inline-block;
    border-radius:6px;
    }
    
    #heatmap{
    display:grid;
    grid-template-columns:repeat(10,20px);
    gap:4px;
    justify-content:center;
    }
    
    .heat{
    width:20px;
    height:20px;
    }
    
    .level-0{background:#1e293b}
    .level-1{background:#065f46}
    .level-2{background:#10b981}
    .level-3{background:#22c55e}