html{
    height: 100%;
}
body{
    min-height: 100%;
    width: 80%;
    margin: 0 10% 0 10%;

}

main{
    min-height: 100dvh;

    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{
    display: flex;
    grid-area: footer;
    align-items: end;
}

nav{
    grid-area: menu;
}

.view{
    overflow: auto;
    min-height: 80%;
}

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%;
}