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

/*main*/
.main { 
    grid-area: main;
    background: 0;
    color: var(--textcolour);
    font-size: var(--fontsize);
}

.mainlayout {
    display: grid;
    width: 100%;
    grid-template:
    "welcome welcome"
    "buttons update"
    "spotlight update"
    "quirrel credits"
    / 2fr 1fr;
    
}

.welcome {
    grid-area: welcome;
    background: var(--mainbg);
    margin: var(--margin);
    padding: var(--padding);
    border: var(--border);
    height: 30vh;
}

.buttons {
    grid-area: buttons;
    background: var(--mainbg);
    margin: var(--margin);
    padding: var(--padding);
    border: var(--border);
    height: 100px;
}

.update {
    grid-area: update;
    background: var(--mainbg);
    margin: var(--margin);
    padding: var(--padding);
    border: var(--border);
    align-content: center;
    height: 70vh;
}

.update blockquote {
    background: var(--accent);
    width:95%;
    height: 87%;
    overflow: auto;
    padding: 5px;
    margin: 0;
    font-size: smaller;
}

.spotlight {
    grid-area: spotlight;
    background: var(--mainbg);
    margin: var(--margin);
    padding: var(--padding);
    border: var(--border);
    height: 295px;
}

.credits {
    grid-area: credits;
    margin: var(--margin);
    background: rgba(50, 104, 171, 0.46);
    border: var(--border);
    padding: var(--padding);
    overflow: auto;
    font-size: smaller;
}

.credits ul {
    list-style-type: circle;
    margin-left: -20px;
    
}

.quirrel {
    grid-area: quirrel;
    background: var(--mainbg);
    margin: var(--margin);
    padding: var(--padding);
    border: var(--border);
    height: 50vh;
    display: flex;
    align-content: center;
    justify-content: center;
}

/*sidebar*/
.sidebar { 
    grid-area: sidebar;
    padding: 0;
    background: 0;
    color: var(--textcolour);
    font-size: var(--fontsize);
}

.guestbook {
    padding: var(--padding);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    height:150px;
}

@media (max-width: 800px) {
  .layout {
    grid-template:
        "header"
        "nav"
        "main"
        "sidebar"
        "footer";
  }
    
    .mainlayout {
        grid-template:
            "welcome welcome"
            "buttons buttons"
            "spotlight spotlight"
            "update update"
            "quirrel credits";
    }
}