.mainContainer{
    width: 100%;
    position: relative;
 
}
.container {
    margin-top:0px;
}


.myNavBar{
    
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 18vh;
}
.myNavBar img{
    top:0;
    left:-50px;
    height: 20vh;
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
   /* Safari seems to support, but seems deprecated and does the same thing as the others. */
    image-rendering: -webkit-optimize-contrast;
  
}

@media (max-width: 720px) {

.container {
    margin-top:0px;
}
}

@media (max-width: 720px) {
  .myNavBar img {
    position: relative;
    transform: scale(0.5);
    top:0px;
    left:-50px;
  }
}
.topHeader{
      min-height: 150vh;  
      background-image: url('./assets/banner.jpeg');
      background-repeat: no-repeat;
      background-size:cover;
      display: flex;
      align-items: center;
      width: 100%;
      justify-content: center;

}

@media (max-width: 720px) {
    .topHeader {
        min-height: 150vh;
        background-image: url('./assets/banner.jpeg');
        background-repeat: no-repeat;
        align-items: center;
        width: 100%;
        justify-content: center;
    }
}
.row{
    margin-bottom : 3rem ;
}