/* site body styles */

body {
  background-color: #fffafa;
  color: #444;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: .9rem;
}

h1 {
  font-size: 1.75rem;
}

h2 {
  font-size: 1rem;
}

/* site navigation styles */

.navbar {
  background-color: #413256;
}

.navbar-dark .navbar-brand, .navbar-dark .navbar-toggler, .navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link .navbar-dark .navbar-nav .nav-link {
  color: #fffafa;
  font-size: 1.5rem;
}

/* page styles */

.jumbotron {
  background-color: #fffafa;
}

.bio {
  letter-spacing: .02em;
}

/* bio photo style */

#avatar {
  width: 275px;
  height: 275px;
  margin-right: 2rem;
}

/* portfolio page styles */

.card-img {
  background-size: cover;
}

.slide {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.slide .inner {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 33%;
  height: 100%;
  background-color: #413256;
  opacity: 80%;
  padding: 5px 10px;
}

/* form styles */

form {
  margin-bottom: 20px;
}

/* site sticky footer styles */

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #a3b745;
  color: #444444;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

.footer p {
  clear: both;
  margin-bottom: 0;
}

.footer li {
  list-style: none;
}

.footer-contact {
  float: left;
  text-align: left;
}

/* responsive styles */

@media screen and (max-width: 768px) {
  #avatar {
    float: none!important;
    overflow: auto;
    margin-right: 0px;
  }
}

@media screen and (max-width: 768px) {
  .avatar {
    text-align: center;
  }
}

/* font size adjustment for larger screens*/

/* 1rem = 16px*/

/* Small in portrait view (phones, 544p and up) */

@media (min-width: 544px) {
  body {
    font-size: 1.0rem;
  }
  h1 {
    font-size: 1.75rem;
  }
  h2 {
    font-size: 1.25rem
  }
}

/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) {
  body {
    font-size: 1.25rem;
  }
  h1 {
    font-size: 2.0rem;
  }
  h2 {
    font-size: 1.50rem
  }
}

/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) {
  body {
    font-size: 1.5rem;
  }
  h1 {
    font-size: 2.25rem;
  }
  h2 {
    font-size: 1.75rem
  }
  .jumbotron {
    padding: 4rem;
  }
}

/* @media (min-width: 768px) {
  body {
    font-size: 1.4rem;
  }
  }
  @media (min-width: 320px) {
  body {
    font-size: 1.2rem;
  }
}

@media (min-width: 768
px) { {
    body {
    font-size: 1.6rem;
  }
} */