/** BODY **/
body {
    flex: 1;
}
/** END BODY **/
/** HEADER **/
#header{
    padding: 0px;
}
.navbar{
padding-left: 20px;
}
/** END HEADER **/
/** CONTENT of Index.html**/
.secTitle{
    margin-bottom: 20px;
}
.headshot {
max-height: 250px;
width: auto;
border-radius: 60%;
border-color: gray;
border-style: double;
border-width: 20px;
}
.featRow{
    margin: 0px -18px;
    padding: 8px;
}
.featColumn{
    padding: 6px;
    float: left;
    position: relative; /* Add position relative */
    transition: all 0.3s ease; /* Smooth transition */
    }
.featColumn:hover{
    bottom: 15px;
    box-shadow: 0px 10px 10px 0px black;
}
.featContent {
    padding: 8px;
    border: 1px solid gray;
}
.featRow a {
    text-decoration: none;
}
.featRow a:hover{
    text-decoration: underline;
}
p{ /* Relies on webkit */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}
/** END CONTENT of index.html **/
/** CONTENT OF projects.html **/
.tocList{
    text-align: center;
    list-style-position: inside;
}
.tocContent {
    padding: 8px;
}
.demoVideo{
    width: 500px;
    height: 300px;
    padding: 30px;
    overflow: hidden;
}
#hmsvid{
    width: 500px;
    height: 500px;
}
.linkProj {
    font-size: 50%;
}
h4 {
    padding-top: 20px;
}
/** END CONTENT of projects.html **/

/** CONTENT of experience.html **/
.expImg{
max-width: 500px;
max-height: 500px ;
padding: 20px;
}
.expSection p {
    overflow: hidden;
    -webkit-line-clamp: 5;
}
/** END CONTENT of experience.html **/
/** FOOTER **/
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Flex-grow for content to push footer to the bottom */
#mainContent {
    flex-grow: 1;
}
#footer {
    background-color: solid lightgray; /* Light gray background */
    padding: 20px 0px;
    width: 100vw;
}
/** END FOOTER **/
/********** Extra Large devices only **********/
@media (min-width: 1200px) {
    .featColumn{
        width: 25%;
    }
}
  
/********** Large devices only **********/
@media (min-width: 992px) and (max-width: 1199px) {
    .featColumn{
        width: 25%;
    }
}
  
/********** Medium devices only **********/
@media (min-width: 768px) and (max-width: 991px) {
    .featColumn{
        width: 25%;
    }  
}
  
/********** Small devices only **********/
@media (min-width: 576px) and (max-width: 767px) {
    .featColumn{
        width: 50%;
    }
}
  
  
/********** Extra small devices only **********/
@media (max-width: 575px) {
    .featColumn{
        width: 50%;
    }
}