/* Head Classes */

body{
    

    
  }

/* Classes */

.notNav{
    display: grid;
    grid-template-rows: 25rem 25rem 25rem;
    gap: 0px;
    margin: 0;
}

.textStyle h2{
    font-family: "Farro";
    font-size: 2rem;
}

a {
    color: white;
    text-decoration: none;
  }

.textStyle p{
    font-family: "Nunito Sans";
    font-size: 1.3em;
}

.textStyle tr{
    font-family: "Nunito Sans";
    font-size: 1.3em;
    color: white;
}

.shadow{
    background-color: #B6DC76;
    box-shadow: inset 0px 0px 3px 5px #88a852;
    
    width: 100%;
    height: 100%;
   
}

 /* Style the navigation menu */
.topnav {
    overflow: hidden;
    background-color: rgb(255, 255, 255);
  padding: none;
  margin:none;
}

 /* Hide the links inside the navigation menu (except for logo/home) */
 .topnav #myLinks {
    display: none;
  }
  
  /* Style navigation menu links */
  .topnav a {
    font-family: "Nunito Sans";
    font-size: 1.3em;
    color: white;
    padding: 10px 16px;
    float: left;
    text-decoration: none;
    text-align: center;
    
    display: block;

   
  }
  
  /* Style the hamburger menu */
  .topnav .icon {
    background-color: #B6DC76;
    display: none;
    margin-top: 1rem;
    height: 2rem;
    width: 2rem;
   border-radius: 5px;
  }

  .icon i {
    font-size: 2rem;
  }

  .topnav .icon:hover {
    background-color: #ddd;
    color: #B6DC76;
  }


.logoSpace{
    margin:auto;
  
}

.logoSpace2{
  margin:auto;

}


.logoSpace img{
    padding-right: 4rem;
    padding-left: 1rem;
}

.logoSpace2 img{

  height:auto;
  max-width: 80%;
  min-width: 30%;
  padding-left: 2rem;
}

.navBar{   
    
    padding-top: .3rem;

} 

.navContact{
    background-color: #c56d6d;
    color: rgb(255, 255, 255);
    padding: 5px 0px;
    text-align: center;
    margin-top: 1rem;
    
    text-decoration: none;
    font-family: "Farro";
    border-radius: 14px;
    border:2px solid white;
    box-shadow: 0px 8px 16px 0 rgba(0,0,0,0.2);
    height: 1.4rem;
    width: 9rem;
    font-size: 16px;
}

.navStyle{

box-shadow: 10px 10px;
}

.navLi{
    display: inline;
}



.buttonStyle{
    display: inline;
    background-color: #B6DC76;
    color: rgb(255, 255, 255);
   
    text-align: center;
    
    text-decoration: none;

    border-radius: 14px;
    border:2px solid white;
    box-shadow: 0px 8px 16px 0 rgba(0,0,0,0.2);
    margin: 15px 10px;
    

}

.buttonStyle2{
  display: inline;
  background-color: #dc7676;
  color: rgb(255, 255, 255);

  text-align: center;
  
  text-decoration: none;

  border-radius: 14px;
  border:2px solid white;
  box-shadow: 0px 8px 16px 0 rgba(0,0,0,0.2);
  margin: 15px 10px;
  


}


.topnav a.active {
    background-color: #76abdc;
    color: rgb(255, 255, 255);
  }
  
  /* Style the active link (or home/logo) */
  .active {
    background-color: #B6DC76;
    color: rgb(255, 255, 255);
  } 

.heroBox{
    background-color: #fcfcfc;
    box-shadow: 0px 8px 16px 0 rgba(0,0,0,0.2);
    border-radius: 25px 0px 0px 25px;
    margin:auto;
    height: 90%;
    width: 100%;
   
}



.heroBox h2{
    font-size: 2.5em;
    margin-left: 7%;

}


.heroBoxp{

    margin-left: 10%;

}

.highlightBox{
    background-image: url('/images/backgroundCard-1.svg');
    margin: auto;
    margin-left: 4rem;  
    background-repeat: no-repeat;
    width: 400px;
    height: 400px;
   
    
}

.highlightBox h2{
    color: white;
    margin-left: 4rem;
    margin-top: .3em; 
    margin-bottom: 0;
    font-size: 2em; 

}

.highlightBox p{    
    color: white;
    margin-top: 0.5em;
    width:14em;
    margin-left: 4rem; 
     
}

.highlightBox img{
    height: 6em;
    width: 6em;
    margin: 3em 3em 0;
}

.contactButton{

    background-color: #c56d6d;
    border-radius: 14px;
    border:2px solid white;
    box-shadow: 0px 8px 16px 0 rgba(0,0,0,0.2);
    margin-left:15rem;
    margin-top: 3rem;
    
    height: 3em;
    width: 20em;
    
}

.contactButton p{
    text-align: center;
    margin: 3%;
    font-family: "Farro";
    
    color: rgb(255, 255, 255);
    
}



.proficiencies h2{
    margin-left: 44%;
    color: white;
    text-decoration: underline;
    font-size: 2.3em;
}

.profTable{
    width: 100%;
    
}
.profTable th {
    padding-top: 1em;
    padding-bottom: .6em;
    text-shadow: 1px 1px 1px black;
}

.footer{



}

.footer li{

  display: inline;
  list-style-type: none;
  padding-right: 2rem;
}

.footerStyle{
  font-family: "Nunito Sans";
  color: #88a852;
  font-size: 1rem;
}

.footerActive{
  text-decoration: underline;

}


/* IDs */

#nav{
    display: grid;
    box-shadow: 10px 10px;
    background-color: rgb(255, 255, 255); 
      
}



#hero{
    display: grid;
    background-color: #B6DC76;
    grid-template-columns: 1fr 1fr;
    
}

#highlights{
    display: grid;
    background-color: rgb(255, 255, 255);
    grid-template-columns: 1fr 1fr 1fr;
}

#boxes{
   
    background-color: #B6DC76;
   
    
}





/* Media Query */


@media screen and (max-width: 1256px){
  .contactButton{

    margin-left:5rem;
 
}

.heroBoxp{
  margin-left: 10%;
  width: 27rem;
}

.highlightBox{
  
  margin-left: 1rem;
  width: 350px;  
}

.highlightBox p{    

  width:13em;
  margin-left: 4rem; 
  font-size: 1.1em;
}

.highlightBox img{
  height: 5em;
  width: 5em;

}

.heroBox h2{
  font-size: 2em;
}

}

  
/* shrink buttons before mobile view */
@media screen and (max-width: 1135px) {

    .topnav a {
      font-family: "Nunito Sans";
      font-size: .8em;
      color: white;
      padding: 10px 16px;
      float: left;
      text-decoration: none;
      text-align: center;
      
      display: block;
  
     
    }
  
    .buttonStyle{
  
      margin: 20px 10px;
      
  
  }
  
  .buttonStyle2{
  
    margin: 20px 10px;
  }

  .notNav{
    display: grid;
    grid-template-rows: 25rem 75rem 25rem 3rem;
    gap: 0px;
    margin: 0;
}


  #highlights{
    display: flexbox;
    background-color: rgb(255, 255, 255);
    grid-template-columns: 1fr;

}



.highlightBox{
  background-image: url('/images/backgroundCard-wide.svg');
  margin-left: auto;
  
  width: 450px;  
  
}

.highlightBox img{
  height: 6em;
  width: 6em;
  margin: 3em 2em 0;
}

.highlightBox p{
  width: 350px;
  margin-left: 2rem;
}

.highlightBox h2{
  margin-left: 2rem;
}

.proficiencies h2{
  margin-left: 40%;

}

}
  
  
  
  /** mobile view
  */
  
  @media screen and (max-width: 955px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
    .logoSpace{
  
      margin-left: 25%;
  }

  .profTable th {
    padding-top: 1em;
    padding-bottom: .9em;
    font-size: .8em;
  }    

  .heroBoxp{

    width: 24rem;

  }
  #boxes h2{
    margin-left: 26%;
  }
  
  }
  /** smallest mobile view
  */
  
  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
    
    #hero{
      display: grid;
      background-color: #B6DC76;
      grid-template-columns: 1fr;
      
    }

    .heroBox{
      border-radius: 25px 25px 25px 25px;
      width: 80%
    }
    
    .logoSpace{
  
      margin-left: 10%;
  }

  .highlightBox{
 

    margin-top: 6px;
    margin-bottom: none;
    
    
  }

  .logoSpace2{
  
    display: none;
  }

  .heroBoxp{
    width: 22rem;
    margin-left: 5%;

}

.heroBox h2{
  font-size: 1.7em;
  margin-left: 5%;
  width: 11em;
}

.contactButton{

  width: 15em;
  margin-left:4rem;

  
}

.profTable th {
  padding-top: 1em;
  padding-bottom: .9em;
  font-size: .67em;
}   

.proficiencies h2{
  
}
  


  }
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 975px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    
    .proficiencies h2{
      margin-left: 35%;
    
    }

  } 


  /** THE END*/

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

    .logoSpace img{
      height: 60px;
    }

     .heroBoxp{
    margin-left: 13%;
    width: 19rem;
    text-align: center;
  }

.textStyle p{
    font-family: "Nunito Sans";
    font-size: 1.2em;
}

  .contactButton{

 
    margin-top: 1rem;
    margin-left: 19%;
    
}

.textStyle tr{
  
    font-size: 1.1em;
   
}

.heroBox{

    border-radius: 0;
    margin:auto;
    height: 90%;
    width: 100%;

}

.heroBox h2{
width: 70%;
margin-left: 10%;
   text-align: center;
}

.highlightBox{
  width: 380px;

}

.highlightBox img{
  display: none;;
}

.highlightBox h2{
  margin-top: 15%;
}

.highlightBox p{
  width: 18rem;
}
.notNav{

   grid-template-rows: 25rem 75rem 21rem 3rem;
  
}

.footer li{

  display:inline-table;
  list-style-type: none;
  padding-right: 3rem;
  
  padding-bottom: 1rem;
}

}