/* styles.css */

/* General page styling */
html {
  scroll-behavior: smooth;
}

/* Container for the animated background shapes */
.background-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

/* Styling for the individual background shapes */
.background-shape {
  position: absolute;
  filter: blur(30px);
  opacity: 0.5;
  color: #D9E3FC; 
}

/* Dark mode styling for shapes */
.dark .background-shape {
    color: #1E293B;
}

/* Specific positioning for your new shapes */
#shape-1 {
  top: 5%;
  left: 10%;
  width: 300px;
  height: 300px;
  animation: blob-1; 
}

#shape-2 {
  bottom: 5%;
  right: 10%;
  width: 350px;
  height: 350px;
  animation: blob-2;
}

/* Hover effect for project cards */
.project-card {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* New rule for using the PillPal SVG as a CSS mask */
.mask-pillpal {
  mask-image: url('resources/pillpal_icon.svg');
  -webkit-mask-image: url('resources/pillpal_icon.svg'); /* For Safari/Webkit browser compatibility */
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
}