@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&display=swap');

:root {
  --underline-color: #57bb8a; /* special green */
  --navbg-color: #4f474e; /* kind of taupe */
}

.roboto-font {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  /* font-weight: <weight>; */
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

html {
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  background-color: #eaebe6;
  line-height: 1.3;
}

h1 {
  text-align: center;
  font-size: 5em;
  color: white;
  padding: 2em 1em 0.67em;
  margin: 0;
}

p, ul {
  font-size: 1.1em;
  margin-top: 0;
}

img, iframe {
  width: 100%;
}

#banner {
  background-image: url('banner_heading_for_pro_website.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  /* darken image for better text readability */
  background-color: rgba(0, 0, 0, 0.3);
  background-blend-mode: darken;
    /* green bottom border */
  border-bottom: 10px solid var(--underline-color);
}

#banner.scrolled {
  border-style: none;
}

#navcontainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 5px;
  background-color: transparent;
  transition: background-color 0.3s ease;
  z-index: 1000;
}

#navcontainer.scrolled {
  background-color: var(--navbg-color);
  /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); */
}

#pageslist {
  float: right;
  list-style-type: none;
  margin: 0;
  padding: 0;
  /* overflow: hidden; */
}

#pageslist li {
  /* float: left; */
  display: inline-block;
}

#navcontainer a {
  display: block;
  font-size: 1.2em;
  color: white;
  text-decoration: none;
  margin: 0 15px;
  padding: 4px 0;
}

#pageslist a div {
  padding: 0 2px;
  border-bottom: 7px solid transparent;
}

#pageslist a.active div {
  border-bottom-color: var(--underline-color);
}

#navcontainer > a {
  /* float: left; */
  display: inline-block;
  font-size: 1.5em;
  font-weight: 200;
  padding-top: 3px;
}

section h2 {
  font-size: 2.5em;
  font-weight: 200;
  text-align: center;
  margin: 3%;
  padding: 0.5em;
  background-color: white;
}

article {
  font-family: Arial, Helvetica, sans-serif;
  background-color: white;
}

article header h2 {
  font-size: 1.5em;
  margin: 0 0 1em;
  padding: 0 0.6em;
}

article#about header h2 {
  text-align: center;
}

article .body {
  padding: 0 0.6em;
}

article .body h2 {
  font-size: 1.15em;
  margin-top: 2em;
  margin-bottom: 1em; 
}

article .body h3 {
  font-size: 1.1em;
  font-weight: normal;
  margin-top: 1em;
  margin-bottom: 0.4em;
}


@media only screen and (min-width : 768px) {
  
  main article {
    float: left;
    width: 56%;
    margin-left: 3%;
  }

  article#about {
    float: right;
    width: 36%;
    font-size: 0.85em;  
    margin-right: 3%;
  }

}

@media only screen and (max-width : 767px) {
  
  h1 {
    font-size: 2.5em;
  }
  
  section h2 {
    font-size: 1.5em;
  }
  
}