h1{
  color: indianred;
  background-color: lightseagreen;
}
body{
  color: khaki;
  background-color: seagreen;
}
.intro{
  color: maroon;
  background-color: turquoise;
  border-style: dotted;
  border-width: 4px;
  grid-area: area1;
}
.roboIntro{
  grid-area: area2;
}
.robotPicture{
  border-left-style: solid;
  border-color: blue;
  border-width: 20px;
  background-color: lavender;
  grid-area: area3;
}
.robotEvaluation{
  border-style: groove;
  border-color: lavender;
  grid-area: area4;
}

.blogGrid {
display: grid;
width: 100%;
grid-template-areas:
'area1 area1 area1 area1'
'area2 area2 area3 area3'
'area4 area4 area4 area4'
'area5 area5 area5 area5';
grid-gap: 1%;
grid-template-columns: 24% 24% 24% 24%;
}
#frontImg{
  display: block;
}
#topImg{
  display: none;
}
#sideImg{
  display: none;
}
.frontbutton{
  color: khaki;
  background-color: seagreen;
  border-color: blueviolet;
  border-style:dotted
}
.topbutton{
  color: khaki;
  background-color: seagreen;
  border-color: blueviolet;
  border-style:dotted
}
.sidebutton{
  color: khaki;
  background-color: seagreen;
  border-color: blueviolet;
  border-style: dotted
}