body{
    background-image:var(--background);
    background-size:cover;
    background-attachment: fixed;
    background-repeat:repeat;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color:var(--textcolor);
}

.container {
display: grid;
width:80%;
grid-template-columns: auto auto auto;
grid-template-rows: auto;
grid-template-areas: 
    "header header header "
    "nav nav  themeswitcher"
    "about about about"
    "comic comic comic"
    "comments comments comments "
    "footer footer footer ";
}

@media screen and (max-width: 1000px) {
.container{
grid-template-columns: 100%;
grid-template-rows: auto;
grid-template-areas: 
    "header"
    "nav"
    "themeswitcher"
    "about"
    "comic"
    "comments"
    "footer";
}
}
.container > div{
margin:3px;
padding:8px;
}


.about{
grid-area:about;

}

.comments{
grid-area:comments;
}

.footer{
grid-area:footer;
}

.themeswitcher{
grid-area:themeswitcher;
}

.nav{
grid-area:nav;
}

.comic{
grid-area:comic;
}

.comic img{
margin-bottom:0px;
width:100%;
max-width:800px;

}


.about{
background-color: var(--boxcolor);
color:var(--textcolor);
border:1px solid black;
box-shadow:2px 2px 2px 1px #00000046;

}

.about img{
max-height:90px;
}