/* max device width is deprecated, but still supported by all browsers according to w3c,
max-device-width here ensures that all devices below 720p are recognized as mobile devices,
an appropriate breakpoint for desktop in pixels may not be appropriate for mobile devices.
and until we have a reliable relative unit that normalizes physical screen size and pixel density, 
this is a reasonable way to ensure desired behavior.

side note: strangely the online discussion seems to be a dichotomy of device-width vs window width, 
and not how they can be used in combination to make up for shortcomings of either method.
*/

@media only screen and (max-width: 959px),
  only screen and (max-device-width: 1023px) {
  #navbar {
    grid-template-columns: 1fr 2fr 1fr 1fr 1fr 2fr 1fr;
    grid-template-rows: 10vw;
  }

  #navbar > p {
    display: none;
  }

  .active {
    filter: brightness(50%);
    height: 8vw;
  }

  #navbar .icon:hover {
    transition: height 0.1s;
    height: 9vw;
  }

  #navbar .icon:not(:hover) {
    transition: height 0.1s;
    height: 8vw;
  }

  #navLeft {
    grid-column: 1;
  }

  #navMiddle1 {
    grid-column: 3;
  }

  #navRight {
    grid-column: 7;
  }
}