body{
  font-family: ocr-a-std, monospace;
}

main{
  background-color: grey;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}
main  div{
  height: 80px;
  width: 300px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-top: 250px;
  margin-bottom: 20px;
  background-repeat: no-repeat;
  background-size: contain;

}
main a{
  text-decoration: none;
  font-size: 1px;
}

main a p{
  padding: 8px;
  background-color: black;
  color: white;
  font-size: 25px;
  opacity: 0;
  transition: opacity 0.5s ease;
}
main div:hover p{
  opacity: 1;
}
.mack{
  margin-top: 20px;
  background-image: url("mack.png");
  }
.AP{
  background-image: url("ap.png");
}
.Robots{
  background-image: url("bot.png");
}
.Reinaert{
  background-image: url("reinaert.png");
}
.HealthyFoodie{
  background-image: url("healthy.png");
}
.Portfolio{
  background-image: url("portfolio.png");
}
.title1{

  background-color: white;
  width: 100%;
}
.title2{
  background-color: white;
  width: 100%;
}
.title3{
  background-color: white;
  width: 100%;
}
.VisualWayfindingSystem{
  background-image: url("vwf.png");
}
.Editorial{
  background-image: url("bass.png");
}
header{
  height: 200px;
  background-image: url("BANNER.png");
  background-size: contain;
  background-repeat: no-repeat;
}
footer{

  height: 200px;
  width: 100%;
  margin-top: 200px;
  color: black;
  text-align: center;
  padding-top: 10px;
}
@media screen and (min-width:900px) {
  main{
    display: grid;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
  }
  .title1{
    grid-row: 1;
    grid-column: 1 / span 2 ;
    text-align: left;
    background-color: white;
    width: 100%;
  }
  .title2{
    grid-row: 4;
    grid-column: 1 / span 2 ;
    text-align: left;
    background-color: white;
    width: 96%;
  }
  .title3{
    grid-row: 7;
    grid-column: 1/ span 2;
  }
  .AP{
    margin-top: 20px;
  }
  .Robots{
    background-color: white;
    width: 750px;
    background-position: center;
  }
  #ROBOTS{
    grid-column: 1/ span 2;

  }
  #REINAERT{
    grid-row: 5;
    grid-column: 1;
  }
  #HEALTHYFOODIE{
    grid-row: 5;
    grid-column: 2;
  }
  .Portfolio{
    background-color: white;
    width: 750px;
    background-position: center;
  }
  #PORTFOLIO{
    grid-row: 6;
    grid-column: 1/span 2;
  }
}
@media screen and (min-width:1400px) {
  main{

    width: 1300px;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .title1{
    grid-column: 1/ span 3;
  }
  .Robots{
    margin-top: 20px;
    width: 300px;
  }
  #ROBOTS{
    grid-column: 3  ;
    grid-row: 2;
  }
  .title2{
    grid-column: 1 /span 3;
    grid-row: 3;
    width: 100%;
  }
  #REINAERT{
    grid-row:4;
    grid-column: 1;
  }
  #HEALTHYFOODIE{
    grid-row: 4;
    grid-column: 2;
  }
  #PORTFOLIO{
    grid-row: 4;
    grid-column: 3;
  }
  .Portfolio{
    width: 300px;
  }
  .title3{
    grid-row: 5;
    grid-column: 1 / span 3;
  }
}