body{
    width: 80%;
    margin: 2rem auto;
}

main{
    height: 100vh;
    display: grid;
    border-left: 2px aliceblue solid;
}

@media screen and (max-width: 40em){
    main{
        grid-template-rows: 1fr 2fr 6fr 1fr;
        grid-template-columns: 1fr;
        grid-template-areas: 
        "status"
        "menu"
        "view"
        "footer";
    }
    ul li{
        display: inline;
    }
}

@media screen and (min-width: 40em){
    main{
        grid-template-rows: 1fr 6fr 1fr;
        grid-template-columns: 1fr 4fr;
        grid-template-areas: 
        "status status"
        "menu view"
        "footer footer";
    }
}

header{
    grid-area: status;
    margin: 1rem auto;
}
footer{
    grid-area: footer;
}

nav{
    grid-area: menu;
}

.view{
    overflow: auto;
    height: 80vh;
}

b-preview{
    padding-top: 1rem;
    padding-bottom: 1rem;
    grid-area: view;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
b-add form{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

b-list{
    width: 80%;
    padding-top: 10%;
}
li{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 30%;
}