styles.css

h1 {
  font-size: 30px;
}

h2 {
  font-size: 20px;
}

body {
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.title {
  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
  background-color: #ADDFFF; 
}

.navbarList {
  list-style-type: none;
  margin: 0;
  padding: 0px;
  display: inline-block;
}

.navbarList li {
  float: left; 
}

.navbarList li a {
  display: block;
  padding: 14px 16px;
  text-decoration: none;
  color: black;
  font-weight: bold;
}

.aboutMe {
  padding: 25px;
  max-width: 30%;
  margin: 0 auto;
}

.aboutMe p {
    padding: 25px;
}

.aboutMe img {
  border-radius: 50%;
  max-width: 15%;
  min-width: 100px;
  padding: 25px;  
} 

.projects{
  background-color: #ADDFFF;
  padding: 20px;
  max-width: 30%;
  margin: 0 auto;
  padding: 25px;
}

.projects ul {
  display: inline-block;
}

.projects li {
  text-align: left;
}
.projects li a{
  color: black;
}

.skills {
    padding: 30px;
    margin: 0 auto;
    display: inline;   
    
}

.skills #skillImages {
  height: 125px;
  padding-bottom: 100px;
  align-items:flex-start;
  display: block;
}

.skills img {
    padding: 30px;
    max-width: 4%;
    min-width: 50px;  
}

.skills img:hover {
  padding: 30px;
  max-width: 100px;
  min-width: 50px;
  transition-duration: 0.5s;
}

.courses{
  background-color: #ADDFFF;
  padding: 20px;
  max-width: 30%;
  margin: 0 auto;
  display: block;
}

.courses ul {
  display: inline-block;
}

.courses li {
    text-align: left;
}

.contactImages {
  transform: translate(-50%, -50%);
  top: 50%;
  position: absolute;
  left: 50%; 
}

.contactImages img {
  padding: 30px;
  max-width: 4%;
  min-width: 50px;
}

.scroll-up {
  float: right;
  padding-right: 5%;
  padding-bottom: 3%;
  cursor: pointer;
}

.up-arrow {
  width: 3rem;
  height: 3rem;
}

footer {
  padding: 50px;
  text-align: center;
}

@media screen and (max-width: 1000px) {
  .courses, .projects, .aboutMe {
    max-width: 80%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}