:root{

    --Blue: #21409A;
    --ThumbnailColor: #FFFFFF;
    --grey: #F0F0F0;
    
}

* {
    box-sizing: border-box;
    font-family: 'Kumbh Sans', sans-serif;
}

body {
    margin: 0 auto;
    width: 100%;
    background-color: white;
    height: 100%;
   
}
main{
   
    max-width: 900px;
    margin: 0 auto;
   
    margin-bottom: 2em;
}
/*
.constrained-width{
    max-width: 1120px;
    margin: 0 auto;
}
*/

header{
    
    margin: 0 auto;    
}

img{
    max-width: 100%;
    height: auto;
}

h1, h2, h3 {
    color: var(--Blue);
    
}

a{
    color: black;
    text-decoration: none;
}
a:hover{
    text-decoration: none;
    color: var(--Blue);
}


.container{
   margin-left: 0;
   margin-right: 0;
   padding-left: 0;
   padding-right: 0;
   margin: 0 auto;
   max-width: 900px;
}
.row{
    margin-left: 0;
    margin-right: 0;
}
.col{
    padding-left: 0;
    padding-right: 0;
}

/* Header */

header > .container{
    max-width: calc(1440px - 4em);
    padding-top: 2.5em;
   
}

header > .row{
    position: relative;
}


.logo-column{
   background-color: white;
   margin: 0 auto;
}


#logo{
    width: 120px;
    margin: auto 0;
    z-index: 3;
}


.nav-row{
    margin: 0 auto;
    text-align: center;
}
.nav-column{
    padding-bottom: .5em;
    padding-top: 2em;
    margin: 0 auto;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}

.header-rule{
    max-width: 900px;
    border: 1pt solid rgb(130, 130, 130);
    
}
.footer-rule{
    max-width: 900px;
    border: 1px solid rgb(130, 130, 130);
    
}


/* main section */

/* Stop bootstrap at 768px from enlarging padding too much

main > .container{
    max-width: calc(100% - 2em);
}*/




/* buttons */

    
    .about-btn a{
        
        outline: black solid 2px;
        text-decoration: none;
        padding: 10px 15px;
        background-color: var(--BtnColor);
        display: inline-block;
    
        text-align: center;
    }


    .about-btn a:hover{
    color: black;
    background-color: white;
    }





/* Hero Section */

.hero-container{
    padding: 2em;
    max-width: 100%;
    
}

.hero-row > h2{
   margin: 0 auto;
   color: var(--Blue);
}




/* Home Page */




#home-pg .right-col > img{
    max-width: 100%;
   min-height: 315px;
    object-fit: cover;
}



/* Works Page */

.gallery-img a {
    width: 100%;
    height: 185px;
    display: inline-block;
    text-decoration: none;
    border: black solid 1px;
  }
  .gallery-img a div {
    transition: all 0.2s ease-out;
    opacity: 0;
    height: 100%;
    color: white;
    font-weight: 400;
    text-align: center;
    padding: .5em;
    font-size: 1.25em;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .gallery-img a:hover div {
    opacity: 1;
  }



  #dj-img{
    background: url('../images/projects/dust-jacket/a-lam-dustjacket-cover-mock-600.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    
  }
  #mh-img{
    background: url('../images/projects/mental-health/a-lam-mental-health-billboard-600.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  #v-img{
    background: url('../images/projects/vinyl/a-lam-vinyl-cover-mock-600.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  #cc-img{
    background: url('../images/projects/university-promo/a-lam-partumu-folder-front-600.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  #h-img{
    background: url('../images/projects/homelessness-campaign/a-lam-homelessness-poster-mock-600.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  #cc-img{
    background: url('../images/projects/university-promo/a-lam-partumu-folder-front-600.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  #i-img{
    background: url('../images/projects/infographic/a-lam-infographic-mock-600.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  #w-img{
    background: url('../images/projects/wine/a-lam-wine-label-mock-600.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  #r-img{
    background: url('../images/projects/remembrance-book/a-lam-worldremembers2022-front-mock-600.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  #un-img{
    background: url('../images/projects/un-campaign/a-lam-un-campaign-goal-12-poster-mock-600.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  #sb-img{
    background: url('../images/projects/laetus-cafe/a-lam-smallbusiness-brand-guide-front-600.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  #cook-img{
    background: url('../images/projects/cookbook/a-lam-cookbook-cover-mock-600.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  #ny-img{
    background: url('../images/projects/new-york-magazine/a-lam-new-york-magazine-cover-mock-600.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  #ar-img{
    background: url('../images/projects/artificial/a-lam-artificial-preview-600.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  #an-img{
    background: url('../images/projects/the-animae-con/a-lam-the-animae-con-preview-600.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  #la-img{
    background: url('../images/projects/lee-associates/a-lam-lee-associates-wall-graphic-mock-600.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  #cs-img{
    background: grey;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
  }



figcaption{
    margin-top: .5em;
    text-align: center;
}


.works-row{
    gap: 1.5em;
}
.works-col{
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 1.5em;

}





    .text-ctn{
        background-color: var(--grey);
    }
    


    .left-col{
        padding: 2em;
    }
    .right-col{
        padding-left: 0;
        padding-right: 0; 
    }
    #about-pg .right-col > img{
        min-width: 100%;
        min-height: 465px;
        object-fit: cover;
    }
    


/* Project pages */

.center-col{
    padding: 3em;
    padding-left: 7em;
    padding-right: 7em;
    margin: 0 auto;
}

.projects-ctn{
    margin-top: 2em;
}
.projects-row{
    gap: 2em;
}
.projects-col{
    margin-bottom: 2em;
}
.img-border{
   border: black solid 1px;
}


.grey-box{
    background-color: var(--grey);
    padding: 2em;
    margin-bottom: 2em;
    border: black 1pt solid;
}

/* Contact page */

.contact-row a{
   margin: 0 auto;
   text-align: center;
}

/* Footer */

footer{
    padding-top: 1em;
    padding-bottom: 2em;
  
   
}
footer > .container{
    max-width: 900px;
    
}
.footer-row{
    text-align: center;
    margin: 0 auto;
}
footer h6{
    margin: 2em;
    font-weight:normal;
    text-align: center;
    margin: 0 auto;
    margin-top: 2em;
    margin-bottom: 1em;
}



/* Nav */


/*nav section*/
#primary-nav{
    overflow: hidden;
    text-align: center;
    
}

#primary-nav ul{ /*ul contains the listed items*/
    margin: 0;
    padding: 5px;
}

#primary-nav li{
    list-style-type: none; /*removes bullet points*/
    display: inline-block; /* displays list horizontally*/
    margin: 0 auto;
    padding-left: 2em;
    padding-right: 2em;
}
#primary-nav li a{
    padding: 10px 20px; /*better to put padding on the hyperlink*/
    text-decoration: none;
    font-size: larger;
    font-weight: 400;
    color: black;
    
}

#primary-nav a:hover {
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 3px;
    text-decoration-color: var(--Blue);
}

/*hamburger*/
#toggle-nav{
    display: none;
    
}

/*active nav buttons*/
#work-pg #primary-nav li:nth-child(1) a{
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 3px;
    text-decoration-color: var(--Blue);
}
#about-pg #primary-nav li:nth-child(2) a{
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 3px;
    text-decoration-color: var(--Blue);    
}
#contact-pg #primary-nav li:nth-child(3) a{
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 3px;
    text-decoration-color: var(--Blue);    
}


#nav-rule{
    max-width: 900;
    border-top: 2px solid white;
    opacity: 0;
    display: none;
    max-height: 0;
}


/* This media query defines how the page displays beneath a breakpoint */
@media (max-width: 1000px){
    body{
        margin: 0 auto;
        padding-left: 70px;
        padding-right: 70px;
        
    }

}



@media (max-width: 768px){
    .nav-column{
        padding-bottom: 0;
    }
    #toggle-nav{
        display: block; /* display button beneath breakpoint */
        font-size: larger;
        margin: 0 auto;
        cursor: pointer;
        z-index: 3;
        font-weight: 400;
 
    }
    #primary-nav{
        padding-top: 1.5em;
        max-height: 0;
        margin-bottom: -1em;
        z-index: 2;
       
    }

    #primary-nav li{
        display: block;
        text-align: center;
        margin-bottom: 1em;
        padding-bottom: 1em;
        
    }
   

    /* Here, we override the rule when the body has a class of nav-open */
    body.nav-open #primary-nav{
        max-height: 500px;
    }
    body.black-nav-rule #primary-nav{
        max-width: 900px;
        border-top: 2px solid rgb(130, 130, 130);
        margin-top: 1.5em;
        
    }
   
   
   
   
    body{
        padding-left: 30px;
        padding-right: 30px;
    }
    
    
 
    
    h1,h2, h3{
        text-align: center;
    }
    
    .center-col{
        padding: 3em;
        padding-left: 2em;
        padding-right: 2em;
        margin: 0 auto;
    }

    /* responsive columns*/
    main .row{
        display: initial;
    }
    
    
    /*fix shifted images to left*/
  
    main > .hero-container{
        max-width: 100%;
    }
   
   
    .about-btn{
        text-align: center;
    }

    footer{
        padding-top: 2em;
        padding-bottom: 2em;
    }
   
    .gallery-img a div {
      
        font-weight: 400;
        text-align: center;
        font-size: 2em;
     
      }
    
    .gallery-img a {
        width: 100%;
        height: 300px;
    }
    
    
}


@media (max-width: 450px){
    
    #logo{
        max-width: 150px;
    }
   
    h4{
        font-size: large;
    }

    .hero-container img{
        object-position: initial;
    }
    
    
}