:root{


  
  --navBarHeight:50px; /*variable to store navbar height*/
  --heroBarHeight:70px; /*variable to store heroBar height*/
  --footerHeight: 50px; /*variable to store footer height*/


  --navBarTextColor:white;  /*variable to store text color used in nav bar */



  --footerTextColor:rgb(0, 0, 0);    /*variable to store text color used in footer bar */

  --HeroBannerBGColor: aqua; /*shown if hero background image not available */
  --footerBGColor: aqua; /*shown if footer background image not available */




  
}

h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 !important;
}

p {
margin: 0 !important;
}



.nav {

 
  height: var(--navbarHeight) !important;
}



.nav-item {

    height:  var(--navbarHeight) !important;
    
}

a{ color:var(--navBarTextColor)!important;
 }

 .center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* width: 50%; */
}

.nav-link {
    padding: .5rem .5rem !important;
    align-items: center ip !important;
    color:aqua;
    
} 

#MyHeaderName {
  padding:0 0 0 25px;
}

.nav-right {
  align-content:flex-end;
}

.myNav-right {
  justify-content: flex-end;
  flex-direction: row;
}

.myNav-ItemRight{

  padding: 0px 15px 0px 15px;
  align-items: center;
  justify-content: center;
  
 }

 .display-4 {
  display: flex;
  align-items: center !important;
  justify-content: center !important;
 }

 .hero-banner 
 {
 display: flex;
 flex-wrap: nowrap;
 height: var(--heroBarHeight);
 background-size: cover;   
 background-repeat: no-repeat;
 background-position: center; 
 background-image: url("../Images/cool-background.png") ;
 background-color:Var(--HeroBannerBGColor); /* Used if the image is unavailable */
 width:100% ;
 align-items: center;
 justify-content: center;
  
 }

 .hero-banner h2 {
  padding: 0 25px 0 25px; 
 }
 



.sMain{
  display:grid;


  min-height: 500px;
  height: 70vh;
  grid-template-columns: 20% 80%;
  grid-template-areas:
  "aboutContents aboutContents "
  "Work ";
}


 
#aboutHead{
  background-color: blue;
  font-size: large;
  padding:10%
}

#aboutContents {
  background-color: yellow;
  


}

#workHead{

    background-color: green;
    font-size: large;
    padding:10%
  
}

#workContents{
  background-color: blue;
  /* display:grid; 
  grid-template-columns: 1fr 1fr 1fr; */
}


#skillHead{
  
    background-color: yellow;
    font-size: large;
    padding:10%
}

#skillContents{


  background-color: green;
}


#contact{
    display: flex;
   
   
    height: calc(var(--footerHeight));
    background-size: cover;    
    background-repeat: no-repeat;
    background-position: center; 
    flex-wrap: nowrap;

    width:100% ;
    align-items: center;
    justify-content: center;

}

.myFooter {
  /*there space between footer and bottom of body - no idea how to remove*/
  display: flex;
  position: fixed !important;
  bottom: 0;
  right: 15px;
    left: 0;
   flex-wrap: nowrap;
  height: var(--footerHeight);
  background-size: cover;   
  background-repeat: no-repeat;
   background-image: url(../images/cool-background.png);
  background-color:Var(--footerBGColor); /* Used if the image is unavailable */

}

.myFooter-right {
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
 
}

.myFooter-ItemRight{
 
    list-style-type: none; 
  
    padding: 0px 15px 0px 15px;

 
 }

 footer a {
     
    font-weight: bold;  
    font-size: 20px; 
    align-items: center;
    justify-content: center;
    color: var(--footerTextColor) !important;
 }

 footer {
  color: var(--footerTextColor) !important;
  height: var(--footerHeight);
 }

 .btn {
  font-weight: bolder !important;

 }