/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image: url('homeStar.png');
  color: black;
  font-family: Verdana;
  /*display: flex;*/
  /*justify-content: center;*/
  /*align-items: center;*/
  
}

h1{
  margin-right: 15%;
  margin-left: 15%;
  }

p{
  margin-right: 15%;
  margin-left: 15%;
  }

#navBar{
  background-color: #C5DCE7;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  background: #96cbec;
  font-family: "Genova";
  height: 11vh;
  z-index: 12;
  width: 100%;
  position: sticky;
}
  
#nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

}
#nav-links {
  color: black;
  text-decoration: none;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  height: 100%;
  cursor: pointer;
}


#nav-links:hover {
  background-color: #9ec2e9;
  transition: all 0.2s ease-out;
}

#nav-links.active {
    text-decoration: underline
  }

#landingContainer{
  
  width: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  }

#landing {
  background-color: #C5DCE7;
  padding:5%;
  min-height: 15vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: black;
  padding-left: 15%;
  padding-right: 15%;
  width: 50%;

}

#landingImageContainer{
  height: 15vh;
  width:15%;
  background-color:#F6F9FB;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}
#landingWords{
  margin: 2.5%;
  height: 19vh;
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

img{
  max-height: 100%;
  max-width: 100%;
  /*border-radius: 30px;*/
}

#projectCard{
  margin: 3%;
  padding:0;
  height: 60vh;
  width: 42vw;
  transition: transform .2s;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}


#projectCard:hover{
  box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.25); 
  transform: scale(1.05);
}


#cardImage{
  display: flex;
  background-color:#F6F9FB;
  justify-content: center;
  align-items: center;
  height: 60vh;
  border-radius: 10px;
}

#caseStudies{
  display:flex;
  justify-content: center;
  align-items: center;
}

#CaseStudy{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#gallery{
  display:flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

#galleryImageContainer{
  display:flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 650px;

  padding: 5px;
  
  
}

#project1Gallery{
  display: flex;
  margin-right: 15%;
  margin-left: 15%;
  justify-content:space-around;
  align-items: center;
  }
  
  #project1Photo{
  height: 450px;
  }

#galleryImage{  
  display: flex;
  background-color:#F6F9FB;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  
}

#p2Gallery{
  display:flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

#p2GalleryImageContainer{
  display:flex;
  width: 800px;
  padding: 5px;
  align-items:center;
  justify-content: center;
  
  
}
#p2GalleryProcessContainer{
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  /*width: 1000px;*/
  /*height: 500px;*/
  padding: 5px;
  
  
}