body {
  background-color: white;
  
}
.verticalLine {

  border-left: solid black;
}

.footsy{
  background-color: blue;
}
.midsy{
  display: grid;
  gap: 2rem;
  border-style:dotted;
  border-width: 1px;
  border-color:  rgb(37, 24, 24);
  background-color:rgb(20, 217, 73,.5);
  margin-bottom: 0px;
  vertical-align: middle;
  align-items: center;
  text-align: center;
  /* max-height: 50rem; */
  overflow: auto;
  width: auto;
  z-index: 60;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}


.flex-container {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    background-color: DodgerBlue;
    vertical-align: middle;
  }
  
  .flex-container > div {
    background-color: #89d3f5;
    align-content: flex-start;
    left: 0px;
    width: 33%;
    margin: 2px;
    vertical-align: middle;
    text-align: center;
    line-height: 15px;
    font-size: 30px;
  }

  .flex-container2 {
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    vertical-align: middle;
    background-color: rgba(61, 220, 204, 0.896)
    }
  
  .flex-container2 > div {
    max-height: 350px;
    background-color: rgba(125, 219, 67, 0.796);
    width: 60%;
    margin: 2px;  
    text-align: center;    
    vertical-align: middle;
    line-height: 2;
    font-size: 30px;
  }

  .flex-container3 {
    display: flex;
    justify-self: auto ;
    flex-direction: row;
    background-color: DodgerBlue;
  }
  
  .flex-container3 > div {
    /* background-color: #262ecc; */
    width: 33%;
    margin: 2px;
    text-align: center;
    line-height: 15px;
    font-size: 30px;
  }
  .flex-container4 {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
    flex-direction: row;
    background-color: DodgerBlue;
  }
  
  .flex-container4 > div {
    /* background-color: #262ecc; */
    width:100%;
    margin: 2px;
    align-items: center;
    text-align: center;
    line-height: 15px;
    font-size: 30px;
  }
h2 {
  font-size: 2.5vw;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

}  

h3 {
  font-size: calc(10px + .5vw);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;

}  

h4  {
    font-size: 2vw;
    vertical-align: middle;
    line-height: 1.1;
}
h5 {
    font-size: 50%;
}

.grid-even-columns{
  display: grid;
  gap: 2rem;
  border-style: solid;
  border-width: 2px;
  border-color:  rgb(37, 24, 24);
  background-color:white;
  margin-bottom: 0px;
  vertical-align: middle;
  align-items: center;
  text-align: center;
  max-height: 50rem;
  overflow: hidden;
  width: auto;
  z-index: 60;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.grid-more-columns{
  display: grid;
  gap: 0rem;
  border-style: solid;
  border-width: 1px;
  border-color: white;
  background-color: white;
  margin-bottom: 0px;
  vertical-align: middle;
  align-items: center;
  text-align: center;
  max-height: 50rem;
  width: 100%;
  z-index: 60;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.grid-added-columns{
  display: grid;
  gap: 0rem;
  /* border-style: solid; */
  border-width: 2px;
  border-color: blue; 
  background-color:white;
  margin-bottom: 0px;
  vertical-align: top;
  align-items: center;
  text-align: center;
  max-height: 50rem;
  width: auto;
  z-index: 60;
  grid-template-columns: 1fr 60%;
}

.footsy{
  display: grid;
  gap: 2rem;
  border-style: solid;
  border-width: 2px;
  border-color:  rgb(37, 24, 24);
  background-color:rgb(52, 20, 217);
  margin-bottom: 0px;
  vertical-align: middle;
  align-items: center;
  text-align: center;
  max-height: 50rem;
  overflow: hidden;
  width: auto;
  z-index: 60;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
h1
{
  font-size: 2.3vw;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  color: #c92b2b;
  
  
}