/* Keyframes for fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
} 

/* src/Home.css */
.home-title {
  color: #5a8187;
  font-size: 48px;     /* Increased font size for heading */
  margin-bottom: 30px; /* Add some space below the heading */
}

.home-container {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center;     /* Center vertically */
  height: 100vh;           /* Set the height to the full viewport */
  flex-direction: column;  /* Stack elements vertically */
  animation: fadeIn 1.5s ease-in-out; /* Add fade-in animation */
}

/* Container for buttons */
.button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;  /* Add some space between buttons */
}

/* Style the buttons */
.home-button {
  width: 200px;              /* Increased width */
  padding: 15px 30px;        /* Increased padding for a bigger button */
  background-color: #5a8187; /* Initial background color */
  color: white;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  font-size: 20px;           /* Larger font size */
  transition: all 0.3s ease; /* Smooth transition on all properties */
}

button.gh-button {
  background-color: black;
}

/* Style the subtitle */
.home-subtitle {
  color: brown;
}

/* Hover effect for buttons */
.home-button:hover {
  background-color: rgb(110, 63, 63) !important; /* Change the background color on hover */
  color: #ffffff !important;            /* Change text color on hover */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow effect */
}

/* HTML and body styles */
html, body {
  height: 100%;
  margin: 0;
}

body {
  background-image: url('../public/background.jpg'); /* Point to the image file in the public folder */
  background-size: cover;                   /* Scale image to cover the full screen */
  background-position: center;              /* Center the background image */
  background-repeat: no-repeat;             /* Prevent repetition of the image */
  animation: fadeIn 1.2s ease-in-out; /* Add fade-in animation for the background */
}
