/* 
 * By Eduardo Fernandez (https://edufdez.es)
 * For Back Pain Games (https://backpain.fun) 
 * All right reserved.
 */

* {
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  grid-template-areas:
    "header"
    "home"
    "games"
    "games-descriptions"
    "us"
    "contact";
  gap: 0;
}

/* areas */

#header {
  grid-area: header;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

#header > .logo {
  flex-grow: 2;
}

#header > .spacer {
  flex-grow: 1;
}

#header > #main-menu {
  flex-grow: 2;
}

#home {
  grid-area: home;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

#home > .logo {
  flex-basis: 38%;
}

#home > .content {
  flex-grow: 1;
}

#home #down-arrow {
  flex-shrink: 0;
  align-self: flex-end;
  position: absolute;
  left: 50%;
}

#games {
  grid-area: games;
}

#games-container {
  display: flex;
  align-items: baseline;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 10px;
}

@media screen and (max-width: 750px) {
  #games-container {
    flex-direction: column;
  }
}

#us {
  grid-area: us;
}

#us canvas {
  position: absolute;
  width: 100%;
  height: 100%;
}

#contact {
  grid-area: contact;
}

/* grid game descriptions */

#games-descriptions > div {
  grid-template-areas:
    "logo description"
    "video video"
    "links buttons"
    "people people";
}

@media screen and (max-width: 750px) {
  #games-descriptions > div {
    grid-template-areas:
      "logo"
      "description"
      "video"
      "links"
      "buttons"
      "people";
  }
}

#games-descriptions .logo {
  grid-area: logo;
}

#games-descriptions .description {
  grid-area: description;
}

#games-descriptions .video {
  grid-area: video;
}

#games-descriptions .links {
  grid-area: links;
}

#games-descriptions .buttons {
  grid-area: buttons;
}

#games-descriptions .people {
  grid-area: people;
}