<app-container>
  <app-panel>HEADER</app-panel>
	<app-panel>FILTER</app-panel>
	<app-panel>MAIN</app-panel>
	<app-panel>META</app-panel>
	<app-panel>FOOTER</app-panel>
</app-container>

@import url('https://fonts.googleapis.com/css2?family=Oxanium:[email protected];300&display=swap');
@import url('https://fonts.cdnfonts.com/css/agencyfb-2');

*:before, *:after, *, ::after, ::before {box-sizing: border-box;}

body {
	background-color: rgb(19, 20, 23);
	font-family: 'Oxanium', sans-serif;
  font-size: 1rem;
  color: rgba(255,255,255,0.7);
  text-shadow: -1px 1px 0 rgba(0,0,0,1.0);
	padding: 0;
  margin: 0;
}

app-container {
  display: grid;
	grid-template-columns: 1fr;
	
  grid-template-rows: auto 1fr auto; /* Push header/footer to top/bottom */
  gap: 1rem;
  padding: 1rem;
  height: 100vh; /* pushed header and footer to the top and bottom of page */
  overflow: hidden;
}

/* All PANELS */
 app-panel {
	background-color: rgba(255,255,255,0.04);
	overflow: hidden;
	padding: 1rem;
	border-radius: .3rem;
}

/* HEADER/FOOTER PANELS */
app-panel:first-of-type,
app-panel:last-of-type {grid-column: 3 / -3;}

/* FILTER */
app-panel:nth-of-type(2) {
	grid-column-end: -2;
	min-width: 15rem;
	max-width: 15rem;
}

/* MAIN */
app-panel:nth-of-type(3) {
	grid-column-end: -1;
	min-width: 1rem;
	resize: horizontal;
}

/* META */
app-panel:nth-of-type(4) {
	grid-column-end: 3;
	min-width: 15rem;
}