/* visualisation */

body { margin: 0px; }

/* set flexbox container */

.fc { display: flex;
    flex: 1;
    flex-flow: row wrap;
	flex-grow: 1;
	}
	
#nav { display: inline-flex;
   flex: 1;
   flex-flow: row wrap;
   } 
	
.button { display: inline-flex;
   flex: 1;
   flex-flow: row wrap;
   justify-content: center;
   border: 5px marinablue;
   padding: 10px;
   border-radius: 0px;
   background-color: lightgrey;
   min-height: 15px;
   }
   
header, footer, #nav, main { flex: 0 1 100vw; }

main { min-height: calc(100vh - 30vh); }

header, footer { box-sizing: border-box;
   width: 100vw;
   min-height: 80px;
   background-color: lightgrey;
   text-align: center;
   }

main { display: flex;
    flex-shrink 1;
	margin-left: 20px;
	padding: 20px;
	justify-content: center;
    flex-flow: row wrap;
	flex-grow: 1;
	background-color: none;
    }

.fc footer { font-family: sans-serif;
   font-size: 5;
   color: #000077;
   padding: 10px;
   vertical-align: middle;
   padding-top = 5rem;
   }