html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: content-box;
}

main {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 1fr auto;
  height: 100vh;
  justify-items: stretch;
}

.top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;

  width: 100%;

  & menu {
    & ul {
      padding: 0;
      margin-inline-end: 1rem;
    }

    & a {
      white-space: pre;
    }
  }

  & video {
    align-self: stretch;
  }
}

.bottom {
  & .bar {
    height: 5rem;

    background-color: green;
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: content-box;
}

main {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 1fr auto;
  height: 100vh;
  justify-items: stretch;
}

.top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;

  width: 100%;

  & menu {
    & ul {
      padding: 0;
      margin-inline-end: 1rem;
    }

    & a {
      white-space: pre;
    }
  }

  & video {
    align-self: stretch;
  }
}

.bottom {
  & .bar {
    height: 5rem;

    background-color: green;
  }
}