.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

body {
  display: block;
  background-color: var(--md-sys-color-surface);
}

footer {
  padding: 0, 16px;
}

footer p {
  padding-inline-start: 16px;
  padding-inline-end: 16px;
  text-align: center;
}

header {
  color: var(--md-sys-color-on-surface);/**/
  background-color: var(--md-sys-color-surface-container);
  text-align: center;
  font-size: 24px;
  position: fixed;
  top: 0;
  width: 100%;
  height: 64px;
  z-index: 1000;
  box-sizing: border-box;
  
}

header p {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin: 0;
  padding: 16px; /* Add padding to the text element */
  width: 100%;
  box-sizing: border-box; /* Ensure padding is included in width calculation */
}

/* --- Two Helper Functions --- */
.row {
  display: flex;
  flex-direction: row;
}

.column {
  display: flex;
  flex-direction: column;
}

.grid {
  display: flex;
  flex-direction: column;
}

.horizontal-flow {
  display: flex;
  flex-wrap: wrap;
}

.vertical-center {
  align-items: center;
}

.px64 {
  gap: 64px;
}

.px32 {
  gap: 32px;
}

.px16 {
  gap: 16px;
}

.px8 {
  gap: 8px;
}