/*
Theme Name: obf-new
Author: kushinauwu
Description: basic revised obf homepage theme
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

*/

.latest-post-wrapper {
    background-color: rgb(27, 46, 37);
    width: 80%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0px 1px 7px 3px darkgrey;
    margin-bottom: 4vh;
}

.latest-post-content {
    padding: 10px;
}

.latest-post-content h1 {
    text-align: center;
    color: #88eef7;
}

.latest-post-content p {
    font-size: 20px;
    color: ghostwhite;
}

.latest-post-content .date {
    font-size: 18px;
}

.recent-posts {
    display: grid;
    grid-template-columns: 33% 33% 33%;
}

.recent-posts .post-display {
    margin: 20px;
    background-color: rgb(27, 46, 37);
    position: relative;

}

.recent-post-wrapper {
    margin: 1px;
}

.recent-post-wrapper hr {
    margin-left: 2%;
    margin-right: 2%;
    background-color: rgb(27, 46, 37);
}

.recent-post-content h1 {
    font-size: 36px;
    text-align: center;
    word-break: break-word;
    color: #88eef7;
}

.recent-post-content .date {
    text-align: center;
    font-size: 18px;
}

.recent-post-content p {
    color: whitesmoke;
    margin-left: 2%;
    margin-right: 2%;
}



.navigation-wrapper {
    text-align: center;
}

.posts-navigation {
    display: inline-block;
}

.nav-links {
    text-align: center;
    font-family: 'Montserrat', serif;
    font-size: 16px;

}

.nav-links a {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
}

.recent-post-photo {
    height: 200px;
    background: white;

    text-align: center;
    position: relative;
}

.recent-post-photo img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

/*Mobile display */
@media only screen and (max-width: 768px) {

    .recent-posts {
        display: grid;
        grid-template-columns: 50% 50%;
    }

    .recent-posts-wrapper {
        margin: 5% 0%;
        padding: 1% 3%;
        width: 90%;
        height: 300px;
    }

    .latest-post-actual {
        background-color: rgb(27, 46, 37);
        background-color: rgba(27, 46, 37, 0.2);
        color: white;
        font-weight: bold;
        border: 2px solid #f1f1f1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        width: 80%;
        padding: 0px;
        text-align: center;
    }
}

@media only screen and (max-width: 480px) {
    .latest-post-wrapper {
        width: 100%;
    }

    .latest-post-content p {
        font-size: 2.8vh;
    }

    .latest-post-content .date {
        font-size: 2.2vh;
    }


    .latest-post-actual {
        background-color: rgb(27, 46, 37);
        background-color: rgba(27, 46, 37, 0.2);
        color: white;
        font-weight: bold;
        border: 2px solid #f1f1f1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        width: 100%;
        padding: x;
        text-align: center;
    }

    .latest-post-actual h1 {
        font-size: 5vh;

    }

    .latest-post-actual p {

        font-size: 2.5vh;
        font-family: 'Lato', serif;
    }

    .latest-post-background {
        height: 100%;
        width: auto;

    }

    .latest-post-background img {
        filter: blur(3px) sepia(50%) brightness(50%);
        max-width: 100%;
        width: 100%;
        height: 100%;
        max-height: 100%;
        margin: 0 0;

    }

    .recent-posts-wrapper {
        height: auto;
    }

    .recent-posts {
        display: grid;
        grid-template-columns: 100%;
    }

    .recent-post-content h1 {
        font-size: 4.8vh;
    }

    .recent-post-content p {
        font-family: 'Lato', sans-serif;
        font-size: 2.8vh;
    }

    .recent-post-content .date {
        font-size: 2.2vh;
    }

    .recent-posts-background {
        height: 100%;
    }
}