/* TODO media query landscape -> hextris (or general canvas games) -> portrait: 80vh, landscape: 90vw (blog!) */

.img-half, .half-width {
  width: 50%
}

// @media (max-width: 800px) {
//   .img-half, .chart {
//       float: none;
//       width: 75%
//   }
// }

@media (min-width: 130000px) {
  nav.sticky {
    position: sticky;
    width: 100%;
  }

  body > header > *, main, details, nav > ul {
    /* this determines the width of the outstanding item, should be responsive,
            may be use vw or vh? */
    display: block;
    width: 1234px
  }
  
  nav.fixed-top {
    position: absolute;
    top: 0
  }

  nav.light {
    background: $brand-color
  }
  
  body > header {
/*    margin-top: 3rem;  main nav bar height */

    a {
      position: relative
    }
  }
}