.container {
display: grid;
width:80%;
grid-template-columns: 30% 3fr 3fr 3fr;
grid-template-rows: auto;
grid-template-areas: 
    "header header header header"
    "nav nav nav themeswitcher"
    "name name name name"
    "icon stats stats stats"
    "bio bio bio bio"
    "likes dislikes relationships relationships"
    "footer footer footer footer";
}

@media screen and (max-width: 1000px) {
.container{
grid-template-columns: 20% auto auto;
grid-template-rows: auto;
grid-template-areas: 
    "header header header"
    "nav nav themeswitcher"
    "name name name" 
    "icon icon icon"
    "stats stats stats"
    "bio bio bio"
    "likes likes likes"
    "dislikes dislikes dislikes"
    "relationships relationships relationships"
    "footer footer footer";
}
}
.container > div{
margin:3px;
padding:8px;
}

.header{
grid-area:header;
    width:100%;
    height:140px;
    background-image:url("https://sunflowerplayroom.neocities.org/graphics/banner_sunflowerplayroom.png");
    background-size:auto 90%;  
    background-color: transparent;
    border:none;
    background-repeat: no-repeat;
    background-position: center;
}

.nav{
grid-area:nav;
}

.name{
grid-area:name;
background-color: var(--boxcolor);
text-align: center;
border:1px outset gray;
box-shadow:2px 2px 2px 1px #00000046;
font-family: 'pixelony',sans-serif;

}

.name h1{
margin:0px;
background-color: var(--navbg);
}




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

}

.stats{
grid-area:stats;
background-color: var(--boxcolor);
border:1px solid black;
box-shadow:2px 2px 2px 1px #00000046;
text-align: center;
height:fit-content;

}

.flex{
justify-content: start;
}

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

}

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

}

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

}

.relationships{
grid-area:relationships;
background-color: var(--boxcolor);
border:1px solid black;
box-shadow:2px 2px 2px 1px #00000046;
}

.footer{
border-top:0px;
}
table {
            background-color: var(--boxcolor);
            background-color: var(--navbg);
            width:100%;
            }

            tbody {
            margin: 3px 10px;
            }

            td, th {
            text-align: left;
            padding: 3px 10px;
                        }

            td:nth-child(odd) {
            font-weight: 600;
            text-align: left;
            text-transform: uppercase;
            width:40%
            }

            td:nth-child(even) {
            background-color: var(--boxcolor);
            color:var(--textcolor);

            }


li{
list-style-position: inside;
list-style-image:url("https://sunflowerplayroom.neocities.org/graphics/bullet_chatter.png");
}