/* RESET CSS CODE */
* {    
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    border: 0;
    box-sizing: border-box;   
}

html {
    font-size: 16px;
}

/*p {
    padding: 5px 0;
}*/

/**********************/
/*** STICKY BOTTOM ****/
.sticky-bottom {
    position: sticky;
    bottom: 80px;
}

.go-top {
    height: 30px;
    z-index: 5;
    text-align: right;
    transform: translateX(280px);
}

.go-top > a {
    text-decoration: none;    
}

/************************/

/***************/
/* LIST-STYLES */
.list-circle {
    list-style:circle;
}
.list-square {
    list-style:square;
}
.list-disc {
    list-style:disc;
}

.list {
    margin: 5px 0;    
}
/********************/

/* PAGE ID */
#top_message {
    text-align: center;
    background-color: grey;
    color: white;
    padding: 10px 0;
}

#logo_section {
    text-align: center;
    height: 75px;
    line-height: 75px;
}

#breadcrumb {
    /*line-height: 50px;*/
    font-size: 1.1em;
    font-weight:600;
}
#author {
    height:60px;
    /*line-height: 60px;*/
    padding: 0px 0; 
    /*display: flex;*/
    align-items:center;
    gap:10px;   
}
#author-img {    
    height: 50px;
    width: 50px;    
    display: inline-block;
    text-align: center;    
}


/* BLOG IDs */
#blog-text ul li {  
    margin-top: 10px;  
    line-height: 1.3em;
}


#blog_left {    
    float: left;
    /*width: 70%;*/
    padding-right: 30px;
    /*display: inline-block;*/
}

#blog_post_date {
    right: 0;
    text-align: right;
    font-size: 0.7em;
}


.span-bold {
    font-weight: bold;
}

.text-white {
    color: white;
}

.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.text-left {
    text-align: left;
}
.text-bold {
    font-weight: bold;
}

.anchor-top-offset {
    scroll-margin-top: 225px;
}



/*
nav {    
    padding: 20px 0;
    text-align: center;
}

nav ul {
    display:inline-block;
    list-style: none;
    text-align: center;
}
nav ul > li {
    display: inline;
    padding: 5px 20px;
}*/

section {
    padding: 10px 0 5px 0;

}


    
.sticky-menu {
    z-index: 999;
    position:sticky;
    top: 0;
    background-color: white;    
}

.sticky-tableOfContents {
    z-index: 998;
    position:sticky;
    top: 250px; /*60px;    */
    background-color: white;
}



/* MENU STYLES */
.menu-item {
    display: block;
    padding: 5px 10px;
    margin: 0 5px;
    background-color: blue;
    color: white;
    border-radius: 5px;
    min-width: 60px;
    text-align: center;
}
.menu-item:hover > .sub-menu {
    background-color: lightblue;
}
.sub-menu {
    z-index: 5;
    position: relative;
    width: 100px;
    
}

/*******************************/
/* RESPONSIVE GRID LAYOUT */
/*******************************/
.grid-container {
    display: grid;
    grid-template-areas: 
        'left left left left right right';        
    gap: 10px;
    padding: 10px;
    justify-content:space-between;
}

.grid-container > div {
    padding: 10px;
}
.grid-container > section {
    padding: 10px;
}

.item1 {
    grid-area: left;    
}

.item2 {
    grid-area: right;    
}

/************************/


.flex-center { /* menu */
    display: flex;
    justify-content: center;
}
.blog-content {
    margin: 0 auto;
    padding: 0 5px;
}

.circular_image {    
    width: 50px; 
    height: 50px;
    border-radius: 50%;    
    overflow:hidden;
    line-height: 50px;    
}

.author-name {
    font-weight: 100;
    
}
#postedby {
    width: 200px;
    /*line-height: 50px;*/
    display: block; /*inline-block;*/
    font-weight: bold;
    font-size: 0.7em;
}

#postedby a {
    text-decoration: none;
    color: black;
}

#postedby a:link a:visited {
    text-decoration: none;
}



/**** TABLE OF CONTENTS ****/
#tableOfContents {
    border-radius: 20px;
    width: 100%;
    padding: 20px;
    background-color:blanchedalmond;
    margin: 0 auto;
}

#tableOfContents hr {
    display: block;
    height: 3px;
    padding: 0;
    border: 0;
    border-top: 3px solid blueviolet;
    margin: 1em 0;    
}

#tableOfContents  ul {
    list-style-type: none;    
    padding: 3px 0;
}
#tableOfContents ul li {
    padding: 3px 0;  
}
#tableOfContents a{
    text-decoration: none;
    padding: 3px 0;
    font-weight: bold;
    color: rgb(61, 59, 59);
}
#tableOfContents a:visited {
    color: rgb(61, 59, 59);
}
#tableOfContents a:hover {
    background-color: grey;
    color: white;
}

.toc-title {
    font-size: 1.3em;
    padding-bottom: 0; 
    font-weight: bold;
    
}



/******************************/

/***********************/
/**** TABLE STYLING ****/
.table-container {
    margin: 15px 0;
}

.table-style {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    border: 2px black solid;
    padding: 5px;
}

table caption {
    font-weight: bold;
    padding: 5px 0;
}

table th {
    text-decoration:underline;
}

table tr {
    padding: 3px 0;
}

/*************************/



@media only screen and (max-width: 360px) {    
    
    #postedby {
        font-size: 0.8em;
    }

    .blog-content {
        width: 360px;
    }

    .centered-div {
        width: 100%;
    }

    .item1 {grid-area: 2 / span 6;}
    .item2 {grid-area: 1 / span 6;}
    .go-top {transform: translateX(20px);}


    
}

@media only screen and (min-width: 360px) {

    .blog-content {
        width: 360px;
    }

    .centered-div {
        width: 100%;
    }

    .item1 {grid-area: 2 / span 6;}
    .item2 {grid-area: 1 / span 6;}
    .go-top {transform: translateX(0px);}
    
}

@media only screen and (min-width: 600px) {

    .blog-content {
        width: 600px;
    }

    .item1 {grid-area: auto / span 4;}
    .item2 {grid-area: auto / span 2;}
    .go-top {transform: translateX(150px);}
}

@media only screen and (min-width: 768px) {
    
    #postedby {
        font-size: 0.8em;
    }

    #blog_post_date {
        font-size: 0.8em;
    }

    .blog-content {
        width: 768px;
    }

    .item1 {grid-area: auto / span 4;}
    .item2 {grid-area: auto / span 2;}
}

@media only screen and (min-width: 992px) {
    
    #postedby {
        font-size: 0.9em;
    }

    #blog_post_date {
        font-size: 0.9em;
    }

    .blog-content {
        width: 992px;
    }

    .item1 {grid-area: auto / span 4;}
    .item2 {grid-area: auto / span 2;}
}

@media only screen and (min-width: 1200px) {
   
    .blog-content {
        width: 1200px;
    }

    .item1 {grid-area: auto / span 4;}
    .item2 {grid-area: auto / span 2;}
}