styles.css

/* styles.css */

body,
html {
  height: 100%;
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;
}

* {
  box-sizing: border-box;
}

.bg-image {
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.img1 {
  background-image: url("images/wallhaven-3zgz2y_3840x2160.png");
}
.img2 {
  background-image: url("images/wallhaven-dpo38l.jpg");
}
.img3 {
  background-image: url("images/img_lights.jpg");
}
.img4 {
  background-image: url("images/img_nature.jpg");
}
.img5 {
  background-image: url("images/img_forest.jpg");
}
.img6 {
  background-image: url("images/img_woods.jpg");
}

.videor {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.bg-text {
  background-color: rgba(0, 0, 0, 0.4);
  color: rgb(207, 207, 207);
  font-size: 80px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
  width: 100%;
  padding: 20px;
}

img {
  height: auto;
  width: 100%;
}

.footer-text {
  font-style: italic;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  text-align: center;
  font-size: 20px;
  margin: 5px;
  background-color: azure;
}