body{
    font-family: Arial, sans-serif;
    margin:0;
    line-height:1.4;
    background:rgb(255, 255, 255);
    color:#000000;
    font-family: "Fira Sans", sans-serif;
}
    
    section{
        padding:50px 15%;
    }
    
    h1,h2,h3{
    margin-bottom:20px;
    }

    a{
        text-decoration: none;
        
    }
    
    a:active, a:visited, a{
        color:#45496a;
    }

    .hero{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items: flex-start;
    min-height:50vh;
    background-color: #ffffff;
    color: #000000;
    }

    
    .hero p{
    max-width:600px;
    font-size:1.2rem;
    font-weight: 300;
    font-style: normal;

    }

    .hero p a {
        color: #000000;
    }
  
    .heading{
        color: #9c5342;
        font-size: 2rem;
    }
    

    .buttons{
        border-radius:50px;
        
    }

    .buttons a{
    display:inline-block;
    margin-right:15px;
    margin-top:20px;
    padding:10px 20px;
    background:#ebedd4;
    text-decoration:none;
    border-radius:6px;
    font-weight:bold;
    color:#9c5342;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }

    #impact{
        background-color: #9c5342;
    }
    
   #focus, #devmarketing{
        background-color: #ebedd4;
    }
    .metrics{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:30px;
    text-align:center;
    }

    
    .metric{

    padding:30px;
    border-radius:10px;
    background-color:#ebedd4;
    color: #000000;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    }

    #impact h2{
        color: #ffffff;
    }

    #impact .metric h3{
        color: #9c5342;
    }

    #about{
        background-color: #ffffff;
        color: #9c5342;
    }

    #videos{
        background-color: #ffffff;

    }

    #videos h3, #devmarketing h3{
        color: #ffffff;
    }
    #writing h3, #devmarketing h2, #videos h2{
        color: #9c5342;
        
    }


    #writing{
        background-color: #9c5342;
        color:#ebedd4;
        

    }

    #devmarketing .grid .card, #videos .grid .card{
        background-color: #9c5342;
        color: #000000;
    }

    #contact{
        background-color: #000000;
        color:#ebedd4;
    }
    .grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
    }
    
    .card{
    background:#ebedd4;
    padding: 20px;
    border-radius:12px;
    color: #000000;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    
    }

    footer{
    text-align:center;
    padding:15px 10%;
    background:#cb639c;
    }