@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');


    :root {
        --primary-color: #7C3AED;
        --off-white: #F3F4F6;
        --dark-gray: #6B7280;
    }
    
    body {
        font-family: 'Montserrat', sans-serif;
        margin: 0px
    }
    
    hr {
        margin: 2rem 0rem;
    }
    
    /** spaces **/
    
    .margin-md {
        margin: 2rem;
    }
    
    /** container **/
    .container {
        padding: 0rem 1rem;
    }
    
    .container-center {
        max-width: 600px;
        margin: auto;
    }
    
    /** links **/
    .link {
        box-sizing: border-box;
        text-decoration: none;
        padding: 0.5rem 1rem;
    }
    
    .link-primary {
        background-color: var(--primary-color);
        border-radius: 0.5rem;
        color: white;
        display: block;
        max-width: 140px;
        margin: 1rem 1rem 1rem 0rem;
    }
    
    .link-secondary {
        color: var(--primary-color);
        border-radius: 0.5rem;
        border: 1px solid var(--primary-color);
        display: block;
        max-width: 140px;
        margin: 1rem 1rem 1rem 0rem;
    }
    
    /** look into BEM naming convention for CSS **/
    
    /** lists **/
    
    .list-non-bullet {
        list-style: none;
        padding-inline-start: 0px;
    }
    
    .list-item-inline {
        display: inline;
        padding: 0rem 0.5rem;
    }
    
    /** navigation **/
    
    .navigation {
        background-color: var(--primary-color);
        color: white;
        padding: 1rem;
        border-bottom-left-radius: 1rem;
    }
    
    .navigation .nav-brand {
        font-weight: bold;
    }
    
    .navigation .nav-pills {
        text-align: right;
    }
    
    .navigation .link {
        color: white;
    }
    
    .navigation .link-active {
        font-weight: bold;
    }
    
    /** header **/
    
    .hero {
        padding: 2rem;
        padding-top: 5rem;
    
    }
    
    .hero .hero-img {
        max-width: 80%;
        width: 350px;
        display: block;
        margin: auto;
    }
    
    .hero .hero-heading {
        text-align: center;
        padding-top: 1rem;
        color: var(--dark-gray);
    }
    
    .hero .hero-heading .heading-inverted {
        color: var(--primary-color);
    }
    
    /** sections **/
    
    .section {
        padding: 2rem;
    }
    
    .section h1 {
        text-align: center;
    
    }
    
    .ow {
        background-color: var(--off-white);
    }
    
    /** footers **/
    
    .footer {
        background-color: var(--primary-color);
        padding: 4rem 1rem;
        text-align: center;
        color: white;
        border-top-right-radius: 1rem;
    }
    
    .footer .link {
        color: white
    }
    
    .footer .footer-header {
        font-weight: bold;
        font-size: large;
    }
    
    .footer ul {
        padding-inline-start: 0px;
    }
    
    /** projects **/
    .showcase-list {
        padding: 2rem;
    }
    
    /** blogs **/
    .showcase-blog {
        padding-bottom: 6rem;
    }
    /* :root {
        --primary-color: #7C3AED;
        --off-white:#c3cada;
        --dark-gray: #27272a;
    }

    body {
        font-family: 'Oswald', sans-serif;
    }

    hr {
        margin: 1rem 0rem;
    }

    /* container */

    /* .container {
        padding: 0rem 1rem;
    }

    .container-center {
        max-width: 600px;
        margin: auto;
    }

    /* links */
    /* .link {
        text-decoration: none;
        padding: 0.5rem 1rem;
        
    }

    .link-primary {
        background-color: var(--primary-color);
        border-radius: 0.5rem;
        color: rgb(255, 255, 255);
        
    }

    .link-secondary {
        color: var(--primary-color);
        border-radius: 0.5rem;
        border: 1px solid var(--primary-color);
    } */ 


    /* list */

    /* .non-bullet-list {
        list-style: none;
    }

    .list-item-inline {
        display: inline;
        padding: 0rem 0.5rem;
    } */

    /* navigation */

    /* .navigation {
        background-color: var(--primary-color);
        color: white;
        padding: 1rem;
        border-bottom-left-radius: 1rem;
    }

    .navigation .nav-brand {
        font-weight: bold;
        font-size: 1.5rem;
    }

    .navigation .nav-pills {
        text-align: right;
        font-size: 1.1rem;
    }

    .navigation .link {
        color: white;
    } */

    /* header */

    /* .hero {
        padding: 2rem;
    }

    .hero .hero-img {
        max-width: 350px;
        display: block;
        margin: auto;
    }

    .hero .hero-heading {
        padding-top: 1rem;
        color: gray;
        text-align: center;
    } */

    /* section */
    /* .section h1, p {
        text-align: center;
        padding: 0rem;
    }

     ow{
        background-color: var(--off-white);
    } */


   /* footer  */

   /* footer{
    background-color: var(--dark-gray);
    padding: 2rem 1rem;
    text-align: center;
    color: white;
    border-top-right-radius: 1rem;
   }

   .footer .link{
    color: white;
    padding-inline-start:0px;
    text-align: center;
   }

   .footer .footer-header {
    font-weight: bold;
    font-size: large;
   } */