@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@200;300&display=swap');
@import url('https://fonts.cdnfonts.com/css/agencyfb-2');
:root {--var-col: 1fr;}

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

html, body {
  background: linear-gradient(#101925, #1f3949);
  background-size: cover;
  overflow: hidden;
}
body {
  font-family: 'Oxanium', sans-serif;
  font-size: 1rem;
  color: rgba(255,255,255,0.5);
  text-shadow: -1px 1px 0 rgba(0,0,0,0.5);
  padding: 0;
  margin: 0;
}

app-container {
	display: grid;
	grid-template-rows: min-content 1fr 1fr min-content;
	grid-template-columns: 1fr;
	grid-gap: 1rem;
	height: 100vh;
	overflow: hidden;
}

/* ALL PANELS (inluding HEADER/FOOTER) */
app-panel {
	display: grid;
  grid-auto-rows: auto 1fr auto;
  border-radius: .3rem;
	background-color: rgba(0, 0, 0, 0.2);
	padding: 1rem;
	overflow: hidden;
}

/* HEADER/FOOTER */
app-panel:first-of-type,
app-panel:last-of-type {
  grid-column: 1 / -1;
  grid-auto-flow: column;
  grid-auto-columns: 1fr 1fr auto;
  /* background-color: rgba(255,255,255,0.03); */
}

app-panel:first-of-type list-item list-cell:first-of-type {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-auto-flow: column;
  align-items: center;
  justify-items: start;
  padding: 0;
}

app-panel:first-of-type list-item list-cell:first-of-type img {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  margin: 0;
  padding: 0;
}

app-panel:first-of-type list-item list-cell:first-of-type span {
  font-family: 'agency_fb', sans-serif;
  font-size: 1.5rem;
  letter-spacing: .1rem;
  font-weight: bold;
  color: #DDDDDD;
}

app-panel:not(:first-of-type):not(:last-of-type) {overflow: auto;}

app-panel:last-of-type {justify-items: end;}

app-panel:first-of-type list-cell,
app-panel:last-of-type list-cell {padding: 1rem;}

@media (prefers-color-scheme: dark)
.logoLetters {fill: #FFF;}
.logoLetters {fill: #FFF;}

@media (prefers-color-scheme: dark)
.logoSubLetters {fill: #FFF;}
.logoSubLetters {fill: #666;}