html, body {
  top: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

body {
  background-color: #666;
  font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
  color: white; }

nav {
  position: fixed;
  top: 0;
  width: 10%;
  height: 100%;
  background-color: #444; }
  nav ul {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 20px;
    list-style-type: none;
    padding: 0; }
    nav ul li a {
      text-decoration: none;
      color: white; }
      nav ul li a img {
        display: block;
        background-color: lightgrey;
        width: 40px;
        height: 40px;
        padding: 5px;
        border-radius: 5px;
        margin: 2px auto; }
      nav ul li a span {
        display: block;
        text-align: center; }

main {
  top: 0;
  margin-left: 10%;
  padding: 10px; }

@media screen and (max-width: 630px) {
  nav {
    width: 100%;
    height: 100px; }
    nav ul {
      grid-template-columns: repeat(4, 1fr); }
  main {
    margin-left: 0;
    margin-top: 100px; } }

article {
  max-width: 1500px;
  column-count: 3;
  margin: 0 auto; }

@media screen and (max-width: 1000px) {
  article {
    column-count: 2; } }

@media screen and (max-width: 630px) {
  article {
    column-count: 1; } }

/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi90aG91Z2h0cy9sYXlvdXQvX2xheW91dC5zY3NzIiwid2VicGFjazovLy8uL3Rob3VnaHRzL3Rob3VnaHRzL3Rob3VnaHRzLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDSSxPQUFNO0VBQ04sVUFBUztFQUNULFdBQVU7RUFDVix1QkFBc0IsRUFDekI7O0FBRUQ7RUFDSSx1QkFBdUI7RUFDdkIsZ0VBQStEO0VBQy9ELGFBQVksRUFDZjs7QUFFRDtFQUNJLGdCQUFlO0VBQ2YsT0FBTTtFQUNOLFdBQVU7RUFDVixhQUFZO0VBQ1osdUJBQXNCLEVBMkJ6QjtFQWhDRDtJQU9RLGNBQWE7SUFDYiwyQkFBMEI7SUFDMUIsY0FBYTtJQUNiLHNCQUFxQjtJQUNyQixXQUFVLEVBb0JiO0lBL0JMO01BY2dCLHNCQUFxQjtNQUNyQixhQUFZLEVBY2Y7TUE3QmI7UUFpQm9CLGVBQWM7UUFDZCw0QkFBMkI7UUFDM0IsWUFBVztRQUNYLGFBQVk7UUFDWixhQUFZO1FBQ1osbUJBQWtCO1FBQ2xCLGlCQUFnQixFQUNuQjtNQXhCakI7UUEwQm9CLGVBQWM7UUFDZCxtQkFBa0IsRUFDckI7O0FBTWpCO0VBQ0ksT0FBTTtFQUNOLGlCQUFnQjtFQUNoQixjQUFhLEVBQ2hCOztBQUVEO0VBQ0k7SUFDSSxZQUFXO0lBQ1gsY0FBYSxFQUloQjtJQU5EO01BSVEsc0NBQXFDLEVBQ3hDO0VBRUw7SUFDSSxlQUFjO0lBQ2Qsa0JBQWlCLEVBQ3BCOztBQzlETDtFQUNJLGtCQUFpQjtFQUNqQixnQkFBZTtFQUNmLGVBQWMsRUFDakI7O0FBRUQ7RUFDSTtJQUNJLGdCQUFlLEVBQ2xCOztBQUdMO0VBQ0k7SUFDSSxnQkFBZSxFQUNsQiIsImZpbGUiOiJ0aG91Z2h0cy5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJodG1sLCBib2R5IHtcclxuICAgIHRvcDogMDtcclxuICAgIG1hcmdpbjogMDtcclxuICAgIHBhZGRpbmc6IDA7XHJcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xyXG59XHJcblxyXG5ib2R5IHtcclxuICAgIGJhY2tncm91bmQtY29sb3I6ICM2NjYgO1xyXG4gICAgZm9udC1mYW1pbHk6IFwiSGVsdmV0aWNhIE5ldWVcIixIZWx2ZXRpY2EsUm9ib3RvLEFyaWFsLHNhbnMtc2VyaWY7XHJcbiAgICBjb2xvcjogd2hpdGU7XHJcbn1cclxuXHJcbm5hdiB7XHJcbiAgICBwb3NpdGlvbjogZml4ZWQ7XHJcbiAgICB0b3A6IDA7XHJcbiAgICB3aWR0aDogMTAlO1xyXG4gICAgaGVpZ2h0OiAxMDAlO1xyXG4gICAgYmFja2dyb3VuZC1jb2xvcjogIzQ0NDtcclxuICAgIHVsIHtcclxuICAgICAgICBkaXNwbGF5OiBncmlkO1xyXG4gICAgICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogMWZyO1xyXG4gICAgICAgIHJvdy1nYXA6IDIwcHg7XHJcbiAgICAgICAgbGlzdC1zdHlsZS10eXBlOiBub25lO1xyXG4gICAgICAgIHBhZGRpbmc6IDA7XHJcbiAgICAgICAgbGkge1xyXG4gICAgICAgICAgICBhIHtcclxuICAgICAgICAgICAgICAgIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcclxuICAgICAgICAgICAgICAgIGNvbG9yOiB3aGl0ZTtcclxuICAgICAgICAgICAgICAgIGltZyB7XHJcbiAgICAgICAgICAgICAgICAgICAgZGlzcGxheTogYmxvY2s7XHJcbiAgICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogbGlnaHRncmV5O1xyXG4gICAgICAgICAgICAgICAgICAgIHdpZHRoOiA0MHB4O1xyXG4gICAgICAgICAgICAgICAgICAgIGhlaWdodDogNDBweDtcclxuICAgICAgICAgICAgICAgICAgICBwYWRkaW5nOiA1cHg7XHJcbiAgICAgICAgICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogNXB4O1xyXG4gICAgICAgICAgICAgICAgICAgIG1hcmdpbjogMnB4IGF1dG87XHJcbiAgICAgICAgICAgICAgICB9XHJcbiAgICAgICAgICAgICAgICBzcGFuIHtcclxuICAgICAgICAgICAgICAgICAgICBkaXNwbGF5OiBibG9jaztcclxuICAgICAgICAgICAgICAgICAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XHJcbiAgICAgICAgICAgICAgICB9XHJcbiAgICAgICAgICAgIH1cclxuICAgICAgICB9XHJcbiAgICB9XHJcbn1cclxuXHJcbm1haW4ge1xyXG4gICAgdG9wOiAwO1xyXG4gICAgbWFyZ2luLWxlZnQ6IDEwJTtcclxuICAgIHBhZGRpbmc6IDEwcHg7XHJcbn1cclxuXHJcbkBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDYzMHB4KSB7XHJcbiAgICBuYXYge1xyXG4gICAgICAgIHdpZHRoOiAxMDAlO1xyXG4gICAgICAgIGhlaWdodDogMTAwcHg7XHJcbiAgICAgICAgdWwge1xyXG4gICAgICAgICAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCg0LCAxZnIpO1xyXG4gICAgICAgIH1cclxuICAgIH1cclxuICAgIG1haW4ge1xyXG4gICAgICAgIG1hcmdpbi1sZWZ0OiAwO1xyXG4gICAgICAgIG1hcmdpbi10b3A6IDEwMHB4O1xyXG4gICAgfVxyXG59IiwiQGltcG9ydCBcIi4uL2xheW91dC9sYXlvdXRcIjtcclxuXHJcbmFydGljbGUge1xyXG4gICAgbWF4LXdpZHRoOiAxNTAwcHg7XHJcbiAgICBjb2x1bW4tY291bnQ6IDM7XHJcbiAgICBtYXJnaW46IDAgYXV0bztcclxufVxyXG5cclxuQG1lZGlhIHNjcmVlbiBhbmQgKG1heC13aWR0aDogMTAwMHB4KSB7XHJcbiAgICBhcnRpY2xlIHtcclxuICAgICAgICBjb2x1bW4tY291bnQ6IDI7XHJcbiAgICB9XHJcbn1cclxuXHJcbkBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDYzMHB4KSB7XHJcbiAgICBhcnRpY2xlIHtcclxuICAgICAgICBjb2x1bW4tY291bnQ6IDE7XHJcbiAgICB9XHJcbn1cclxuIl0sInNvdXJjZVJvb3QiOiIifQ==*/