.navbar {
                background-color:white
            }

.nav-link-active{
                color:black;
                text-decoration: none;
                font-family:"commuters-sans", sans-serif;
            }

li:hover {
          color:black;
          transform: scale(1.05)
}

a {    
          text-decoration: none
}

li {      
          color:dimgray;
          text-decoration: none;
          transition-property: inherit;
          transition-duration:0.4s;
          font-family: "commuters-sans", sans-serif;
}


.VerticalLi { 
          
          background-color: white;
          text-decoration: none;
          transition-property: inherit;
          transition-duration:0.4s;
}

.VerticalLi:hover {
          color:black;
          transform: scale(1.05)
}

.footer {
          text-decoration: none;
          color:white;
          font-family:"commuters-sans", sans-serif;
}

h3 {
          transition-property: inherit;
          transition-duration:0.4s;
          
}

h3:hover {
          transform: scale(1.05)
}

h1 {
          font-family:"commuters-sans", sans-serif;
}

h2 {
          font-family:"commuters-sans", sans-serif;
}

h4  {     
          text-align: left;
          font-family: "commuters-sans", sans-serif;
}

p {     
          text-align: left;
          
}

span, .Title {
          font-family:"commuters-sans", sans-serif;
}

.sidenav {
          list-style-type: none;
          margin-top: 50px;
          width: 25%;
          height: 100%;
          position: fixed; 

}

span, h1, h2, .Title {
                text-wrap: balance;
                line-height: 1.1
            }
            


@media screen and (max-width: 700px) {
                .Title {
                    font-size: 2.5rem;
                }
            }
            
@media screen and (min-width: 701px) {
                .Title {
                    font-size: 5rem;
                }
}
            

.content {
          margin-left:27%;
          height:100%;
            }

#Point1, #Point2, #Point3, #Point4 {
                scroll-margin-top: 120px;
            }


            
.About {
          background-color: rgba(100, 149, 237, 0.47);
            }

            
            .HeadShot{
                overflow: hidden;
            }
            
            .img {
                overflow: hidden;
                object-fit: cover
            }

.img-card {
                position:relative;
                display: block;
                overflow: hidden;
                text-decoration: none
            }