* { padding: 0; margin: 0; }


body {
  background-color: rgb(50,100,50);
  font-family: VL Gothic, serif, cursive;
  font-size: 1.1em;
  text-align: center;
  padding: 0; margin: 0;
  display: block;
  width: 80%;
  z-index: 1;
  }

  .selfnotes {
    color: gold;
    margin-bottom: 2em;
  }

  .selfnotes > h4 {
    color: red;
  }

  .PSection {
    display: block;
    padding: 2em;
    margin: 1em;
  }

  .EAgame {
    margin: 1em;
  }

  a {
    color: rgb(150, 150, 255);
    text-decoration: none;
  }

  canvas {
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  opacity: 0.2;
  display:block;
  z-index: -1;
  }

  .GameCol {
    position: relative;
    margin: 0;
    padding: 0;
    padding-top: 0.3em;
    float: left;

    display: flex;
    flex: auto;
  }

  .GameCol > ul a:hover {
    outline: solid 2px red;
  }

  .GameCol > ul > li {
    height: 10%;
    width: auto;
  }

  .navimg {
    position: relative;
    width: 80%;
    height: 80%;
  }
  #Page {
    float: left;
  }
  .Page{
    display: flex;
    flex: auto;

  }


/* So > just means filter through the list, first element first, keep goin till you
  get to the element and then class name or id you're going for. */