html {
  box-sizing: border-box;
  margin: 40px;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

.container-home{
  grid-template-areas:
  "header header"
  "header header"
  "main main"
  "main main";
}

.container-home main{
  grid-area: main;
  grid-template-areas:
  "maintext ."
  ". mainfig";
  justify-items: center;
  align-items: center;
}

.container-aboutme{
  grid-template-areas:
  "header header"
  "header header"
  "main main";
}

.container-aboutme main{
  align-items: center;
  justify-items: center;
  grid-area: main;
  grid-template-areas: "abouttext aboutfig";
}

#abouttext{
  grid-area: abouttext;
}

#aboutpic{
  grid-area: aboutfig;
}

#cvimg{
  width: 500px;
}

.container-projects{
  grid-template-areas:
  "header header header"
  "header header header"
  "main main main"
  "main main main";
}

.container-projects main{
  grid-template-areas:
  "proj1 proj2 proj3"
  ". . ."
}

.container-workplacelearning{
  grid-template-areas:
  "header header"
  "header header"
  "main main"
  "main main";
}

.conatainer-contact{
  grid-template-areas:
  "header header"
  "header header"
  "main main"
  "main main";
}

header{
  grid-area: header;
  grid-template-areas:
  "title clapopen"
  "nav nav";
}

.title{
  grid-area: title;
}

.clapopen{
  grid-area: clapopen;
  justify-self: end;
}

nav {
  grid-area: nav;
  overflow: hidden;
  width: 100%;
}

a{
  text-decoration: none;
}

nav a {
  font-family: sans-serif;
  float: left;
  color: #393333;
  text-align: center;
  padding: 14px 16px;
  font-size: 17px;
}

nav a:hover {
  background-color: #009cab;
  color: black;
}

nav a.active {
  background-color: #f04c25;
  color: white;
}

#homepic{
  width: auto;
}
#homefig{
  grid-area: mainfig;
  width: auto;
  margin-right: 10%;
  margin-top: 2%;
}
#hometext{
  grid-area: maintext;
  font-size: 60px;
  line-height: 70px;
}

.container-aboutme, .container-home, .container-projects, .container-workplacelearning, .contact-container, header, main{
  display: grid;
  grid-row-gap: 20px;
}

footer{
  position: absolute;
  bottom: 40px;
  left: 40px;
}

  h1 {
    font-family: serif;
    font-size: 2em;
    line-height: 26px;
    color: #f04c25;
    font-weight: 600;
  }
  h2 {
    font-family: serif;
    font-size: 1.5em;
    line-height: 20px;
    color: #009cab;
    font-weight: normal;
    margin-top: 40px;
    margin-bottom: 10px;
  }
  p {
    font-family: sans-serif;
    font-size: 20px;
    line-height: 20px;
    color: #111111;
    font-weight: 300;
    width: 400px;
    text-align: left;
    margin-bottom: 20px;
    white-space: 5px;
  }
  img {
    width: 400px;
    border-style: solid;
    border-width: 5px;
    border-color: #009cab;
    border-radius: 10px;
    margin-top: 10px;
  }


  /*footer*/
  ion-icon{
    font-size: 60px;
    color: #f04c25;
  }
  ion-icon:hover{
    color: #009cab;
    transition: color 0.2s;
  }

  /*form*/
  .contact-container{
    grid-template-areas: 
    "form";
  }

  form{
    display: grid;
    grid-area: form;
    grid-template-areas: 
    "namelabel"
    "name"
    "maillabel"
    "mail"
    "messagelabel"
    "message"
    "submit";
  }
  #namelabel{
    grid-area: namelabel;
  }
  #name{
    grid-area: name;
  }
  #email{
    grid-area: mail;
  }
  #maillabel{
    grid-area: maillabel;
  }
  #messagelabel{
    grid-area: messagelabel;
  }
  #message{
    grid-area: message;
  }
  #submit{
    display: grid;
    align-content: end;
    grid-area: submit;
  }


  input, select, textarea {
    width: 200px;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }

  input[type=submit] {
    width: 100px;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #f04c25;
  }

  h2 a {
    color: #009cab;
  }


  #hamburger {
    justify-self: end;
    height: 26px;
    cursor: pointer;
    width: 25px;
    visibility: hidden;
  }

  @media screen and (max-width: 1100px) {

    #hamburger{
      visibility: visible;
    }

    .nav-links {
      display: none;
    }

    .nav-links.show {
      display: block;
    }

    /*nav bar*/
    nav a {
      padding: 10px 0; 
      float: none; 
      display: block; 
      width: 100%; 
      box-sizing: border-box;
      text-align: center; 
    }

    h1{
      font-size: 1.5rem;
    }

    #hometext{
      font-size: 40px;
      width: 100%;
      margin-top: 35px;
      line-height: 35px;
    }
    #homepic{
      max-width: 100%;
      height: auto;
    }
    footer ion-icon{
      font-size: 30px;
    }
    .container-home main{
      grid-template-areas:
      "maintext"
      "mainfig";
    }
    .container-aboutme main{
      justify-content: start;
      grid-template-areas:
      "abouttext";
    }
    #aboutpic{
      display: none;
    }
    #homefig{
      justify-self: start;
    }
  }

  @media screen and (max-width: 500px){
    p{
      font-size: 15px;
      width: 300px;
    }
  }

  @media screen and (max-width: 1300px){
    .container-projects main{
      grid-template-areas: 
      "proj1"
      "proj2"
      "proj3";
    }

    .container-projects, .contact-container, .container-aboutme{
      footer{
        display: none;
      }
    }

  }