/* universal elements i.e. font */

.body {
    display: grid;
    place-items: center;
    width: 100vw;
}

sectionTitle {
    margin-left: 8%;
    color: #FFF200;
    font-weight: bold;
    font-size: 200%;
    padding: 0;
}

.post {
    padding: 8%;
    margin-top: 3%;
}

.post p {
    color: #fcf579;
    text-align: justify;
}
/*
.post .titleDate {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
    */

.post .titleDate {
    display: grid;
}

.post .postTitle {
    font-size: 175%;
    font-weight: bold;
}

.post .date {
    font-size: 110%;
}

.post .postSubtitle {
    font-size: 110%;
}

.post .description {
    margin-top: 7%;
    font-size: 100%;
}


/* projects section */
.homepage-projects {
    width: 85%;
    padding: 3%;
}


/* blog posts section */
.homepage-blogPosts {
    width: 85%;
}

.homepage-blogPosts .post {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.homepage-blogPosts .post a {
    padding: 20px;
}

.homepage-blogPosts .post .titleDate {
    display: block;
}

.homepage-blogPosts .post button {
    align-items: center;
    display: flex;
    white-space: nowrap;
    flex-shrink: 0;
}

@media screen and (min-width: 450px) {
    .body {
        padding-top: 125px;
    }
}

@media screen and (min-width: 1200px) {
    .body {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .post .postTitle {
        font-size: 270%;
    }

    .post .date, .post .postSubtitle {
        font-size: 200%;
    }

    .post .description {
        font-size: 175%;
    }

    .homepage-projects {
        padding: 5%;
        margin: 0;
        width: 55%;
    }

    .homepage-blogPosts {
        margin: 0;
        padding:5%;
        width: 25%;
    }

    .post .titleDate {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
}

/*
@media only screen and (max-width: 1040px) {
    .body {
        padding-top: 10%;
    }

    .homepage-blogPosts {
        padding-top: 5%;
    }
}


@media only screen and (max-width: 550px) {
    .post .titleDate {
        display: grid;
        justify-content: left;
    }


    /* projects section 
    .homepage-projects {
        width: 80%;
        padding: 5% 0%;
        margin: 0% 5%;
    }

    .homepage-projects .post, .homepage-blogPosts .post {
        margin-top: 5%;
    }

    .homepage-projects .description, .homepage-blogPosts .description {
        margin-top: 5%;
    }


    /* blog posts section 
    .homepage-blogPosts {
        padding: 5% 0;
        width: 80%;
    }
}


@media only screen and (min-width: 1040px) {
    .body {
        display: flex;
        width: 100vw;
        align-items: flex-start;
    }  

    /* projects section 
    .homepage-projects {
        width: 65%;
        padding: 5% 0%;
        margin: 0% 5%;
    }

    .homepage-projects .post, .homepage-blogPosts .post {
        margin-top: 5%;
    }

    .homepage-projects .description, .homepage-blogPosts .description {
        margin-top: 5%;
    }


    /* blog posts section 
    .homepage-blogPosts {
        padding: 5% 0;
        width: 20%;
    }
}

*/