.layout {
    display: grid;
    max-width: 1000px;
    grid-template:
        "header"
        "nav"
        "main"
        "footer";
}

.mainlayout {
    display: grid;
    width: 100%;
    grid-template:
    "about about"
    "me me"
    "likes dislikes"
    "favs favs"
        / 1fr 1fr;
}

.about {
    grid-area: about;
    background: var(--mainbg);
    border: var(--border);
    padding: var(--padding);
    margin: var(--margin);
}

.me {
    grid-area: me;
    display: flex;
    position: relative;
}

.me .sidebarsection {
    width: 400px;
}

.meimg {
    position: absolute;
    top: 60px;
    left: 130px;
}

.likes {
    grid-area: likes;
    background: var(--mainbg);
    border: var(--border);
    margin: var(--margin);
}

.dislikes {
    grid-area: dislikes;
    background: var(--mainbg);
    border: var(--border);
    margin: var(--margin);
}

.favs {
    grid-area: favs;
    background: var(--mainbg);
    border: var(--border);
    margin: var(--margin);
}

.main {
    grid-area: main;
    width: 1000px;
    color: var(--textcolour);
    font-size: var(--fontsize);
    
}

.likes ul , .dislikes ul {
    list-style-type: circle;
    margin-left: 0;
}

b {
    color: var(--accent);
}