/* Initial font size */
html {
  font-size: 100%;
  /* 16px */
}

a {
  display: inline-block;
}

body {
  font-family: 'Inconsolata', monospace;
  /* font-family: 'Ubuntu Mono', monospace; */
  text-align: center;
  color: #1E2022;
}

/* headings */
h1, h2, h3, h4, h5, h6 {
  font-family: "Inconsolata";
}

.big-heading {
  font-family: "Inconsolata";
  font-size: 3.5rem;
  line-height: 1.5;
}

.big-heading-span {
  font-weight: bold;
}

.section-heading {
  font-family: "Inconsolata";
  font-weight: bold;
  font-size: 3.5rem;
  line-height: 1.3;
}

.course-heading {
  font-family: "Inconsolata";
  /* font-weight: bold; */
  font-size: 1.6rem;
  line-height: 1;
}

.quote-heading {
  font-family: "Parisienne";
  font-size: 2.5rem;
  line-height: 1.5;
}

/* containers */
.container-nav {
  padding: 0.1% 0% 0.1% 2%;
}

.container-fluid {
  padding: 3% 5%;
}

.container-skill {
  padding: 3% 1%;
}

.container-project {
  padding: 5% 5%;
}

.container-project-title {
  padding: 5% 2% 1%;
}

.container-course {
  padding: 5% 5%;
}

.container-footer {
  padding: 0.5% 1%;
}

/* text styles */
.text-thick {
  font-weight: bold;
}

/* Navigation bar */
.navbar {
  background-color: #404040;
  font-size: 1.3rem;
}

/* Sections: */
/* Intro */
#intro {
  background-color: #809A6F;
  color: #fff;
}

/* title image */
.my-img {
  border-radius: 100%;
  width: 50%;
}

/* Skills */
#skills {
  background-color: #fff;
}

.icon-skill {
  width: 100px;
  /* margin: 20px 40px; */
}

/* Quote1 */
#quote1 {
  background-color: #A25B5B;
  color: #fff;
}

/* Projects */
#projects {
  background-color: #fff;
}

.project-title {
  text-align: center;
}

.project-description {
  font-size: 1.25rem;
  line-height: 2.75;
  width: 600px;
  text-align: left;
}

/* .project-img {
  width: 610px;
  border-radius: 1%;
} */
.project-img-portrait {
  width: 400px;
  border-radius: 1%;
}

.project-img-landscape {
  width: 600px;
  border-radius: 1%;
}

/* Quote2 */
#quote2 {
  background-color: #CC9C75;
  color: #fff;
}

/* Udemy */
#udemy {
  background-color: #fff;
}

.udemy-logo-img {
  width: 40%;
}

.udemy-logo-img:hover {
  opacity: 0.5;
}

.udemy-course-img {
  width: 100%;
}

.udemy-course-img:hover {
  opacity: 0.5;
}

/* Contact */
#contact {
  background-color: #D5D8B5;
}

.icon-contact {
  width: 40px;
  margin: 20px 20px;
}

.icon-contact:hover {
  opacity: 0.5;
}

.icon-contact-udemy {
  width: 30px;
  margin: 20px 20px;
}

.icon-contact-udemy:hover {
  opacity: 0.5;
}

.icon-link {
  text-decoration: none;
}

/* Footer */
#footer {
  /* background-color: #fff; */
  background-color: #D5D8B5;
  color: #fff;
}

.copyright-text {
  font-family: "Inconsolata";
  font-size: 1.25rem;
}

.cookie-banner {
  font-family: "Inconsolata";
  font-size: 1.5rem;  
}

/* Media Queries */
@media (max-width: 1500px) {

  /*  Change width of project images and project description */
  /* Project images */
  .project-img-portrait {
    width: 440px;
  }

  .project-img-landscape {
    width: 440px;
  }

  /* Change project description width */
  .project-description {
    width: 440px;
  }
}

@media (max-width: 992px) {

  /* Tablet size screen - 992 */
  /* Base font size */
  html {
    font-size: 75%;
    /* 12px */
  }

  /* Change project description width */
  .project-description {
    width: 600px;
  }
}

@media (max-width: 800px) {

  /*  Change width of project images and project description */
  /* Project images */
  .project-img-portrait {
    width: 400px;
  }

  .project-img-landscape {
    width: 400px;
  }

  /* Change project description width */
  .project-description {
    width: 400px;
  }
}

@media (max-width: 576px) {

  /* Smartphone size screen - 576 */
  /* Base font size */
  html {
    font-size: 62.5%;
    /* 10px */
  }

  /* Icon size */
  .icon-contact {
    width: 30px;
    margin: 12px 12px;
    */
  }

  .icon-contact-udemy {
    width: 22.5px;
    margin: 12px 12px;
  }

  /* Project images */
  .project-img-portrait {
    width: 300px;
  }

  .project-img-landscape {
    width: 300px;
  }
}