:root {
    --blog-box-color:rgba(215, 215, 215, 0.9);
    --blog-box-hover-color:rgba(180, 180, 180, 0.9);
    --blog-rebox-color:rgba(133, 133, 133, 0.9);
    --caption-text:rgba(0, 0, 0,0.8);
}

@media (prefers-color-scheme: dark){
    :root{
        --blog-box-color:rgba(32,32,32,0.9);
        --blog-box-hover-color:rgba(90, 90, 90, 0.9);
        --blog-rebox-color:rgba(100, 100, 100, 0.9);
        --caption-text:rgba(255, 255, 255,0.8);
    }
}
.blog{
    grid-area: d;
}
.blogbox{
    display:block;
    text-decoration: none;
    background-color: var(--blog-box-color);
    padding: 0.5em 1em;
    margin: 2em 10em;
    border-radius: 10px;
}

.linkblogbox{
    display:block;
    text-decoration: none;
    background-color: var(--blog-box-color);
    padding: 0.5em 1em;
    margin: 2em 10em;
    border-radius: 10px;
}

.linkblogbox h2{
    text-align:center;
    margin: 0; 
    padding: 0;
}
.linkblogbox p {
    margin: 0; 
    padding: 0;
}

.linkblogbox:hover{
    background-color: var(--blog-box-hover-color);
}
.topimg{
    width:100%;
    margin: 0 0;
    padding:0 0;
    border-radius: 10px;
}
.blogbox h2{
    text-align:center;
    margin: 0; 
    padding: 0;
}
.blogbox p {
    margin: 0; 
    padding: 0;
}

.img{
    width:400px;
    margin:0 auto;
}
.img img{
    width:400px;
    margin:0 0;
    padding:0 0;
    border-radius: 10px;
}

figcaption{
    text-align: center;
    font-size: smaller;
    color: var(--caption-text);
}

.referencebox{
    background-color: var(--blog-rebox-color);
    color:aliceblue;
    word-break: break-all;
    padding: 0.5em 1em;
    margin: 0 0;
}

#twitter{
    max-width: 450px;
    margin: 0 auto 0 auto;
    align-items: stretch;
}

@media (max-width:800px){
    .blogbox{
        margin: 2em 0;
    }
    .linkblogbox{
        margin: 2em 0;
    }
}

@media (max-width:450px){
    .img{
        width:100%;
    }
    .img img{
        width:100%;
    }
}