html {
  scroll-behavior: smooth;
}

body { 
  font-family: Helvetica, Arial, sans-serif;
  background-color:  rgb(0, 110, 255);
  background-image: url(../img/background.jpg);
  /* background-repeat: no-repeat; */
  background-attachment: fixed;
  background-size: 100%;
}

.container-fluid{
  padding: 0rem 2rem;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

/* navbar */
.navbar{
  /* background: linear-gradient(180deg, rgb(0, 153, 255), white 10%,white 90%, rgb(0, 153, 255)); */
  background: white;
  border-bottom: solid #3d68ad;
  padding: 0% 10%;
}

.navbar .nav-link, .dropdown-item {
  padding: 0rem 0.5rem;
  white-space: nowrap;
  font-weight: bold;
  color: rgb(40,103,178) !important;
}

.navbar .nav-link:hover, .dropdown-item:hover {
  color: rgb(255, 255, 255) !important;
  /* text-shadow: 2px 2px 10px rgb(40,103,178); */
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2) 10%, rgba(0, 0, 0, 0.2) 90%, rgba(0, 0, 0, 0));
}


/* to avoid overlapping header */
main{
  margin-top: 3.875rem;
  min-height: 20rem;
}

main *{
  scroll-margin-top: 4rem;
}


/* footer */
footer{
  background: whitesmoke;
  border-top: solid #3d68ad;
  width: 100%;
}

footer [class*="col-"]{
  vertical-align: top;
}

footer ul{
  list-style: none;
}

footer ul li{
  padding: 0.1rem 1rem;
}

footer *{
  color: rgb(40,103,178);
}

footer a:hover{
  font-style: italic;
}

@media only screen and (max-width: 768px){

  h2{
      font-size: 1.8rem;
  }

  h3{
      font-size: 1.5rem;
  }
}