@import url('style.css');

.img {
    border: 5px solid;
    border-image: url(border-image.png) 30 round;
    border-radius: 6px;
    width: 90%; /* Stretches to full container width */
    height: auto; /* Maintains aspect ratio */
    margin: 20px; /* Space around the image */
}
/* media log (idk how to do it yet */
.title{
    color:rgb(251, 222, 234);
    text-shadow: 2px 2px 4px rgb(65, 91, 116);
}

.main-content{
    color: rgb(57, 33, 45);
}
.block{
    border: 5px solid;
    background-color: rgb(225, 246, 255, 0.7);
    border-radius: 6px;
    border-image: url(border-image.png) 30 round;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;  
    
    width: 23vmax;
}


.block p{
    font-size: 20px;
}

.main-block{
    border: 5px solid;
    background-color: rgb(225, 246, 255, 0.7);
    border-radius: 6px;
    border-image: url(border-image.png) 30 round;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers content horizontally */
    justify-content: center; /* Centers content vertically */
    padding: 20px;
    margin: 20px;

    width: 100%;
    max-width: 800px;
}

.img-n-block{
    display: flex;
    flex-direction: column; /* Aligns image and block side by side */
    justify-content: flex-end; /* Pushes content to the right */
    align-items: flex-start; /* Aligns items to the top */
    align-items: left; /* Centers content vertically */
}

.img-n-block .img {
    margin-left: auto; /* Pushes image to the right */
}


/* Blog feed styles */

.blog-feed {
    max-height: 500px; /* Fixed height for scroll */
    overflow-y: auto; /* Vertical scroll */
    padding-right: 10px; /* Prevents content clipping */
    width: 100%;
}

.blog-post {
    border: 5px solid;
    background-color: rgba(254, 230, 242, 0.7);
    border-radius: 6px;
    border-image: url(border-image2.png) 30 round;
    padding: 15px;
    margin-bottom: 20px;
}

.post-date {
    color: #666;
    font-size: 0.9em;
    margin-bottom: 10px;
}

/* Custom scrollbar (optional) */
.blog-feed::-webkit-scrollbar {
    width: 8px;
}

.blog-feed::-webkit-scrollbar-thumb {
    background-color: rgba(226, 9, 78, 0.2);
    border-radius: 4px;
}