.content-grid {
    grid-area: 3 / 1 / 4 / 4; 
    max-width: MAX(50em, 50%);
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr auto;
    grid-column-gap: 0em;
    grid-row-gap: 0em;
    margin: auto;
}
.diary-entry {
    grid-area: 1 / 1 / 2 / 2; 
    margin-top: 1em;
    margin-bottom: 1em;
    word-wrap: break-word;
}
.diary-title {
        background-color: #585c88;
    border-top-left-radius: .3em;
    border-top-right-radius: .3em;
    color: #e6e8ef;
    padding: 1em;
    padding-top: 1em;
    padding-bottom: 1em;
    font-size: 1em;
    text-align: center;
    font-weight: bold;
    text-shadow:
            -1px -1px 1px #080410,
            0   -1px 1px #080410,
            2px -1px 1px #080410,
            2px  0   1px #080410,
            2px  2px 1px #080410,
            0    2px 1px #080410,
            -1px  2px 1px #080410,
            -1px  0   1px #080410;
}
.date-line {
    padding: 1em;
    background-color: #172347;
    color: #aaa39d;
    text-align: center;
}
.diary-content {
    background-color: #c0aac0;
    color: #080410;
    text-indent: 2em;
    padding: 1em;
}
.diary-content img {
    display: block;
    margin-top: 1em;
    margin-bottom: 0em;
    margin-left: 0em;
    max-width: 31.25em;
}
.diary-content h2, h3, h4 {
    margin-top: 1em;
    margin-bottom: 0em;
    text-indent: 0em;
} 
.diary-tags {
        background-color: #585c88;
    padding: 1em;
    font-size: 1em;
}
.diary-tag {
    background-color: #b9b4af;
    border-radius: .3em;
    padding: .3em;
    color: #1c2628;
    font-size: 1em;
    font-weight: bold;
    display: inline-block;
}
.share-links {
    background-color: #1c2628;
    color: #aaa39d;
    padding-top: 1em;
    padding-bottom: 1em;
    text-align: center;
}

.sidebar {
    grid-area: 1 / 2 / 2 / 3;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: repeat(4, auto);
    grid-column-gap: 0em;
    grid-row-gap: 0em; 
    align-content: start;
    padding-left: 0em;
    margin-top: 1em;
}
.sidebar a:link {
    color: #213021;
}
.sidebar a:hover {
    color: #486438;
}
.sidebar a:visited {
    color: #213021;
}
.sidebar a:active {
    color: #945634;
}

    .diary-box {
        background-color: #886488; 
        text-align: center;
        border-radius: 1em;
        margin: 1em;
        padding: .3em;
        margin-top: 0em;
        padding-bottom: 1em;
    }
    .diary-box a {
        
    }
    .about-box {
        grid-area: 1 / 1 / 2 / 2;
    }
    .twitter-box {
        grid-area: 2 / 1 / 3 / 2;
    }
    .latest {
        grid-area: 3 / 1 / 4 / 2;
    }
    .latest-text {
        text-align: left;
        padding: 0em;
        background-color: #886488;
    }
    .wordcloud {
        grid-area: 4 / 1 / 5 / 2;
    }
    .disclosure {
        grid-area: 5 / 1 / 6 / 2;
    }

.recommend {
    grid-area: 4 / 2 / 5 / 3;
    background-color: #080410;
    color: #F9B3D7;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto;
    grid-column-gap: 0em;
    grid-row-gap: 0em; 
    padding: .3em;
} 

.more { 
    grid-area:   1 / 1 / 2 / 4; 
    background-color: #486438;
    border-radius: .3em;
    padding: .3em;
    text-align: center;
    color: #080410;
}

.rec-box { grid-area: 2 / 1 / 3 / 3; }

.snip { 
    width: 9.375em; 
    float: left; 
    margin: 1.875em;
    background-color: #95939f;
    border-radius: .3em;
    padding: .3em;
    text-align: center;
    font-size: 1em;
}
.snip a {
    color: #080410;
}
.snip a:hover {
    color: #404664;
}
.snip a:visited {
    color: #080410;
}
.snip a:active {
    color: #404664;
}