footer {
  background-color: #17a2b8;
}

#privacy {
  color: blue;
}

#overlay {
  position: absolute; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 1580px; /* Full height (cover the whole page) */
  top: 80px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.9); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
  color: white;
}

#overlay h4 {
  padding-top: 1.5em;
  padding-left: 0.4em;
}

#overlay h5 {
  padding-left: 2em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
#overlay h6 {
  padding-left: 4em;
  padding-top: 0.5em;
}

#profeshCard h2{
  color: white;
  text-shadow: 2px 2px 2px #2ca2b8, -1px -1px 2px #000000;
}

#profeshCard h4{
  color: white;
  text-shadow: 1px 2px 2px #2ca2b8, -1px -1px 2px #000000;
}

#profeshCard p{
  color: white;
  text-shadow: 1px 1px 2px #000000, -1px -1px 2px #000000;
}

#interestSec {
  background-color: #17a2b8;
}

.navfix:before {
  content: "";
  display: block;
  padding-top: 90px; /* header height + empty space */
  margin-top: -25px; /* header height to degrees padding’s space */
}

.websitePrimaryRow {
  background-color: #d3d3de;
}

.offRow {
  background-color: lightBlue;
}

.offRowButton {
  border-top: lightBlue;
}

.floatIt {
  float: right;
}

.mainBody {
  background-color: #f8f9fa;
}

.navbar {
  background-color: #17a2b8;
}

.navbar a {
  color: #f8f9fa;
}

.navbar-nav > li > .dropdown-menu {
  background-color: #17a2b8;
}

.nav-item > a[target="_blank"]:before {
    content: url("../media/externalLinkIcon_black.png");
}

.profSec {
  /*background-color: #f8f9fa;*/
}

.themeSec {
  /*background-color: #f8f9fa;*/
}

.skillsTableHeader {
  background-color: #b8daff;
}

.anotherBorder {
  box-shadow: 0px -6px 10px grey;
}

/* (experienceSec is used to fix navigation) */
.expSec {
  background-color: #add8e6;
}

.expBanner {
  background-color: #2ca2b8;
  padding-bottom: 1em;
}

.eduSec {
  background-color: #d3d3de;
}

.eduBanner {
  background-color: #c1c5be;
  padding-bottom: 1em;
}

.borderSec {
  border: 5px solid #c1c5be;
  border-radius: 4px;
  margin: 0.3em;
}

.carousel-caption {
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.8);
  color: white;
  border: 5px solid #add8e6;
  border-radius: 4px;
  margin: 1em;
}

.carousel-item > img {
  width: 100vw;
  height: 62vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
}

.bodyFont {
  font-family: Georgia, serif;
}

.navFont {
  font-family: sans-serif;
}

/*Media Queries*/
/* For first awkward font size place*/
@media screen and (max-width: 1010px) {
  #profeshCard h2{
    font-size: 24px;
  }
  #profeshCard h4 {
    font-size: 18px;
  }
}

/* For second awkward font size place*/
@media screen and (max-width: 790px) {
  #profeshCard h2{
    font-size: 20px;
  }
  #profeshCard h4 {
    font-size: 17px;
  }
  #overlay {
    height: 2100px;
  }
}

/* For Website card */
@media screen and (max-width: 766px) {
  .reverseIt {
    display: flex;
    flex-direction: column-reverse;
  }
  .floatIt {
    float:left;
  }
}

/* For contact section */
@media screen and (max-width: 766px) {
  .skinnyIt {
    margin-right: 16px;
    margin-left: 16px;
  }

  .carousel-item > img {
    height: 50vh;
  }
}

/* For carousel section */
@media screen and (max-width: 980px) and (min-width: 766px) {
  .carousel-item > img {
    height: 60vh;
  }
}
@media screen and (min-width: 1500px) {
  .carousel-item > img {
    height: 70vh;
  }
}
@media screen and (max-width: 566px) {
  .carousel-item > img {
    height: 40vh;
  }
}