html{
  font-size: 20px;
} 
 
body {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  color: #F1FFEF;
  background-color: #090C09;
  a:link {
    color: #8FC18A;
    text-decoration: none;
  }
  a:visited {
    color: #8FC18A;
    text-decoration: none;
  }
  a:hover { 
    color: #8FC18A;
    text-decoration: none;
  }
  a:active { 
    color: #8FC18A;
    text-decoration: none;
    }
}

/* hero stuff */
#heroBar {
  background: #090C09;
  height: 20vh;
  max-height: 80px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 3vw 0 3vw;
}

#heroTitle {
  color: #F1FFEF;
  display: flex;
  align-items: left;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 500;
}

#heroMenu {
  color: #F1FFEF;
  display: flex;
  flex-direction: row;
  align-items: right;
  padding: 0 0 0 3vw;
  margin: 0 0 0 0;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 500;
}

#heroLink {
  background-image: url("images/foggy.jpg");
  background-size: cover;
  background-position: center center;
  display: block;
  align-items: center;
  text-align: center;
  line-height: 40vh;
  height: 50vh;
  margin: 0;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 500;
  color:#0E0C1D;
}

#heroImage {
  background-image: url("images/foggy.jpg");
  background-size: cover;
  background-position: center center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 50vh;
  margin: 0;
  pointer-events: none;
  font-size: 1.5rem;
}

/* bars and contact stuff */
.darkBar {
  color: #F1FFEF;
  background: #090C09;
  height: 20vh;
  max-height: 80px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 3vw 0 3vw;
}

.darkBlock {
  color: #F1FFEF;
  background: #090C09;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.darkEssayBlock {
  color: #F1FFEF;
  line-height: 1.4;
  text-align: left;
  background: #090C09;
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: center;
  padding: 0 15vw 3vw 15vw;
}

.lightBar {
  color: #F1FFEF;
  background: #192018;
  height: 20vh;
  max-height: 80px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 3vw 0 3vw;
}

.barTitle {
  color: #F1FFEF;
  display: flex;
  align-items: left;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 500;
}

.barContent {
  display: flex;
  flex-direction: row;
  align-items: right;
  padding: 0 0 0 3vw;
  margin: 0 0 0 0;
}

.barDetails {
  color: #F1FFEF;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 500;
}

/* image gallery stuff */
#imageGallery {
  background: #090C09;
  color: #F1FFEF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#imageGalleryItem {
  background: #090C09;
  color: #F1FFEF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 2% 7% 2%;
  pointer-events: none;
}

#imageGalleryImage {
  height: auto;
  width: 90vw;
  max-width: 1000px;
  pointer-events: none;
}

/* Carousel Navigation */
.carousel-nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0;
  background-color: #090C09;
  color: #F1FFEF;

}

.carousel-button {
  padding: 0.5rem;
  border: 1px solid #8FC18A;
  border-radius: 0px;
  background: none;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  background-color: #090C09;
  color: #F1FFEF;
  height: clamp(40px, 7vh, 60px);
  width: 20vw;
}

.carousel-button:hover {
  background-color: #475E45;
  color: #F1FFEF;
}

.carousel-button.active {
  background-color: #475E45;
  color: #F1FFEF;
}
/* head shot card stuff */
#pacPic {
  width: 150px;
  height: 200px;
  border-radius: 0px;
  object-fit: cover;
  margin: 0 0;
  border: solid 4px #475E45;
  /* border-left: solid 4px #283618; */
}

#headshotDiv {
  background-color: #090C09;
  display: flex;
  justify-content: center;
}

#card {
  width: 450px;
  height: 210px;
  padding: 3%;
  
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  
  background-color: #090C09;

  border-radius: 0px;
  border-bottom: solid 7px #475E45;
  border-left: solid 7px #475E45;
}

#headshotText {
  color: #F1FFEF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  margin: 0 2% 0 5%;
  font-size: 1rem;}

/*
Color palletes
coolors.co for reference

Purple colors, dark to light
#0E0C1D
#17122B
#342C67
#9792C3
#483D8B
#E6E6FA

Green colors
#090C09
#192018
#242F23
#273326
#475E45
#8FC18A
#F1FFEF
#FCCD4F
*/