#contents {
    grid-template-columns: 1fr 1fr 2fr 200px;
    grid-template-rows: 1fr 1fr;
    height: 500px;
    gap: 15px;
    grid-template-areas:
        "welcome welcome news right"
        "blogpost events news right";
    padding: 20px;
} 

#contents h1 {
    font-family: "BitRegularTall";
    padding: 3px 10px 1px 10px;
    font-size: 15pt;
    color: black;
    background-color: var(--lightgrey);
    opacity: 1;
    background-image: radial-gradient(var(--darkergrey) 1px, var(--lightgrey) 1px);
    background-size: 5px 5px;
    border-bottom: 2px solid var(--darkergrey);
    text-shadow: var(--offwhite) 1px 1px, -1px 0px 1px #000000ad;
    box-shadow: inset -1px -1px #88888800, inset 2px 2px #f8f8f8;
}

#contents > * {
    border: 2px solid black;
    background-color: var(--lightgrey);
    box-shadow: inset 2px 2px #f8f8f8;
}

#contents p {
    padding: 10px 15px;
    border-top: 2px solid var(--lightestgrey);
}

#welcome {
    grid-area: welcome;
    background-color: var(--offwhite);
}

#news {
    grid-area: news;
    overflow: hidden;
}

#news h2 {
    display: inline;
    font-size: 15pt;
    font-family: "BitRegularTall";
}

#news p {
    display: inline;
}

#news ul{
    margin: 0;
    padding: 10px;
    list-style-type: none;
    overflow-y: scroll;
    background-color: var(--offwhite);
    scrollbar-color: var(--darkergrey) var(--lightgrey);
    height: 430px;
}

#news li {
    margin-bottom: 10px;
    padding-left: 5px;
    font-size: 15pt;
    padding-bottom: 7px;
    border-bottom: 2px dotted;
    border-bottom-color: var(--themecolor);
    
}

#news li img{
    vertical-align: bottom;
    height: 25px;
}

#blogpost {
    grid-area: blogpost;
    background-color: var(--offwhite);
}

#events {
    grid-area: events;
    background-color: var(--offwhite);
}

#right {
    grid-area: right;
}