/* Head Classes */

body{
    

  }

  h2{
    font-family: "Farro";
    font-size: 5rem;
    
  }

  p{
    font-family: "Nunito Sans";
    font-size: 20px;
  }

/* Classes */


.notNav{
    display: grid;
    grid-template-rows: 50rem 45rem 45rem;
    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%;
   
}

.textArea{
    
    margin-top:1rem;
    margin-left: 3rem;
    margin-right: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{
    background-color: #B6DC76;
    color: rgb(255, 255, 255);
    padding: 5px 22px;
    text-align: center;
    
    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);
    margin: 10px;
    font-size: 16px;

}

.heroBox img{
   
    box-shadow: 0px 8px 16px 0 rgba(0,0,0,0.2);
    border-radius: 25px 25px 25px 25px;
    margin-left: 12rem;
    margin-top: 2rem;
    height: 40em;
    width: auto;
   
}

.heroBox2 img{
    
    box-shadow: 0px 8px 16px 0 rgba(0,0,0,0.2);
    border-radius: 25px 25px 25px 25px;
    margin-left: 12rem;
    margin-top: 2rem;
    height: 40em;
    width: auto;
   
}

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

}

.textArea h2{
  font-size: 2.5rem;

}


.heroBoxp{

    margin-left: 10%;

}

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

.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: 8em;
    width: 8em;
    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{
    
    
  
    
}

.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;
}


 /* 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: 3.5rem;
    width: 4rem;
   border-radius: 5px;
   margin-right: 15px;
  }

  .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;

} 




.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;
  


}



.heroBox img:hover {
  border: 3px solid #ffffff;
  cursor:zoom-in;

}

.heroBox2 img:hover {
  border: 3px solid #B6DC76;
  cursor:zoom-in;

}

.heroBox img{
  
}

.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);
  } 


  /* modal setup */  

  #myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
  }
  
  #myImg:hover {opacity: 0.7;}
  
  /* The Modal (background) */
  .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  }
  
  /* Modal Content (image) */
  .modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
  }
  
  /* Caption of Modal Image */
  #caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
  }
  
  /* Add Animation */
  .modal-content, #caption {  
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
  }
  
  @-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
  }
  
  @keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
  }
  
  /* The Close Button */
  .close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
  }
  
  .close:hover,
  .close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
  }
  
  /* 100% Image Width on Smaller Screens */
  @media only screen and (max-width: 700px){
    .modal-content {
      width: 100%;
    }
  }

  /* end of modal */


  
/* gallery start */

* {
  box-sizing: border-box;
  
}

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
  width:auto;
  margin-left: 5rem;
  margin-top: 5rem;

}

.container img{
  box-shadow: 0px 8px 16px 0 rgba(0,0,0,0.2);
  border-radius: 25px 25px 25px 25px;

  width:40rem;
  
}


/* Hide the images by default */
.mySlides {
  display: none;
  margin: auto;
 
}

.mySlides img{


}


/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.row{
  
margin-left: 5%;
}

/* Six columns side by side */
.column {
  float: left;
  height: 1rem;
  width:7rem;
  padding-left: 5px;
  padding-top: 5px;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

/* end of gallery */




/* 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;
    
}

#hero2{
    display: grid;
    background-color: #ffffff;
    grid-template-columns: 1fr 1fr;
    
}

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

#boxes{
   
    background-color: #B6DC76;
   
    
}


.foot{

}

.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;

}



/* 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:12em;
    margin-left: 4rem; 
    font-size: 1.1em;
  }
  
  .highlightBox img{
    height: 6em;
    width: 6em;
  
  }
  
  }
  
    
  /* 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;
    
       
      }

      
    .notNav{
        
      grid-template-rows: 60rem 55rem 50rem;
  }
    
      .buttonStyle{
    
        margin: 20px 10px;
        
    
    }
    
    .buttonStyle2{
    
      margin: 20px 10px;
    }
  
  
  
    #highlights{
      display: flexbox;
      background-color: rgb(255, 255, 255);
      grid-template-columns: 1fr;
  
  }
  
  .highlightBox{
    background-image: url('/images/backgroundCard-wide.svg');
    margin-left: 35%;
    height: 300px; 
    width: auto;  
    
  }
  
  .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%;
  
  }

  .heroBox img{
   
    margin-left: 6rem;
    margin-top: 2rem;
    height: 35em;
    width: auto;
   
}

.heroBox2 img{
    

    margin-left: 0;
    margin-top: 2rem;
    height: 35em;
    width: auto;
   
}

.container img{


  width:30rem;
  
}

.column {

  width:5rem;


}
   
 /* 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%;
  
  }

} 


}
    
    /** 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%;
    }
    #hero{

        grid-template-columns: 1fr;
        
    }

    #hero2{
   
        grid-template-columns: 1fr;
        
    }
    .profTable th {
      padding-top: 1em;
      padding-bottom: .9em;
      font-size: .8em;
    }    
  
    .heroBoxp{
  
      width: 24rem;
  
    }

    .notNav{
        
        grid-template-rows: 80rem 55rem 60rem;
    }

    .textArea{
        width: auto;
        height: auto;
        margin-bottom: 0;
     
    }

    .container{
      margin-top: 0;
      margin-left: 15%;
      
    }

    p{
      
      font-size: 20px;
    }

    .heroBox{
       
        height: auto;
        width: 20rem;
       
    }
    .heroBox2{
       
        height: auto;
        width: 20rem;
       
    }

    .heroBox img{
   

      margin-left: 18rem;
      margin-top: 2rem;
      height: 35rem;
      width: auto;
     
  }
  
  .heroBox2 img{
      

      margin-left: 15rem;
      margin-top: 2rem;
      height: 30em;
      width: auto;
     
  }

  .container img{


    width:35rem;
    margin-left: 1%;
  }
  
  .column {
  
    width:5.7rem;
  
  
  }
 


    
    }
    

    
    

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

      .notNav{
        
        grid-template-rows: 85rem 55rem 60rem;
    }



      .heroBox img{
   
        box-shadow: 0px 8px 16px 0 rgba(0,0,0,0.2);
        border-radius: 25px 25px 25px 25px;
        margin-left: 8rem;
        margin-top: 2rem;
        height: 30rem;
        width: auto;
       
    }
    
    .heroBox2 img{
        
        box-shadow: 0px 8px 16px 0 rgba(0,0,0,0.2);
        border-radius: 25px 25px 25px 25px;
        margin-left: 5rem;
        margin-top: 2rem;
        height: 25rem;
        width: auto;
       
    }


    }

    
    
    
    /** smallest mobile view
    */
    

    
    @media screen and (max-width: 600px) {
      .topnav a:not(:first-child) {display: none;}
      .topnav a.icon {
        float: right;
        display: block;
      }
      
      .notNav{
        
        grid-template-rows: 88rem 55rem 65rem;
    }

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

      
      .logoSpace{
    
        margin-left: 10%;
    }
  
    .highlightBox{
   
      margin-left: 15%;
      
      
    }
  
    .logoSpace2{
    
      display: none;
    }
  
    .heroBoxp{
      width: 22rem;
      margin-left: 5%;
  
  }
  
  .heroBox h2{
    font-size: 3em;
    margin-left: 5%;
  
  }
  
  .contactButton{
  
    width: 15em;
    margin-left:4rem;
  
    
  }
  .heroBox img{
   
      box-shadow: 0px 8px 16px 0 rgba(0,0,0,0.2);
      border-radius: 25px 25px 25px 25px;
      margin-left: 4rem;
      margin-top: 2rem;
      margin-bottom: 10px;
      height: 25rem;
      width: auto;
     
  }
  
  .heroBox2 img{
      

      padding-left: 0;
      margin-left: 2rem;
      margin-top: 2rem;
      height: 20rem;
      width: auto;
     
  }

  .container img{


    width:20rem;
    margin-left: 0;
  }
  
  .column {
  
    width:3.2rem;
  
  
  }


  }