body {
  margin: 0; /* Remove default margins */
  padding: 0;
  background: 
    url('pixel_art_assets/purple clouds/4.png') no-repeat center center / cover,
    url('pixel_art_assets/purple clouds/3.png') no-repeat center center / cover,
    url('pixel_art_assets/purple clouds/2.png') no-repeat center center / cover,
    url('pixel_art_assets/purple clouds/1.png') no-repeat center center / cover;
  height: 100vh; /* Full viewport height */
  width: 100vw; /* Full viewport width */
  overflow: hidden; /* Prevent scrolling if not needed */
  text-align: center;
  color: white;
  font-family: 'CodersCrux', sans-serif;
  font-size: 24px; 
}

@font-face {
  font-family: 'CodersCrux';
  src: url('fonts/coders_crux.woff') format('truetype');
  font-weight: normal;
  font-style: normal;
}

header {
  padding: 20px;
}

.gif-container img {
  width: 200px;
  margin: 20px 0;
}

.buttons .btn {
  display: inline-block;
  background: #7e86b0;
  color: white;
  padding: 10px 20px;
  margin: 10px;
  text-decoration: none;
  border-radius: 5px;
  transition: background 0.3s ease;
}

.buttons .btn:hover {
  background: #ffd04f;
}

footer {
  position: absolute;
  bottom: 5px;
  padding: 5px 5px;
}

.projects-page {
  display: flex;
  flex-direction: column; /* Stack projects vertically */
  gap: 20px; /* Space between projects */
  padding: 20px;
}

.project {
  background: #ffffff; /* White background */
  border: 2px solid #feb3d1; /* Pink border */
  border-radius: 10px; /* Rounded corners */
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1), 
              -5px -5px 15px rgba(255, 255, 255, 0.8); /* Beveled effect */
  padding: 20px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.project:hover {
  transform: translateY(-5px); /* Slight lift effect on hover */
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2), 
              -5px -5px 20px rgba(255, 255, 255, 0.9); /* Enhanced shadow */
}

.project h3 {
  margin: 0;
  color: #5faee1; /* Light blue heading */
}

.project p {
  color: #333333; /* Darker text for contrast */
  font-size: 1rem;
  margin: 10px 0;
}

.project .btn {
  display: inline-block;
  padding: 10px 20px;
  background: #7e86b0; /* Light blue button */
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-size: 0.9rem;
  transition: background 0.3s ease;
}

.project .btn:hover {
  background: #ffd04f; /* Yellow hover effect */
}
.projects-scroll-container {
  width: 80%; /* Adjust to your preference */
  max-width: 800px;
  max-height: 60vh; /* Limits the height to 80% of the viewport */
  margin: 0 auto; /* Centers the container */
  padding: 20px;
  overflow-y: scroll; /* Enables vertical scrolling */
  background: rgba(255, 255, 255, 0.1); /* Semi-transparent white background */
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  border: 1px solid rgba(255, 255, 255, 0.5); /* Optional translucent border */
  backdrop-filter: blur(5px); /* Adds a slight blur to enhance readability */
}
.project-item {
  margin-bottom: 20px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.1); /* Slightly more opaque background for each project */
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Individual project shadow */
}

.projects-container {
  max-width: 800px; /* Restricts width but allows flexible height */
  margin: 0 auto;
  background: white;
  border: 2px solid #feb3d1; /* Pink border */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  padding: 20px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-y: auto; /* Adds a scrollbar if content overflows vertically */
  max-height: 68vh; /* Sets a maximum height */
}


.projects-container h2, .projects-container h3 {
  color: #5faee1;
  margin-bottom: 10px;
}

.projects-container p {
  color: #555;
  line-height: 1.6;
}

.projects-title {
  font-size: 24px; /* Larger font for title */
  font-weight: bold;
  margin-bottom: 10px; /* Spacing below the title */
}

.projects-screenshots .screenshot-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 20px;
}

.projects-screenshots img {
  width: 100%;
  max-width: 200px;
  border-radius: 5px; /* Add rounded corners to media */
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
}

.projects-video video {
  width: 100%;
  max-width: 600px;
  border-radius: 10px; /* Add rounded corners to media */
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
  margin-top: 10px;
  margin-bottom: 20px;
}