.home {
  position: relative;
  height: 100vh;
  background-image: url(../images/welcome.jpg);
  background-size: cover;
  background-position: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  animation: fadeInBG 2s ease-in forwards;
  opacity: 0;
}

.home-container {
  position: relative;
  z-index: 2;
  padding: 2rem;
} 

.home-container h1 {
  font-size: 5vw;
  color : white;
  opacity: 0;
  animation: fadeInOnly 5s ease forwards;
  animation-delay: 2s;
  margin : 0;
}

.home-container p {
  font-size: 2.5vw;
  color : white;
  opacity: 0;
  animation: fadeInOnly 5s ease forwards;
  animation-delay: 2s;
  margin : 0;
}

.home-container button {
  border : none;
  background: none;
  border : solid 1px rgba(255,255,255,0.9);
  background-color: rgba(255,255,255,0.9);;
  color : black;
  border-radius: 50px;
  padding: 20px 40px;
  font-weight: 600;
  font-size: 1.5vw;
  margin-top : 70px;
  cursor : pointer;
  opacity: 0;
  animation: fadeInOnly 4s ease forwards;
  animation-delay: 4s;
}

.home-container button:hover {
  background-color: transparent;
  color : white;
}

@keyframes fadeInBG {
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInOnly  {
  to {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .home-container h1 {
    font-size: 6.5vw;
  }
  .home-container p {
    font-size: 4vw;
  }

  .home-container button {
    font-size: 3vw;
  }
}