* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

body {
  font-family: Baskerville;
  max-width: 100%;
  margin: 0;
  padding: 0;
  height: 100%;
  color: white;

}

/* nav color */
nav#menu {
  background-color: #264653;
  height: 85px;
  width: 100%;
  border: #000;
  position: fixed;
}

/* label */
label.logo {
  color: white;
  font-size: 35px;
  line-height: 80px;
  padding: 0 80px;
  font-weight: bold;
}

#menu ul {
  float: right;
}

#menu ul li {
  display: inline-block;
  line-height: 80px;
  margin: 0 0px;
}

#menu ul li a {
  color: gainsboro;
  font-size: 17px;
  padding: 17px 13px; /* Added units */
  border-radius: 3px;
  text-transform: uppercase;
}

a.active,
a:hover {
  background: #2a9d8f;
  transition: 0.5s;
}

section {
  height: 100vh;
  scroll-snap-align: start;  /* Snap to the start of each section */
}

#home, #aboutme, #contact, #cexpierence {
  scroll-snap-align: start;  /* Snap to the start of each section */
}
body::-webkit-scrollbar {
  width: 0;
}



#home {
  background-color: #8ab17d;
  padding-top: 80px;
  padding-top: 1px; /* stops margin collapsing */
  scroll-snap-align: start;
  border: none; /* Remove the border property */
}

#home h1 {
  text-align: center;
  margin-top: -200px; /* Adjusted margin */
  margin-bottom: 200px;
}

#aboutme {
  background-color: #e9c46a;
  padding-top: 80px;
}

#contact {
  background-color: #f4a261;
  padding-top: 15vh;
  scroll-snap-align: end;
  overflow: hidden;
  height: 100vh; /* Set a fixed height for the contact section */
}

#cexpierence {
  background-color: #e76f51;
  scroll-snap-align: end;
  padding-top: 80px;
}

.container::-webkit-scrollbar {
  width: 0; /* Reset the scrollbar width */
}

.container::-webkit-scrollbar-thumb {
  background-color: initial; /* Reset the scrollbar thumb color */
}

.container::-webkit-scrollbar-track {
  background-color: initial; /* Reset the scrollbar track color */
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

h1 {
  text-align: center;
  margin-top: -400px;
  margin-bottom: 200px;
}

.container,
.container-lg,
.container-md,
.container-sm,
.container-xl {
  max-width: 100%;
}

dl,
ol,
ul {
  margin-top: 0;
  margin-bottom: 0rem;
}

form {
  background-color: #2a9d8f;
  color: white;
  padding: 20px; /* Increased padding for more space */
  width: 60%; /* Adjust the width as needed */
  margin: 0 auto;
}

/* Update the .form-container styles */
.form-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 70%; /* Adjust the height of the form container */
  margin-top: 5vh; /* Add margin at the top to separate from the title */
}

.center-form-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Center-align form content */
.form-content {
  text-align: center;
}



.display-4 {
  text-align: center;
  margin-top: 20px; /* Adjust the margin to lower the title */
}

#home,
#aboutme,
#contact,
#cexpierence {
  height: 100vh;
}

.h1aboutme {
  text-align: center;
  margin-bottom: 2px;
}

.h1ce {
  text-align: center;
  margin-top: 125px;
}

h2 {
  margin-bottom: 50px;
}

.home {
  margin-left: 250px;
}
/* home selfie */
 .image-container{
  position: relative;
  width: 400px;
  margin-left: 700px;
  margin-top: 250px;
 }
 .selfie{
  display: block;
  width: 100%;
 }
 .overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  opacity: 0;
 }
 .overlay:hover {
  opacity: 1;
 }

 .Image__title{
  font-size: 2em;
  font-weight: bold;

 }
 .Image__description{
  font-size: 1.25em;
  margin-top: 0.25em;
 }


 #aboutme {
  text-align: center;
  overflow: hidden;
}

.h1aboutme {
  text-align: center;
  margin-top: 50px; /* Adjusted margin-top value */
}

.aboutmedisc {
  text-align: center;
  margin-top: 20px; /* Adjusted margin-top value */
}

/* das and penny pictures in about me */
.aboutme-images {
  display: flex;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto;
  margin-top: 50px;
}


.das, .penny, .provo {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  margin-bottom: 20px;
}

.image-container1,
.image-container2,
.image-container3 {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden; /* Add this to hide the overflow from the overlay */
}
.image-container1,
.image-container2,
.image-container3 {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden; /* Add this to hide the overflow from the overlay */
}

.overlay1,
.overlay2,
.overlay3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 95.1%;
  background: rgba(0, 0, 0, 0.6); /* Adjust the alpha value for transparency */
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  transition: opacity 0.3s;
  box-sizing: border-box;
}

.image-container1:hover .overlay1,
.image-container2:hover .overlay2,
.image-container3:hover .overlay3 {
  opacity: 1;
}

.image-container1:hover .overlay1,
.image-container2:hover .overlay2,
.image-container3:hover .overlay3 {
  opacity: 1;
}

.Image__title1, .Image__title2, .Image__title3 {
  font-size: 1.5em;
  font-weight: bold;
}

/* Adjust the image height to match the desired height of the das image */
.das, .penny, .provo {
  height: 400px; /* Set the height to match the desired height of the das image */
}

/* Ensure the images maintain their aspect ratio */
.das, .penny, .provo{
  width: auto;
  max-width: 100%;
}

.aboutmedisc {
  text-align: center;
}
.h1ce {
  
  margin-bottom: -5px;
  padding-bottom: 10px;
}

.h2ce {
  text-align: center;
  margin-bottom: -15px;
 
}

.h3ce{
  text-align: center;
  font-weight: bold;
  margin-top: 25px;
}

.cexpierence-images {
  display: flex;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto;
  margin-top: 50px;
}

.image-container4,
.image-container5 {
  position: relative;
  margin: 0 10px; /* Add margin for space between images */
  padding: 0;
  margin-bottom: 300px;
}

.overlay4,
.overlay5 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  opacity: 0;
  transition: opacity 0.3s;
}

.overlay4:hover,
.overlay5:hover {
  opacity: 1;
}

.Image__title4,
.Image__title5 {
  font-size: 1.5em;
  font-weight: bold;
}

.cefinal,
.wpfinal {
  height: 300px; /* Adjust the height as needed */
  width: auto;
  max-width: 100%;
}

#menu {
  background-color: #800000;
  height: 85px;
  width: 100%;
  border: #000;
  position: fixed;
  z-index: 1000; /* Set a higher z-index value */
}