@import url('https://fonts.googleapis.com/css?family=Cabin&display=swap');

body {
  background-color: #121212; /* Dark background color */
  color: #fff; /* Light text color */
  font-family: 'Cabin', sans-serif;
  margin: 0;
  padding: 0;
}

header {
    background-color: #333; /* Dark background color */
    color: white; /* Text color */
    text-align: center; /* Center align text */
    padding: 20px 0; /* Add padding top and bottom */
}

header h1 {
    font-family: 'Cabin', sans-serif; /* Set font to Cabin, fall back to sans-serif */
    font-size: 32px; /* Adjust font size as needed */
    margin: 0; /* Remove default margin */
}

.projects-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px auto; /* Center the container horizontally */
}

.project {
  background-color: #333; /* Darker background for each project */
  width: 256px; /* Set maximum width */
  padding: 20px;
  margin: 10px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); /* White shadow for contrast */
  font-family: 'Cabin', sans-serif; /* Set font to Cabin, fall back to sans-serif */
  transition: transform 0.3s ease; /* Add transition effect for smoother animation */
}

.project:hover {
  transform: scale(1.05) skew(1.5deg, -1.5deg); /* Scale up by 5% and skew slightly */
}

.project img {
  max-width: 100%; /* Ensure image doesn't exceed its container's width */
  height: auto; /* Maintain aspect ratio */
  width: 250px; /* Set fixed width */
  height: 150px; /* Set fixed height */
  border-radius: 5px;
}

.project img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}

.project h3 {
  margin-top: 10px;
}

.project p {
  margin-top: 5px;
}

.project a {
  color: #e2ecfc; /* Slightly different color for the link */
  text-decoration: none; /* Remove underline */
}

.project a:hover {
  color: #ffffff; /* Change color on hover to make it more noticeable */
}

.project a:visited {
  color: #e2ecfc; /* Color for visited link */
}