:root {
  --primary-color: rgb(34, 31, 31);
  --secondary-color: #f4f4f4;
}
body,
html {
  color: #666;
  font-size: 17px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  height: 100%;
  line-height: 1.6;
  margin: 0;
}
.img1,
.img2,
.img3 {
  background-position: center;
  background-size: cover;
  position: relative;
  background-attachment: fixed; /* this makes the magic */
  background-repeat: no-repeat;
}

.img1 {
  background-image: url("../src/images/img1.jpg");
  min-height: 100%;
  opacity: 0.9;
}

.img2 {
  background-image: url("../src/images/img2.jpg");
  min-height: 500px;
  opacity: 0.8;
}

.img3 {
  background-image: url("../src/images/img3.jpg");
  min-height: 500px;
  opacity: 0.7;
}

.text {
  color: var(--secondary-color);
  font-size: 30px;
  letter-spacing: 5px;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 50%;
  width: 100%;
}
.text .border {
  background-color: var(--primary-color);
  color: var(--secondary-color);
  padding: 20px;
}
.text .border-trans {
  background-color: transparent;
}

.section {
  text-align: center;
  padding: 60px 80px;
}

.section-light {
  background-color: var(--secondary-color);
}
.section-dark {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

.photo-source {
  color: var(--secondary-color);
  font-size: 20px;
  position: absolute;
  text-align: center;
  text-transform: none;
  top: 50%;
  width: 100%;
}

.photo-source a {
  color: var(--secondary-color);
  text-decoration: none;
}

@media (max-width: 768px) {
  .text {
    font-size: 25px;
  }
  .photo-source {
    font-size: 10px;
  }
  .img1,
  .img2,
  .img3 {
    background-attachment: inherit;
  }
}