/*======================================

  fabiansax.eu
  layout.css for wide-screen displays

  - define website layout

=======================================*/
.site {
  display: grid;
  font-family: "Overpass-Mono", monospace;
  grid-gap: 1rem;
  grid-template: 1fr 3rem/ 14rem 1fr;
  margin: 0 0 0 1%;
  min-height: 100vh;
  width: 99%;
}

.site-header {
  font-family: "SpaceGrotesk";
  font-size: 3rem;
  position: fixed;
  top: 0.25rem;
}

.site-nav {
  position: fixed;
  top: 4.25rem;
}

.site-content {
  grid-area: 1 / 2 / 2 / 4;
}

.textbased-content {
  display: grid;
  grid-gap: 1rem;
  grid-template: 5rem 1fr / 60% 1fr;
}

.textbased-content-container {
  grid-area: 2 / 1 / 3 / 2;
}

.mediabased-content {
  align-items: end;
  display: grid;
  grid-gap: 1rem;
  grid-template: 1fr / 1fr auto 100vh;
}

.site-footer {
  font-size: 0.75rem;
  grid-area: 2 / 1 / 3 / 4;
  text-align: right;
}

.hidden {
  display: none;
}