/* Setting entire page height and margin to enable sticky footer */
html,
body {
  height: 100%;
  margin: 0;
}
/* Bottom border of navbar to match the top border of the footer */
.navbar {
  border-bottom: 5px solid #17a2b8;
}
/* Setting font of name on the left side of the navbar */
#nametop {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
/* Setting background image. Min-height and margin-bottom are used to enable the sticky footer */
.mainpagecontent {
  background-image: url("images/background.jpg");
  background-color: #cccccc;
  min-height: 100%;
  margin-bottom: -90px;
}
/* Creating space after the .mainpagecontent to enable the sticky footer */
.mainpagecontent::after {
  content: "";
  display: block;
}
/* Width of the picture on the About Me page */
#aboutmepic {
  width: 210px;
}
/* Width of the portfolio pictures on the Portfolio page */
#portfoliopic1,
#portfoliopic2,
#portfoliopic3,
#portfoliopic4,
#portfoliopic5 {
  width: 100%;
}
/* Setting height of footer and the area after .mainpagecontent */
footer,
.mainpagecontent::after {
  height: 90px;
}
/* Footer styling */
.footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  line-height: 70px;
  background-color: #343a40;
  border-top: 5px solid #17a2b8;
}

/* Styling the Font Awesome social media icons */
.fa {
  padding: 20px;
  font-size: 40px;
  width: 50px;
  text-decoration: none;
  color: #17a2b8;
}

/* Adding hover effect to the Font Awesome social media icons */
.fa:hover {
  opacity: 0.7;
}
/* Setting font size of text in the middle of the footer */
.namefooter {
  font-size: 14px;
}