main{
    display: flex;
    flex-direction: column;
    gap: .5em;
    padding: .25em 1em;
    margin: auto;
    max-width: min(95%, 50em);
    min-width: min-content;
    border: 3px solid;
}


.blog-intro{
    text-align: center;
    font-size: var(--xlarge-font-size);
    margin: auto;
}

.subtitle{
    font-style: italic;
    margin: 0px;
}

.foreward{
    padding: .25em 0;
    max-width: 80%;
    border: .15em solid;
    border-top: none;
    border-left: none;
    border-right: none;
    margin: 1em auto;
    padding: 0 2em .5em;
    text-align: justify;
}

.post {
    display: grid;
    grid-template-columns: 3fr 1fr;
    font-size: var(--large-font-size);
    padding: 0 .5em;
    margin: .5em 0;
    border: 2px solid;
    border-bottom: none;
    border-top: none;
}

.title{
    grid-row: 1;
}

.subtitle{
    grid-row: 2;
}

.date{
    grid-row: 1;
}

.category{
    grid-row: 2;
    font-style: italic;
}

.post-info{
    display: flex;
}

.post-date{
    text-align: right;
    margin-left: auto;
    font-size: var(--small-font-size);
}

.post-header{
    display: flex;
    flex-direction: column;
    font-size: var(--xlarge-font-size);
}

.post-body{
    display: flex;
    flex-direction: column;
    font-size: var(--small-font-size);
}

.post-subtitle{
    font-style: italic;
}

.post-body > p {
    text-indent: 2em;
    margin: 0 0 .25em;
    line-height: 1.5;
}

@media screen and (max-aspect-ratio: 1){
    .blog-intro{
        font-size: var(--large-font-size);
    }

    .post-header{
        font-size: var(--large-font-size);
    }

    .post{
        max-width: 100vw;
        font-size: 1em;
    }

    .post-body{
        font-size: 1em;
    }
}