/* Add this CSS to your style.css file */

html,
body {
  font-family: Arial, sans-serif;
  margin: 0;
  height: 100%; /* Ensure the body and html elements take up the full viewport height */
  background-image: url("imgs/bg.jpg"); /* Add the path to your background image */
  background-size: cover; /* Scale the image to cover the entire page */
  background-position: center; /* Center the background image */
}

header {
  text-align: center;
  padding: 10px 0;
  background: #222;
  color: #fff;
}

header p {
  font-size: 1.2em;
}

/* Add this CSS to your style.css file */

.section {
  text-align: center;
  height: 60vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Hide overflow to prevent content from showing outside the section */
  background-image: url("imgs/bg.jpg"); /* Add the path to your background image */
  color: white;
  position: relative;
  perspective: 1000px; /* Add 3D perspective */
}
#section1 {
  background-image: url("imgs/bg.jpg"); /* Add the path to your background image */
}
#section2 {
  background-image: url("imgs/bg.jpg"); /* Add the path to your background image */
}
#section3 {
  background-image: url("imgs/bg.jpg"); /* Add the path to your background image */
}
.section p {
  font-size: 1.2em;
  position: relative;
  transform: scale(0.8); /* Start with a smaller size */
  opacity: 0; /* Start with opacity 0 (invisible) */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Add smooth transition */
}

/* Add hover effect */
.section:hover p {
  transform: scale(1); /* Scale up to 1 (normal size) */
  opacity: 1; /* Fade in to full opacity */
}

.section:nth-child(even) {
  background: #f4f4f4;
}

.content {
  max-width: 800px;
}
footer {
  font-family: monospace;
  text-align: center;
  background: #222;
  color: #fff;
  padding: 20px 0;
  font-size: x-large;
}
footer p {
  font-size: 0.9em;
}

/* Add more styles for other sections and animations */