@import "nav.css";
@import "footer.css";
@import "header.css";


* {
    /* box-sizing: border-box;
    border: solid red 1px;
    padding: 1px;
    margin: 1px;  */
}


body {
    margin: 0px;
    padding: 0px;
}


#cont-grid{
    display: grid;
    height: auto;
    margin: 5px;
    grid-template: minmax(auto, auto) / 1fr;
    gap: 5px;
    justify-items: stretch;
    grid-template-areas:
    "hd"
    "pic"
    "post"
    "ft";
}


#top {
    grid-area: hd;
    margin: 0px;
    justify-self: center;
    width: 100%;
}


#pic-sect {
    grid-area: pic;
}


#post-sect {
    grid-area: post;
}


#ft {
    grid-area: ft;
}


.picture-sect {
    width: 100%;
    background-size: 100% 100%;
    border: solid 1px yellowgreen;
    border-radius: 7px; 
    height: 250px;
    margin-bottom: 8px;
}


#pic-1 {
    background-image: url("../images/dusseldorf1.jpg");

}


#pic-2 {
    background-image: url("../images/dusseldorf2.jpg");
}


#pic-3 {
    background-image: url("../images/dusseldorf3.jpg");
}


#pic-4 {
    background-image: url("../images/dusseldorf4.jpg");
}


#pic-5 {
    background-image: url("../images/dusseldorf5.jpg");
}


#pic-6 {
    background-image: url("../images/dusseldorf6.jpg");
}


#pic-7 {
    background-image: url("../images/dusseldorf7.jpg");
}


#pic-8 {
    background-image: url("../images/dusseldorf8.jpg");
}


#post-sect {
    padding: 0 auto;
}


.blog-post-title {
    text-align: center;
}


.blog-post-title > h2 {
    border-top: 1px solid yellowgreen;
    border-bottom: 1px solid yellowgreen;
}


.author-info {
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    padding: 10px;
    margin: 10px;
    border: 3px solid greenyellow;
    border-radius: 75px 0px;
    background-color: grey;
    color: lime;
}


.author-image {
    border-radius: 50%;
}


.author-info-text {
    padding: 30px;
    font-family:  'Arial Narrow', Arial, sans-serif
}


figure {
    text-align: center;
    width: 90%;
    margin: 15px auto;
} 


figcaption {
    text-align: right;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 15px;
    margin: 0px;
}


.pic-post {
    width: 100%;
    border-radius: 25px;
}


.blog-article > p {
    padding: 10px;
    margin: 0;
    text-align: justify;
    font-size: 0.8em;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: 100;
    color: darkmagenta;
}


.share-post > p > a {
    text-decoration: none;
    display: inline-block;
    margin: 0px;
}


h3 {
    text-decoration: underline;
    text-align: center;
    font-size: 1em;
    color: blueviolet;
}


.share-post {
    text-align: right;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 0.7em;
    margin-top: 25px;
}


@media (min-width: 600px) {
    #cont-grid {
      display: grid;
      height: auto;
      margin: 25px;
      grid-template: minmax(15vh, auto) / 1fr 2fr;
      gap: 25px;
      justify-content: stretch;
      grid-template-areas:
      "hd hd"
      "pic post"
      "ft ft";
    }

    body {
        font-size: 25px;
    }

    #top {
        width: 50%;
    }
    
    .author-info {
        flex-flow: row nowrap;
        margin: 0px;        
        border-radius: 55px 0px;
        background-color: grey;
        color: lime;
    }
}