h1 {color: white; text-align: center; 
    background-color: cornflowerblue;
    font-size: 50px;
    padding: 20px;
    font-family: 'Raleway', sans-serif;
    color: black;
    }

h2 {color: lightslategray;
}

p {color: lightslategray;
font-size: 20px;
}
header { background-color: black;}
body { background-color: black;}


footer{ position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: gray;
color: black;
text-align: center;
font-size: 10px;
}

.form-group{ padding-left: 100px; 
padding-right: 100px;
}

.aboutMe {
    padding: 100px;
    color: white;
    background-color: black;
   
}

#joel-pic{
    border-radius: 50%;
    max-width: 75%;
    height: auto;
}

#about-me-p {
    font-size: 30px ;


}

#AboutMeContent { 
    margin-top: 50px;
    margin-right: 50px;
    margin-left: 50px;
    
}

.nav{ justify-content: flex-end;
background-color: black;}

.nav :hover {background-color: cornflowerblue;}

a  { color:lightslategray; 
}

/* a :hover {color: maroon;} */
#portfolio { 
    margin-top: 50px;
    margin-left: 195px;
    margin-bottom: 30px;
}

/* #images
{display: inline;
margin-left: auto;
margin-right: auto;
width: 50%;
} */

/* #toprow{
    padding-bottom: 1in;
} */

#email {
    color: lightslategray;
    font-weight: bolder;
}

#message{
    color: lightslategray;
    font-weight: bolder;

}

.button { padding-left: 100px;

}

.myCards {justify-content: center;

}


@media screen and (max-width: 768px) {
    /* input classes .class and styles here for  */
    h1 {}
    .nav {justify-content: center;}
    /* #toprow {padding-bottom: 10px;} */
    #AboutMeContent { margin-top: 10px;
    }
    #portfolio { margin-top: 10px; text-align: center ; margin: auto;


    }
    .myCards {justify-content: center;

    }

}


.centering{ 
    text-align: center;
    padding: 15px;
}

li{
    font-size: 25px;
}

ul {
    list-style-type: none;
  }

  li a{
      text-decoration: underline;
  }

  #follow{
    margin-top: 30px;
  }