/* blog style */

body {
    background-image: url("brown patern.jpg"); 
   
    background-position: auto;
    background-repeat: repeat;
    text-align: center;
    font-family: 'Italiana', cursive;
    color: #FFFFFF;
    
}

#main-buttons-flex {
    display: flex;
    justify-content: center; /* centers the block horizontally */
    align-items: flex-start; /* aligns items at the top */
    gap: 0px; /* space between buttons and block */
}

#block-buttons {

width: 136px;
height: 855px;
flex-shrink: 0;
border-radius: 10px;
border: 1px solid #9C967C;
background: #f4f0d300;

}

#buttons button{

width: 130px;
height: 50px;
flex-shrink: 0;
border-radius: 10px;
background: #414833;
margin-top: 10px;

}

#main-block {
width: 779px;
margin: 0;
height: 855px;
flex-shrink: 0;
border-radius: 10px;
border: 1px solid #9C967C;
background: #f4f0d300;

    
}

#log-blog-block{

width: 637px;
height: 784px;
flex-shrink: 0;
border-radius: 10px;
border: 1px solid #4B2B16;
background: url("introduction-blog.png");
margin-top: 35px;
margin-left: 70px;
}



#logs-block {

width: 491px;
height: 257px;
flex-shrink: 0;
border-radius: 10px;
background: #656D4A;
margin-left: 70px;
margin-top: 20px;

}

#logs-text-snoopy-flex{
    display: flex;
    flex-direction: column;
    align-items: center;      /* centers the welcome text horizontally */
    position: relative;
}


#snoopy{

 position: absolute;
    right: 498px;
    top: 223px;
    max-width: 150px;
    margin-bottom: 95px;

}
#snoopy img,
#Snoopy-outono {
    width: 200%;       /* fills the #snoopy container width */
    max-width: 240px;  /* actual max width on the page */
    height: auto;      /* preserve aspect ratio */
    display: block;
}

#logs-text{
    

text-align: center;
text-size-adjust: 125%;
flex-shrink: 0;
border-radius: 10px;
padding: 20px;
}

#blog{

width: 491px;
height: 470px;
flex-shrink: 0;
border-radius: 10px;
background: #656D4A;
margin-left: 70px;
margin-top: 10px;
}

#logs-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
     max-height: 180px;      /* adjust so it fits inside #logs-block */
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;     /* space for scrollbar so text doesn't hide */
    box-sizing: border-box;
}
.log-entry {
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 6px;
    color: #fff;
    margin: 6px 0;
}
.log-entry:hover {
    background: rgba(255,255,255,0.06);
}
.log-entry.active {
    background: rgba(255,255,255,0.12);
}
/* ensure blog content text is readable */
#blog-content {
    width: 471px;
    height: 450px;
    margin-left: 10px;
    color: #fff;
    padding: 12px;
    text-align: justify;
    max-height: 450px;      /* adjust to desired visible height */
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    box-sizing: border-box;
}