/* 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-color: Lavender;
  font-family: Garamond, sans-serif;
  color: darkblue;
}


h1 {
  color: darkblue;
  font-size: 36px;
  text-align: center;
  margin-bottom: 5px; 
  font-family: Verdana, serif;
}


h2 {
  color: slateblue;
  font-size: 15px;
  text-align: center;
  margin-top: 0; 
  font-family: Verdana, serif;
}

h3 {
  color: slateblue;
  font-size: 15px;
  text-align: center;
  margin-top: 10; 
  margin-bottom: 30px;
  font-family: Verdana, serif;
}

/* LINKS */
a {
  color: white;
}


.divider {
  font-size: 24px;
  font-weight: lighter;
  margin: 0 10px;
  vertical-align: baseline;
  line-height: 24px;
}

.header-box {
  border: 4px solid darkblue;
  padding: 40px 40px;      /* add vertical and horizontal space */
  border-radius: 8px;
  margin: 30px auto;       /* center horizontally, space vertically */
  background-color: #f0f8ff;

  text-align: center;      /* center text horizontally */
}


.page-container {
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
  height: 70vh;           /* full viewport height */
  flex-direction: column;
}


.bg-section {
  background-image: url('unsplash-mm.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 300px; /* Make sure it has height */
  padding: 40px; /* Padding and text color */
}



.bg-box {
  position: relative;
  padding: 10px 40px;
  margin: 30px auto;
  text-align: center;
  overflow: hidden;
  color: white;
  background-color: slateblue;
  border-radius: 8px;
  font-family: Garamond, serif;
  font-size: 16px;
}





/* Layout the section as a grid */
.portfolio {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 columns */
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

/* Each item: position relative for overlay */
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

/* Image style and blur effect on hover */
.gallery-item img {
  width: 100%;
  transition: filter 0.3s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

.gallery-item:hover img {
  filter: blur(4px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

/* Title overlay, hidden by default */
.title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: white;
  background: rgba(0, 0, 0, 0.6);
  padding: 8px 16px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.3s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

/* Show title on hover */
.gallery-item:hover .title {
  opacity: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}