/* style_blog.css */

#blogbg {
    background-image: url('../assets/img/lair/bg3.png');
    background-repeat: repeat;
    background-size: 26vw;
}

#bloglayout{
    display: grid;
    grid-template-columns:1fr 62vw 1fr;
    grid-template-rows: 10vw 32vw 1fr;
    grid-template-areas: 
    ". . ."
    ". blog ."
    ". . .";
    height: 100%;
}

#blogblock{
    grid-area: blog;
    background-color: rgb(0, 0, 0);
    background-image: url('../assets/img/blog/frametextured3.png');
    background-repeat: repeat;
    background-size: 10vw;
    display: grid;
    grid-template-columns: 15vw 42vw;
    grid-template-rows:  6vw 20vw;
    grid-template-areas: 
    "header header"
    "id main";
    row-gap: 1.5vw;
    column-gap: 1vw;
    border: 2vw solid transparent;
}

#blogheader{
    grid-area: header;
    background-color: #3d0000;
    border-radius: 0.5vw;
}

#blogtitle{
    font-family: 'pixelary';
    font-size: 8vw;
    color: #fffff5;
    background-image:  url('../assets/img/blog/textured.png');
    background-size: 40vw;
    background-position: 0vw 20vw;
}

#blogid{
    grid-area: id;
    background-color: #3d0000;
    background-image:  url('../assets/img/blog/idpiccd.png'), url('../assets/img/blog/idbgd.png');
    background-size: 17vw, 16vw 20vw;
    background-repeat: no-repeat, repeat;
    background-position: 0vw -1vw, -4vw 0;

}

#blogmain{
    grid-area: main;
    background-color: #f63090;
    
    display: grid;
    grid-template-columns: 1fr 6vw;
    gap: 0.3vw;
}

#frameblog{
    position: absolute;
    width: 99vw;
    height: 49.5vw;
    top: 1.5vw;
    left: -1vw;
    pointer-events: none;

}

#blood{
    position: absolute;
    width: 13vw;
    left:66vw;
    top: 12vw;
}

#attention{
    position: absolute;
    width: 12vw;
    left:73vw;
    top: 35vw;
    transform:rotate(15deg)
}

#welcome{
    position: absolute;
    width: 12vw;
    left: 6vw;
    top: 6vw;
    transform:rotate(-15deg)
}

#shh{
    position: absolute;
    width: 12vw;
    left: 66vw;
    top: 2vw;
    transform:rotate(-5deg)
}

#blogmenu{
    display:flex;
    flex-direction: column;
    background-image: url('../assets/img/blog/menubg2d.png');
    background-size: 6vw 20vw;
    background-position: 0vw 0;
}

#blogposts{
    background-image:  url('../assets/img/blog/mainbgd.png');
    background-size: cover;
    overflow-x: auto;
    scrollbar-color: #f63090 #f630903f;
    scrollbar-width: thin;
    box-sizing: content-box;
    padding-right: 0.5vw;
}

.posttag{
    width: 5vw;
    z-index:5;
    margin: 0.6vw;
    filter: hue-rotate(20deg);
}

.posttag.active{
    transform: scale(1.08);
    filter: contrast(0.8);
}



h1{
    color: #f63090;
    margin: 2vw 1vw;
    font-size: 3.5vw;;
    font-family: 'merchantcopy';
    font-weight: 500;
    text-shadow: #fff5fc 1px 1px 1px;
}

.postcontent{
    color: white;
    margin: 1vw 1vw;
    background: rgba(255, 185, 254, 0.45);
    padding: 1vw; 
    font-size: 2vw;
    outline:#f63090 dotted 0.3vw;
    text-decoration: underline dashed 1px #ffd8eb7f;
    text-underline-offset: 4px;
    text-align: justify;
}

.postcontent:before{
    content: '\00a0\00a0\00a0\00a0\00a0'
}

.tabcontent {
    display: none;
}

#post1{
    display: block;
}