html, body{
    margin: 0;
    padding: 0;
    font-family: 'Lato', sans-serif;
    color: #141414;
    width: 100%;
    position: relative;
}

/* Typography */

h1,h2,h3{
    font-family: 'Playfair Display', serif;
}

a{
    color: #141414;
    text-decoration: none;
}

a:hover{
    color: orangered;
}

.featured-header{
    margin: 18em 1.25em 1.56em;
    color: #e0e1dd;
    text-shadow: 2px 2px 4px black;
    
}

.featured-header:hover{
    color: orangered;
}

section a{
    color: aliceblue;
}


li a{
    margin-right: 0.5em;
    max-width: fit-content;
}


.featured-date,
.date{

    font-size:0.75rem ;
    font-weight: 400;
}

.date{
    margin-bottom: 0.87rem;
}

.featured-date,
.featured-title{
    margin-top: 0.5em;
}

.featured-title,
.post-header h2
{
    font-size: 1.75rem;
    font-weight: 700;
}

.post-header p,.post-header h2{
    margin-top: 1em;
}



.featured-p{
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1;
    margin-top: .5em;
}

h1{
    margin: .1em 0 0 0 ;
    padding: 0;
    font-size: 0.8rem;
}

 footer h2,footer p{
    margin: 0;
}

footer p{
    color: #D7D7D7;
    font-size: 0.75rem;
}

/* Site layout */

.nav-container {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0.1em;
    font-size:0.7em ;
    font-weight: 600;
    background-color: #f4f4f4;
    position: absolute;
    top: 60px; /* Adjust to align below header */
    right: 10px; /* Align to the right edge */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    z-index: 100;
}


.hidden{
    display: none;
}

.first-li{
    margin-right: 1.2em;

}

.container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}


  .container h1{
    margin-right: 10em;
  }

  .container div{
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
    padding: 0.5em;
  }

   .featured-article{
    background-image:linear-gradient(
        rgba(0, 0, 0, 0.5), /* Black overlay with 50% opacity */
        rgba(0, 0, 0, 0.5)
    ),url("images/article photo.jpg");
    background-size: cover;
    height: 100vh;
    width: 100%;
    grid-area: feat;
}


body{
    display: grid;
    grid-template-columns: 1em 1fr 1em;
    grid-template-areas:
        ".... .... ...."
        "head head head" 
        "feat feat feat"
        ".... main ...."
        "foot foot foot";
        gap: 1em 0;
}

.container{
    grid-area: head;
}

footer{
    grid-area: foot;
    background-color: #141414;
    color: aliceblue;
    text-align: center;
    align-items: center;
    padding: 1em;
}

/* main element layout */

main{
    grid-area: main;
    display: grid;
    gap: 1em ;
    grid-template-columns: 1fr;
    grid-template-areas: 
        "post"
        "post2"
        "post3"
        "extra"
        "button"
    ;

}

.more{
    display: none !important;
}

button{
    grid-area: button;
    text-align: center;
    cursor: pointer;
}

.featured-article{
    grid-area: feat;
}

.post-1{
    grid-area: post;
}

.post-2{
    grid-area: post2;
}

.post-3{
    grid-area: post3;
}

.post-4{
    grid-area: post4;
}

.post-5{
    grid-area: post5;
}

.post-6{
    grid-area: post6;
}

.extra{
    grid-area: extra;
    margin-top: 1em;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: 
        "post4"
        "post5"
        "post6"
    ;
    gap: 1em;
}

/* buttons */

.hamburger-menu{
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    right: 10px;
    z-index: 200;
    margin-bottom: 0.7em;

}

button#view-more {
    background: transparent;
    display: block;
    margin: 1em auto;
    padding: 0.5em 1em;
    color:black;
    cursor: pointer;
    font-size: 1rem;
    border: none;
    text-decoration: underline;
}

button#view-more:hover {
    color: red;
}

img{
    width:100% ;
}

.header-img{
    width: 1.43em;
    height: 1.43em;
}

/* Media Queries */

@media (min-width: 768px) {
    main {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-areas: 
            "head head head head head head head head head head head head"
            "post post post post post2 post2 post2 post2 post3 post3 post3 post3"
            "extra extra extra extra extra extra extra extra extra extra extra extra"
            "button button button button button button button button button button button button";
            gap: 1em;
    }

    .extra {
        grid-area: extra;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-areas: 
            "post4 post4 post4 post4 post5 post5 post5 post5 post6 post6 post6 post6";
            gap: 1em;

    }

    img {
        width: 400px;
        height: 232px;
    }

    .hamburger-menu{
        display: none;
    }

    .hidden{
        display: flex;
    }

    .featured-article{
    background-image:linear-gradient(
        rgba(0, 0, 0, 0.5), /* Black overlay with 50% opacity */
        rgba(0, 0, 0, 0.5)
    ),url("images/article photo.jpg");
    background-size: cover; 
    height: 100vh;
    grid-area: feat;
}

    .nav-container{
        background-color: transparent;
        position: static;
        box-shadow: none;
        border-radius: 0;
        margin-right: 1em;
        margin-bottom: 1.4em;
    }

}