@import 'templates/meta-style.css';

header {
  justify-content: space-around; /* Overrides nav-bar default */
}
.header-icon {
  height: 90%;
  aspect-ratio: 1 / 1;
  background-color: var(--root-text-color);
}

#home-nav {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 500px 200px;
  place-items: center;
  /* Todo: row height relative to column width */
}
/* This menu's sizes should be responsive */
.home-nav-primary {
  display: flex; /* This has to be a flexbox or grid for proper centering. That seems weird but all I can do is adapt */
  flex-flow: column nowrap;
  align-items: center;
}
.home-nav-primary-link {
  /* Todo: image [placeholder] half the width of the grid area, link text overlaid */
}
.home-nav-secondary {
  /* Placeholder */
}