@charset "utf-8";

html {

}

body, footer, header, section, ul, li, fieldset, form, input, label, nav, h1, h2, h3, span, p {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
  background-color: #fff;
  color: #000;
  text-align: center;
  width: 100vw;
}

#main_wrapper {
  display: grid;
  width: 100vw;
}

@media screen and (max-width: 650px) {
  #main_wrapper {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: 65px auto auto auto auto auto 50px;
    grid-template-areas:
                          "header"
                          "nav"
                          "content"
                          "content"
                          "content"
                          "content"
                          "footer";
  }
}

@media screen and (min-width: 650px) {
  #main_wrapper {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 65px auto auto auto auto auto 50px;
    grid-template-areas:
                          "header header"
                          "nav nav"
                          "content content"
                          "content content"
                          "content content"
                          "content content"
                          "footer footer";
  }
}

@media screen and (min-width: 900px) {
  #main_wrapper {
    width: 100vw;
    height: 100vh;
    grid-template-columns: 130px auto auto auto auto;
    grid-template-rows: 125px auto auto auto auto auto 50px;
    grid-template-areas:
                          "header header header header header"
                          "nav content content content content"
                          "nav content content content content"
                          "nav content content content content"
                          "nav content content content content"
                          "nav content content content content"
                          "footer footer footer footer footer";
  }
}