html {
  position:relative;
  min-height: 100%;
}

body{
    background-color: #f0e6ea;
     padding-bottom:20px;   /* Height of the footer */
    
}

h1{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 2.5rem;
    color: #2a222c;
}
h2{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 2.1rem;
    color: #272329;
}

main {
  width: 90vw;
  margin: 0 auto;
  padding: 30px 20px;
  
}
  /* Style the content */
article {
    padding: 20px;
    margin-bottom:5px;
    
        
  }

  article p{
    margin-top: 10px;
    line-height: 24px;
   
  }

  /*  styling the header    */
  header {
    height: 100px;
    background-color:#272841;
    position: relative;   
    text-align: center;  
}

header h1 ,h2{
    
  color: #ccc;

}

/*  styling img element   */
img{
  width: 20%;
  margin: 2%; 
  float: left; /* float left so text can go around   */
}
section{
  padding: 1%;
  margin: 1%;
  max-height: 400px;
  background-color: rgb(122, 170, 192);
  float: left; /* float to the left so the image can be inside the section element   */
  
}



 /* Style the footer */
footer {
  font-size: 14px;
  color: white;
  text-align: center;
  width: 100%;
  margin-top: 1%;
  padding: 20px;
  position:absolute;
  bottom: 0;
  background:rgb(34, 44, 54);
}

  
 
/*  bootstrap custom nav background color       */

.navbar-custom{
  
  padding-left: 120px; /* align novbar witht section element */
  padding-right: 120px; /* align novbar witht section element */
  margin: 5px;
  font-size: 1.1rem;
  
}

/* ------------------------ ***** viewport screens for mobile devices  ****   ------------------------ */
@media (min-width:300px) and (max-width:986px) {
  /* navbar - in crease the font size of the menu  */

  
   /*  change the navbar font size*/
   .navbar-custom { width: 100vw; font-size: 1.1rem; 
    padding-left: 0;padding-right: 0px; margin:0px -5px 0 -5px /* reset the left and right padding to increase the width */
  }
  
   .navbar-custom li { font-size: .9rem; }

/* -------- change the font for the header -------  */
 
 header h1{  font-size: 1.5rem; }
 header  h2{  font-size: 1.2rem; }

 article { width: 100%; height: 80vh; padding-bottom:  5px ;background-color: rgb(243, 212, 146);}

 section{ max-height: none; margin: 0 auto; background-color: transparent  }

 section h1{ font-size: 1.5rem; }

 section p{   font-size: 16px; line-height: 24px; }
  
  /* remove image from page */
  #a-image{ display: none;  }

 
 

  footer{
   font-size: 16px;
   width: 100vw;
   height: auto;
    position:relative;
    bottom: 0;
  }
  } /*------------------ @media  480px End-------------------------------------------------------*/
   
/* ---------------------- viewport screen for tablets  ------------------------------------------ */
@media (min-width:987px) and (max-width:1100px) {

  
  p{
    font-size: 18px;
  }

  article{
    width: 100%;
    height: 100vh;
  }
  section{
    width: 100%;
   max-height: none;
    margin-left: 0;
    margin-right: 0;
   
  }

  /* -------- change the font for the header -------  */
 
 header h1{  font-size: 2.2rem; }
 header  h2{  font-size: 1.5rem; }


 section h1{ font-size: 1.5rem;}

 section p{   font-size: 16px; line-height: 24px; }

 

/* navbar - in crease the font size of the menu  */
  .navbar-custom {
    width: 100%;   
    font-size: 1.5rem;
    
  }

  .navbar-custom li 
   {
    font-size: 1.1rem;
  }
 
  footer p{
   font-size: 14px;
    position:relative;
    
    bottom: 0;
  }

} /* @media  987px End*/