*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    background-color: var(--body-bg);
}

main, footer, header {
    display: flex;
    flex-direction: column;
    /*width: 80%;*/
    /*padding-left: var(--padding-left);
    padding-right: var(--padding-right);*/

}
main {
    flex: 1;
    min-height: 65vh;
}

p{
    padding: 8px 0;
}

footer {
    padding-left: var( --padding-left );
    padding-right: var( --padding-right );
    padding-top: 32px;
    padding-bottom: 2px;
    font-family: var(--second-font-family);
    text-align: center;
    margin-top: 32px;
    margin-bottom: 2px;
    border-top: 1px solid rgba(214, 214, 214, 0.777);
}

header {
    box-shadow: var(--shadow-light);
    margin-bottom: 32px;
    width: 100%;
    background-color: var(--header-bg);

}

header h1 {
    padding-left: var( --padding-left );
    padding-right: var( --padding-right );
}

/*.container, header, main, footer{ margin: 0 auto; }*/

.container{
    display: grid;
    grid-template-columns: auto auto;
    gap: 28px;;
    padding-left: var( --padding-left );
    padding-right: var( --padding-right );
    
 }

img {
    /*width: 40%;*/
    margin: 0 auto;
    padding: 8px;
    display: block;
}

h1, h2, h3, h4 {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-weight: normal;
    padding-top: var(--padding-titles-1);
    padding-bottom: var(--padding-titles-3);     
}

h1 {
    font-size: var(--main-title-size);
}

h2 {
    font-size: var( --second-title-size );
}

h3 {
    font-size: var( --third-title-size );
}

nav {
    display:block;
    font-weight:bolder;
    font-family: Arial, Helvetica, sans-serif;
    font-size: large;
    padding: 8px 0;
    border-top: 1px solid rgba(214, 214, 214, 0.777) ;
}

nav li {
    padding-left: var( --padding-left );
    padding-right: var( --padding-right );
}


nav a {
    font-weight: bolder;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16pt;
    text-decoration: none;
    color: #970621 ;
    
}

nav a:hover{
    color:rgb(88, 66, 66);
}

ul, li{
    text-decoration: none;
    list-style: none;
}

ul {
    display: flex;
    flex-direction: row;
    align-items: center;
}

a {
    text-decoration: none;
    /*color: #0870d6;*/
    color:#970621;
    font-weight: bold;
}

a:hover{
    color:rgb(103, 23, 176);
}

.blog-title{ 
    padding: 12px var(--padding-right ) 42px var( --padding-left ); 
    color: var(--blog-title-color);
    font-size: var(--blog-title-size);
    font-family: var(--blog-title-font);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

.blog-title a{
    color: var(--blog-title-color);
    font-size: var(--blog-title-size);
}

.post-content{
    padding-top: 16px;
    padding-bottom: 12px;
    padding-left: var( --padding-left );
    padding-right: var( --padding-right );
    font-family: var(--post-body-font);
    font-size: var(--post-body-size);
    color: var(--post-body-color);
}


.post-title {
    border-left: 32px solid var(--main-color-1);
    padding: 6px 0 6px 2px;
    margin: 8px 0;
    text-align: center;
    font-size: var(--post-title-size);
    font-family: var(--post-title-font);
    color: var(--post-title-color);
    width: 100%;
    font-weight: bold;
    
}


.post-title a:hover{
    color:rgb(103, 23, 176);
}

.post-footer{
    font-style: italic;
    color: var(--main-color-4);
    padding: 12px 0 0 0;
    font-family: Arial, Helvetica, sans-serif;
    
}

.blog-menu{
    /*display: flex;*/
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    
}

.pagination, .blog-archive{
    padding: 12px;
}


.blog-post {

    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: space-between;
    text-align: justify;
    box-shadow: var(--shadow-light);
    margin: 14px auto;
    background-color: var(--blog-post-bg);
    padding: 12px;
    border-radius: 8px;
    /*width: 460px;
    height: 460px;*/

}

.blog-post:hover {
    box-shadow: var(--shadow-medium);
}

.blog-archive article {

    padding: 10px 0;

}