html {
  scroll-behavior: auto;
  /* height: 100%; */
}

body {
    /* background: #fff3d9; */
    /* background-image: linear-gradient(#fff3d9, #e8fdfffa,rgb(219, 236, 255)); */
    margin: 0;
    padding: 0;
  }

  /*--- navigation bar ---*/
  .navbar {
    background:#047091;
    box-shadow: 0px -20px 5px 20px #333333;

  }
  .nav-link,
  .navbar-brand {
    color: #fff;
    cursor: pointer;
  }


  .nav-link {
    /* margin-right: 1em !important; */
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff;
    padding: 20px 0px;
    margin: 0px 20px;
    display: inline-block;
    position: relative;
    opacity: 0.75;
  }

  .nav-link:hover {
    opacity: 1;
    color: white;
    /* border-bottom: 5px solid white; */
  }
  
  .nav-link::before {
    transition: 300ms;
    height: 5px;
    left: 0;
    content: "";
    position: absolute;
    background-color: white;
  }
  
  .nav-link-fade-up::before {
    width: 100%;
    bottom: 0px;
    opacity: 0;
  }
  
  .nav-link-fade-up:hover::before {
    bottom: 5px;
    opacity: 1;
  }
  .navbar-collapse {
    justify-content: flex-end;
  }
  
    /*--- Home ---*/
  .header {
    background-image: url("background3.jpg");
    background-size: cover;
    background-position: center;
    position: relative;
    width: 100vw; 
    height: 100vh !important; 
    z-index: 1; 
    max-width: 100%;  
  }

   .description {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -55%);
    text-align: center;
    padding-top: 120px;
  }
  
  .description h1 {
    margin-left: 0;
    color: #ffaa2b;
    border: 5px solid#047091;
    border-radius: 10px;
    /* background: #fcf9ec; */
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: Franklin Gothic Medium,Franklin Gothic,ITC Franklin Gothic,Arial,sans-serif;
  }
  
  .description p {
    color: #047091;
    font-size: 1.3rem;
    line-height: 1.5;
  }

    /*--- All Content Sections ---*/

    /* All section containers (as one) */
    .Content {
    position: relative;
    text-align: center;
    background-color: #fff3d9;
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 10px;

  }
  /* all sections (separately) */
  .Content section {
    color: #047091;
    left: 50%;
    text-align: 40%;
    padding-left: 10px;
    padding-right: 10px;


  }
  /* All section headings (Experience, Projects etc.) */
  .Content h1 {
    color: #a4bbeb;
    font-family: Franklin Gothic Medium,Franklin Gothic,ITC Franklin Gothic,Arial,sans-serif;
  }

  /* All section subheadings */
  .Content h2 {
    color: #047091;
    font-size: 1.3rem;
    line-height: 1.5;
  }

  /* All section text */
   .Content p1 {
    color: #047091;
    font-size: .7 rem;
    line-height: 1.5;

  }

  /* Experience section */
  #Experience {
    scroll-padding-top: 50px;
    /* display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    grid-auto-rows: minmax(50px, auto); */

  }
  /* Experience columns: Product Co., Mazzo, JP Morgan */
   /* Heading: My Experience */
  #Experience h1 { 
    padding-top: 100px;
  }
  
  #Experience1 {
    /* grid-column: 1; */
    background-color:  #fff7e8;
    border: 7px solid#94c4ec;
    border-radius: 3px;
    padding: 10px;
    margin: 2px;

  }
  #Experience2 {
    /* grid-column: 2; */
    background-color: #fff7e8;
    border: 7px solid#53acc7;
    border-radius: 3px;
    padding: 10px;
    margin: 2px;

  }
  
  #Experience3 {
    /* grid-column: 3; */
    background-color: #fff7e8;
    border: 7px solid#2185a3;
    border-radius: 3px;
    padding: 10px;
    margin: 2px;

  }
  

  /* Project section */
    #Projects {
      /* display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 10px;
      grid-auto-rows: minmax(50px, auto); */
  
    }
  /* Project columns: This website, knock-knock joke */
   /* Heading: My Projects */

  #Projects h1 { 
    padding-top: 100px;
  }
  
  #Project1 {
    /* grid-column: 1; */
    background-color:  #fff7e8;
    border: 7px solid#94c4ec;
    border-radius: 3px;
    padding: 10px;
    margin: 2px;

  }
  #Project2 {
    /* grid-column: 2; */
    background-color: #fff7e8;
    border: 7px solid#53acc7;
    border-radius: 3px;
    padding: 10px;
    margin: 2px;

  }
  #Project3 {
    /* grid-column: 3; */
    background-color: #fff7e8;
    border: 7px solid#2185a3;
    border-radius: 3px;
    padding: 10px;
    margin: 2px;

  } 

  /* Fun section */
  #Fun {
    /* display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    grid-auto-rows: minmax(50px, auto); */

  }
/* Fun columns: Guitar, writing */
 /* Heading: Fun! */

#Fun h1 { 
  padding-top: 100px;

}

#Fun1 {
  /* grid-column: 1; */
  background-color:  #fff7e8;
  border: 7px solid#94c4ec;
  border-radius: 3px;
  padding: 10px;
  margin: 2px;

}
#Fun2 {
  /* grid-column: 2; */
  background-color: #fff7e8;
  border: 7px solid#53acc7;
  border-radius: 3px;
  padding: 10px;
  margin: 2px;


}
#Fun3 {
  /* grid-column: 3; */
  background-color: #fff7e8;
  border: 7px solid#2185a3;
  border-radius: 3px;
  padding: 10px;
  margin: 2px;
} 

ul {
  list-style-position: inside;
  margin-left:0;
  padding: 0;
}
 /* Connect section */

 #Connect {
  border: 5px solid#047091;
  border-radius: 10px;
  padding: 15px;
  max-width: 500px;

 }

#Connect h3{
  /* background: #047091;
  border: 5px solid#047091;
  border-radius: 10px; */
  font-family: Franklin Gothic Medium,Franklin Gothic,ITC Franklin Gothic,Arial,sans-serif;
  font-size: 3rem;
  color: #047091;
}


  /*social button links*/
  .socials {
    padding-top: 20px;
  }
  /* github button */
  .github-btn {
    padding-right: 17px;
    padding-left: 10px;
  }


  #footer {
    background: #fff3d9;
    padding-top: 50px;
    text-align: center;
  }

  #footer p {
    margin:0;
  }
    /*--- Deals with Resizing (resizing windows, viewing on mobile) ---*/

  @media (max-width: 900px) {

    .description {
      left: 0;
      padding: 20px;
      position: absolute;
      top: 20%;
      transform: none;
      text-align: center;
    }
    
    .description h1 {
      font-size: 2em;
    }
    
    .description p {
      font-size: 1.2rem;
    }
    
    .features {
      margin: 0;
    }
  
  }