.grid01{
    display:grid;
    grid-template-columns: 10px 1fr 1fr 10px 1fr 1fr;
    grid-template-rows: 80px 10px 1fr 1fr 10px;
}
h1{
  text-align: center;
  color:#fe4a49;
  font-family: 'Fira Sans', sans-serif;
}
h2{
  text-align: center;
  color:#fe4a49;
  font-family: 'Montserrat', sans-serif;
}
@media only screen and (max-width: 800px) {
  body {
    background-color: #2ab7ca;
  }
}
.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}
.responsiveI{
  width:100%;
  max-width:250px;
  height:auto;
}

body{
    background-color:#f4f4f8;
}
ul { /* drop-down navbar https://www.w3schools.com/css/css_navbar_horizontal.asp */
    font-family: 'Fira Sans', sans-serif;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #343742;
  }
  
  li {
    float: left;
    color:white;
  }
  
  li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: 'Fira Sans', sans-serif;
  }
  
  li a:hover, .dropdown:hover .dropbtn {
    background-color: #2ab7ca;
  }
  
  li.dropdown {
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #e4e4f4;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-family: 'Fira Sans', sans-serif;
  }
  
  .dropdown-content a:hover {background-color: #f1f1f1;}
  
  .dropdown:hover .dropdown-content {
    display: block;
  }

  .container01{
    background-color:#f4f4f8;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .indexH3{
    text-align:center;
    font-family: 'Fira Sans', sans-serif;
    color:#fe4a49;
  }
  .indexP{
      text-align:center;
      font-family: 'Montserrat', sans-serif;
  }
  .container02{
    background-color: #f4f4f8;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .container03{
    background-color:#2ab7ca;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
  }
  .indexTransition{
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
    transition: box-shadow 500ms;
  }
  .indexTransition:hover{
    box-shadow: 0 40px 80px 0 rgba(255, 0, 0, 0.9); 
  }
  .picContainer{
    display:flex;
    justify-content:space-around;
  }
  .header{
      grid-column-start:1;
      grid-column-end:7;
      grid-row:1;
      background-color:#fe4a49;
      color:#f4f4f8;
      font-family:'Fira Sans', sans-serif;
      text-align: center;
      font-size:40pt;
  }

  .pic01{
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  transition: box-shadow 500ms;
    grid-column: 2;
    grid-row: 3;
    align-self:center;
    justify-self:center;
    background-color: #2ab7ca;
  }
  .pic01:hover{
    box-shadow: 0 40px 80px 0 rgba(255, 0, 0, 0.9); 
    }
  .pic02{
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  transition: box-shadow 500ms;
    grid-column: 3;
    grid-row: 3;
    align-self:center;
    justify-self:center;
    background-color: #2ab7ca;
  }
  .pic02:hover{
    box-shadow: 0 40px 80px 0 rgba(255, 0, 0, 0.9); 
  }
  .pic03{
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  transition: box-shadow 500ms;
    grid-column: 2;
    grid-row: 4;
    align-self:center;
    justify-self:center;
    background-color: #2ab7ca;
  }
  .pic03:hover{
    box-shadow: 0 40px 80px 0 rgba(255, 0, 0, 0.9); 
  }
  .pic04{
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  transition: box-shadow 500ms;
    grid-column: 3;
    grid-row: 4;
    align-self:center;
    justify-self:center;
    background-color: #2ab7ca;
  }
  .pic04:hover{
    box-shadow: 0 40px 80px 0 rgba(255, 0, 0, 0.9); 
  }
  .info01{
      grid-column:5/7;
      grid-row:3;
      font-family: 'Montserrat', sans-serif;
      font-size: 16pt;
      background-color: #f4f4f8;
      margin:0px 0px 0px 10px;
  }
  .info02{
    grid-column:5/7;
    grid-row:4;
    font-family: 'Montserrat', sans-serif;
    font-size: 16pt;
    background-color: #f4f4f8;
    margin:0px 0px 0px 10px;
}
.rank{
  grid-column: 5/7;
  display:flex;
  justify-content: space-around;
  font-family: 'Montserrat', sans-serif;
  font-size: 16pt;
  background-color: #f4f4f8;
}
#gridLine1{
  grid-column:4/5;
  grid-row:3/6;
  background-color:#2ab7ca;
}
#gridLine2{
  grid-column:1/4;
  grid-row:5/6;
  background-color:#2ab7ca;
}
#gridLine3{
  grid-column:1/5;
  grid-row:2/3;
  background-color:#2ab7ca;
}
#gridLine4{
  grid-column:1/2;
  grid-row:2/6;
  background-color:#2ab7ca;
}