/* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
/* 
Color Scheme: 
Rust #B56357
Mint #B4DBC0
Slate #EAE3EA
Sea Foam #A7B3A5
#f3e9dc !important; /* linen (light tan) color */
body {
  background: #f3e9dc !important;
  color: hsl(0, 0%, 25%) !important;
}
h1,
h2,
h5 {
  font-family: "Playfair Display", serif !important;
  color: hsl(0, 0%, 25%) !important;
}

p {
  font-family: "Open Sans", sans-serif;
  font-style: normal;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

/* Styling for the Navigation Bar */
nav {
  background: white !important;
  color: #3c3c3c !important;
  font-family: "Open Sans", sans-serif;
}
.navbar-toggler {
  background-color: #f3e9dc !important;
}
/* End of styling for Navigation Bar */

.container {
  background: white !important; /* powder blue */
}

/* Styling for Portfolio Page */
.card-header {
  background: #f3e9dc;
}
/* Syling the Contact Form */
form {
  font-family: "Open Sans", sans-serif;
  font-style: normal;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.btn-blue {
  background-color: #8a9ea7;
  color: white;
  font-family: "Open Sans", sans-serif;
  letter-spacing: 0.17rem;
  border-radius: 0;
}

.btn-blue:hover {
  transform: scale(1.05);
  text-decoration: underline;
}

/* Styling the footer */
footer {
  bottom: 0 !important;
  width: 100%;
  padding: 20px;
  background: white;
}

/* Styling for linkedin and github links */
.fa {
  padding: 10px;
  font-size: 12px;
  width: 30px;
  border-radius: 100px;
}

.fa:hover {
  transform: scale(1.1);
  color: white;
  text-decoration: none;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-github {
  background: #444;
  color: #fff;
}

/* styling Blog page */
.blog-post {
  margin-bottom: 4rem;
}

.blog-post-title {
  margin-bottom: 0.25rem;
}

.blog-post-meta {
  margin-bottom: 1.25rem;
  color: #999;
}

.blog-img-float-left {
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
}

.blog-img-float-right {
  float: right;
  margin-left: 10px;
  margin-bottom: 10px;
}

/* Styling resume */

/* Media queries for responsive font sizes*/

@media (min-width: 200px) {
  /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
  h1 {
    font-size: 28px;
  }
  h2 {
    font-size: 23px;
  }
  h3 {
    font-size: 19px;
  }
  h4,
  label {
    font-size: 15px;
  }
  h5,
  span,
  p,
  .btn-blue {
    font-size: 12px;
  }
  .blog-img-float-left {
    float: none;
    width: 100%;
    margin-right: 0px;
  }
  .blog-img-float-right {
    float: none;
    width: 100%;
    margin-left: 0px;
  }
  .resume-iframe {
    height: 500px;
  }
}
@media (min-width: 480px) {
  /* smartphones, Android phones, landscape iPhone */
  h1 {
    font-size: 28px;
  }
  h2 {
    font-size: 23px;
  }
  h3 {
    font-size: 19px;
  }
  h4,
  label {
    font-size: 15px;
  }
  h5,
  span,
  p,
  .btn-blue {
    font-size: 12px;
  }
  .blog-img-float-left {
    float: left;
    width: 250px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .blog-img-float-right {
    float: right;
    width: 250px;
    margin-left: 10px;
    margin-bottom: 10px;
  }
  .resume-iframe {
    height: 600px;
  }
}
@media (min-width: 600px) {
  /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
  h1 {
    font-size: 35px;
  }
  h2 {
    font-size: 28px;
  }
  h3 {
    font-size: 19px;
  }
  h4,
  label {
    font-size: 17px;
  }
  h5,
  span,
  p,
  .btn-blue {
    font-size: 14px;
  }
  .blog-img-float-left {
    width: 300px;
  }
  .blog-img-float-right {
    width: 300px;
  }
  .resume-iframe {
    height: 900px;
  }
}
@media (min-width: 801px) {
  /* tablet, landscape iPad, lo-res laptops ands desktops */
  h1 {
    font-size: 35px;
  }
  h2 {
    font-size: 28px;
  }
  h3 {
    font-size: 21px;
  }
  h4,
  label {
    font-size: 17px;
  }
  h5,
  span,
  p,
  .btn-blue {
    font-size: 14px;
  }
  .blog-img-float-left {
    width: 380px;
  }
  .blog-img-float-right {
    width: 380px;
  }
}
@media (min-width: 1025px) {
  /* big landscape tablets, laptops, and desktops */
  h1 {
    font-size: 42px;
  }
  h2 {
    font-size: 32px;
  }
  h3 {
    font-size: 25px;
  }
  h4,
  label {
    font-size: 19px;
  }
  h5,
  span,
  p,
  .btn-blue {
    font-size: 15px;
  }
  .blog-img-float-left {
    width: 410px;
  }
  .blog-img-float-right {
    width: 410px;
  }
}
@media (min-width: 1281px) {
  /* hi-res laptops and desktops */
  h1 {
    font-size: 42px;
  }
  h2 {
    font-size: 32px;
  }
  h3 {
    font-size: 25px;
  }
  h4,
  label {
    font-size: 19px;
  }
  h5,
  span,
  p,
  .btn-blue {
    font-size: 18px;
  }
  .blog-img-float-left {
    width: 450px;
  }
  .blog-img-float-right {
    width: 450px;
  }
}