/* The blogs Page*/
 *{
    font-family: Georgia, 'Times New Roman', Times, serif !important;
    background-color: #033825;
 }
    .BloggyPage {
        color: lemonchiffon;
        justify-content: left;
        font-style: italic;
    }
    .subtitle{
        color: gold;
        font-style: italic;
      }
    .expandable_title_bar{
        background-color: #084202;
      }
    #test {
        font-size: 25px;
        color: lemonchiffon;
        position: relative;
        font-style: italic;
    }
    header{
        color: gold;
        justify-content: left;
    }
    .Intro {
        color: lemonchiffon;
        font-size: 20px;
    }
    .index span{ 
        color: grey;
        height: 10px; 
    }
    #test span {
        position: relative;
        display: inline-flex;
    }
    .centered-paragraph {
        max-width: 1100px; /* what causes the text top be centered*/
        margin: 0 auto; /* Center the text container within its parent */
        padding: 0 10px; /* what causes the extra negative space */
    }
    
    .button span a {
    justify-content: left;
    background-color: green;
    display: inline-block;
    border-radius: 10px;
    padding: 20px;
    text-decoration: none;
    color: orange;
    font-style: italic;
    }
    
    .button span a:hover {
    background-color: darkgreen;
    color: gold;
    }
    
    .list-container {
        display: flex;
        flex-wrap: nowrap;
        gap: 20px; 
        overflow-x: auto;
    }
    
    li {
        width: 200px;
        height: 200px;
        padding: 20px;
        box-shadow: 0 0 30px rgba(1, 1, 1, 0.2);
        text-align: center;
        cursor: pointer;
        list-style-type: none; 
    }
    
    li#testing00:hover {
        box-shadow: 0 0 20px darkorange;
        transform: scale(1.1);
    }
    
    li#testing01:hover {
        box-shadow: 0 0 20px limegreen;
        transform: scale(1.1);
    }
    
    li#testing02:hover {
        box-shadow: 0 0 20px darkorange;
        transform: scale(1.1);
    }
    
    li#testing03:hover {
        box-shadow: 0 0 20px limegreen;
        transform: scale(1.1);
    }
    
    li#testing04:hover {
        box-shadow: 0 0 20px darkorange;
        transform: scale(1.1);
    }
    
    li#testing05:hover {
        box-shadow: 0 0 20px limegreen;
        transform: scale(1.1);
    }
    
    li#testing06:hover {
        box-shadow: 0 0 20px darkorange;
        transform: scale(1.1);
    }
    
    li#testing07:hover {
        box-shadow: 0 0 20px limegreen;
        transform: scale(1.1);
    }
    
    li#testing08:hover {
        box-shadow: 0 0 20px darkorange;
        transform: scale(1.1);
    }
    
    li#testing09:hover {
        box-shadow: 0 0 20px limegreen;
        transform: scale(1.1);
    }
    li#testing10:hover {
        box-shadow: 0 0 20px darkorange;
        transform: scale(1.1);
    }
    li#testing11:hover {
        box-shadow: 0 0 20px limegreen;
        transform: scale(1.1);
    }
   /* Media queries for responsiveness */
@media only screen and (max-width: 479px) {
    header {
        display: contents;
        flex-wrap: nowrap;
        width: 100%;
    }
}
@media (max-width: 768px) {
    nav {
        display: flex;
        flex-direction: column; /* Vertical format */
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    nav.open {
        display: flex;
        flex-direction: column; /* Ensure vertical format when open */
    }
    table {
        width: 100%;
    }
    td {
        display: block; /* Ensure table cells are displayed as block elements */
        text-align: center;
        padding: 10px 0;
    }
}