* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
color: #f0f0f0;
min-height: 100vh;
padding: 2rem;
/* Reverted to the last known-good background. The faulty "background-size" line is gone. */
background-color: #0f2724;
background-image: 
  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3e%3cpath d='M14 0 L0 8 V24 L14 32 L28 24 V8 Z M14 16 L0 24 V40 L14 48 L28 40 V24 Z' stroke='rgba(102, 252, 241, 0.05)' fill='none' stroke-width='1'%3e%3c/path%3e%3c/svg%3e"),
  radial-gradient(at top left, #1a4d3c, #1a3a33, #0f2724);


background-attachment: fixed;
perspective: 1500px;
}
#particles-js {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}

.container {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
z-index: 1;
}
header h1 { font-size: 3.2rem; font-weight: 600; margin-bottom: 2rem; text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); }

.card { 
width: 100%; 
padding: 2.5rem; 
border-radius: 20px; 
margin-bottom: 2rem; 
/* Enhanced glassmorphism - more transparent background */
background: rgba(255, 255, 255, 0.08); 
/* Reduced blur for better particle visibility */
-webkit-backdrop-filter: blur(15px); 
backdrop-filter: blur(15px); 
/* More subtle border */
border: 1px solid rgba(255, 255, 255, 0.15); 
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); 
transform-style: preserve-3d; 
position: relative; 
overflow: hidden; 
transition: box-shadow 0.4s ease, transform 0.4s ease; 
}

.card::before { 
content: ''; 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
background: radial-gradient( 
300px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
rgba(102, 252, 241, 0.08), 
transparent 40% 
); 
z-index: -1; 
opacity: 0; 
transition: opacity 0.4s ease-out; 
}

.card:hover::before { opacity: 1; }
.fade-in { opacity: 0; transform: translateY(30px); }
.info-box p { font-size: 1.2rem; line-height: 1.7; font-weight: 300; }
.links-container h2 { font-size: 1.5rem; margin-bottom: 1.5rem; font-weight: bold; }
.resource-grid { list-style-type: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }

.resource-grid a { 
display: flex; 
align-items: center; 
justify-content: center; 
height: 100px; 
/* More transparent background for grid items too */
background: rgba(255, 255, 255, 0.06); 
color: #fff; 
text-decoration: none; 
padding: 1rem; 
border-radius: 10px; 
font-weight: 400; 
font-size: 1.1rem; 
border: 1px solid transparent; 
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 
transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; 
/* Add subtle backdrop filter to grid items */
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}

.resource-grid a:hover { 
transform: translateY(-8px) scale(1.04); 
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3); 
border-color: rgba(255, 255, 255, 0.4); 
/* Slightly more opaque on hover */
background: rgba(255, 255, 255, 0.1);
}

.feedback-box { padding: 2rem; }
.feedback-box h3 { font-size: 1.4rem; font-weight: 600; margin-bottom: 0.75rem; }
.feedback-box p { font-weight: 300; font-size: 1.1rem; max-width: 500px; margin: 0 auto 1.5rem auto; }
.feedback-button { display: inline-block; background: rgba(102, 252, 241, 0.2); border: 1px solid rgba(102, 252, 241, 0.4); color: #fff; padding: 0.75rem 2rem; border-radius: 50px; font-weight: 600; font-size: 1rem; text-decoration: none; transition: all 0.3s ease; }
.feedback-button:hover { background: rgba(102, 252, 241, 0.4); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(102, 252, 241, 0.15); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: rgba(15, 39, 36, 0.5); }
::-webkit-scrollbar-thumb { background: rgba(102, 252, 241, 0.3); border-radius: 10px; border: 2px solid rgba(15, 39, 36, 0.5); }
::-webkit-scrollbar-thumb:hover { background: rgba(102, 252, 241, 0.5); }