body{
    background-image: url("Main_Background.png");
    background-size: cover
}

/* grid and its areas */
.container {
    display: grid;
    width: 900px;
    grid-template-columns:  15% 1fr; 
    grid-template-rows: 70px 35px 120px 350px 60px 60px;
    gap:4px;
    grid-template-areas: 
            "header header "
            "navigation navigation "
            "mainpicture article1 "
            "article2 article2 "
            "article2 article2 "
            "footer footer ";
    margin: 0 auto;
    
} /* grid container */
/* general item & buttons */
.item {
    color: pink;
    text-align: center;
    align-content: center;
}
/* used for shinig stuff */
.item:hover {
    transition: background-color 0.5s, color 0.5s, text-shadow 0.5s;
}



.header {
    grid-area: header;
    color:pink;
} /* header */



.navigation {
    grid-area: navigation;

}   /* navigation menu */

a {
    grid-area: navigation;
    color: pink;
    text-decoration: none;
}   /* navigation menu - links */

/* navigation menu flex-box */
.navigation {
    display: flex;
    flex-direction: row;
    flex-flow: row wrap;
    justify-content: center;
    list-style: none;
    margin: 0;
    gap: 20px;
    border: 3px solid white;
    border-radius: 10px;

}

/* shining navigation */
.navigation:hover{
    background-color: rgba(200, 255, 255, 0.1);
    color: hotpink;
}

.NavCattegory:hover{
background-color: rgba(200, 255, 255, 0.1);
    color: white;
    text-shadow: 1px 1px 5px white;
    transition: background-color 0.5s, color 0.5s, text-shadow 0.5s;}




.mainpicture {
    grid-area: mainpicture;
    object-fit: cover;
    width: 75%;
    height: 97%;
    border: 3px solid white;
    border-radius: 5px;
    margin: auto;
}   /* picture next to the page greeting */

h1 {
    color: white;
    font-size: 18px;
    text-align: left;
    text-shadow: 1px 1px 5px white;
} /* header of welcome text */

.article1 {
    grid-area: article1;
    border: 3px solid white;
    border-radius: 5px;
    box-shadow: initial white;
    background-color: rgba(200, 255, 255, 0.1);
    color: hotpink;
    padding: 3px;
width: 420px;

    overflow:hidden;
}   /* welcome text */

.aboutme{
    color: white;
    text-align: left;
    align-content: center;
    font-size: 15px;
    padding: 5px;
}   /* welcome text formatting */





.article2 {
    grid-area: article2;
    align-content: flex-start;
    
}   /* post area */

/* post management */
.postboard {
    text-align: center;
    align-content: center;
height: fit-content
   
}   /* box for posts */

.post {
    padding: 10px;
    margin: 15px;
   
    border-radius: 20px;
    row-gap: initial;
    align-content: center;
    background-color: rgba(255, 169, 217, 0.05)
}   /* individual posts */

.drawingtitle{
text-align: center;
}

.post{
   display: block;
    font-size: auto;
    border: 3px solid ;
    border-radius: 2px;
    text-align: left;
    color: white;
    padding: 10px;
    margin: 15px;
    row-gap: initial;
    align-content: center;
    } /* post text */

.post:hover {
    transition: background-color 0.5s;
}   /* post-on hover formatting */

.postimage {
    display: block;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    border: 2px solid none;
    border-radius: 10px;
    
    
} 






.footer {
    grid-area: footer;
}   /* footer */



.aside2 {
    grid-area: aside2;
}   /* right-side tall panel */










/* phone optimization*/


@media (max-width: 1080px) { 

body{
    background-image: url("phonebackground.png");
    background-size: auto;
       }


/* grid and its areas */
    .container {
    place-content: center;
    display: grid;
    width: 90vw;
    height: 750px;
    grid-template-columns: 25% 30% 35%;
    grid-template-rows: 70px 50px 190px 285px 90px 60px;
    grid-template-areas:
        "header header header"
        "navigation navigation navigation"
        "mainpicture article1 article1"
        "article2 article2 article2"
        "article2 article2 article2"
        "footer footer footer"
    }

.aboutme {
    font-size: 15px;
    }
    
.article1 {
    width: auto;
    padding: 2px;
    margin: 1px;
    }
    
.mainpicture {
    object-fit: cover;
    width: 97%;
    height: 97%;
    margin: 9;
    }

.post {
    align-content: normal;
    }
    
.maintext {
    font-size: 25px;

    }
    
.aside2 {
    height: 300px
    }
    
.aside2image {
    object-fit: contain;
    object-position: top;
    width: 100%;
    }
    
.time {
font-size: 15px;
    }
    
    .maintext{
  font-size: 15px;
    }
    
.postboard {
    height: 1000px; 
    align-content: flex-start;
    }

    .navigation{
    font-size: 12px;
    gap: 13px;}
   
   
    .postimage {
    margin-top: 20px;
}


h1 {
  font-size: 20px;}
   


  
    
    }
/* phone optimization */