/*
    Student Name: helen
    Date: 11/19/2024
    File Name: styles.css
*/



.hero {
  background-image: linear-gradient(
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0.5)
  ),
  url(images/baby-hawk.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 100vh; 
  position: relative;
}

/* Style for the welcome class */
.welcome {
  position: absolute;
  top: 20%;
   
  transform: translateX(-50%); 
  text-align: center; 
  color: #fff; 
  padding: 1em;
}

/* Style for the display-1 class */
.display-1 {
  font-size: 4em;
  font-weight: bold; 
}

/* Style for the bg-brown class */
.bg-brown {
  background-color: #2a1f14;
}

/* Media Query for Tablet Viewport */
@media (min-width: 768px) {
  .welcome {
    top: 5%; 
    left: 5%;
    transform: translateX(0); 
    padding: 2em;
    text-align: left; 
  }
}

/* Media Query for Desktop Viewport */
@media (min-width: 992px) {
  .hero {
    background-position: left; 
  }

  .display-1 {
    font-size: 8em; 
  }

  .welcome {
    left: 10%;
    padding: 1.5em; 
  }
}