fix arrows HP

docs/.vuepress/components/HumanPractices.vue

@@ -2,8 +2,9 @@
   <div>
     <!-- Introduction Section -->
     <div class="card mb-2" style="background-color: #e3f2fd;">
-      <div class="card-header" @click="toggleSection('introduction')">
-        <h2 style="cursor: pointer; color: #396d7e;">Introduction to Natronaut’s Human Practices: Answering the Important Questions</h2>
+      <div class="card-header" @click="toggleSection('introduction')" style="display: flex; align-items: center; justify-content: space-between; cursor: pointer;">
+        <h2 style="color: #396d7e;">Introduction to Natronaut’s Human Practices: </h2>
+        <span>{{ openSection === 'introduction' ? '▲' : '▼' }}</span>
       </div>
       <div v-if="openSection === 'introduction'" class="card-body" style="background-color: #e5efdf;">
         <h3 style="color: #396d7e;">Designing the Natronaut Project: Values in Mind</h3>
@@ -22,8 +23,9 @@
 
     <!-- Implementation Section -->
     <div class="card mb-2" style="background-color: #e3f2fd;">
-      <div class="card-header" @click="toggleSection('implementation')">
-        <h2 style="cursor: pointer; color: #396d7e;">Implementation and Impact on Design: Natronaut Application Chamber System — 3D Model</h2>
+      <div class="card-header" @click="toggleSection('implementation')" style="display: flex; align-items: center; justify-content: space-between; cursor: pointer;">
+        <h2 style="color: #396d7e;">Implementation and Impact on Design: Natronaut Application Chamber System — 3D Model</h2>
+        <span>{{ openSection === 'implementation' ? '▲' : '▼' }}</span>
       </div>
       <div v-if="openSection === 'implementation'" class="card-body" style="background-color: #e5efdf;">
         <h3 style="color: #396d7e;">1. Intake Pump</h3>
@@ -51,8 +53,9 @@
 
     <!-- Inclusivity Section -->
     <div class="card mb-2" style="background-color: #e3f2fd;">
-      <div class="card-header" @click="toggleSection('inclusivity')">
-        <h2 style="cursor: pointer; color: #396d7e;">Taking Initiative: Inclusivity and Participation</h2>
+      <div class="card-header" @click="toggleSection('inclusivity')" style="display: flex; align-items: center; justify-content: space-between; cursor: pointer;">
+        <h2 style="color: #396d7e;">Taking Initiative: Inclusivity and Participation</h2>
+        <span>{{ openSection === 'inclusivity' ? '▲' : '▼' }}</span>
       </div>
       <div v-if="openSection === 'inclusivity'" class="card-body" style="background-color: #e5efdf;">
         <h3 style="color: #396d7e;">“Day In The Life of an iGEM Member”</h3>
@@ -77,8 +80,9 @@
 
     <!-- Feedback Section -->
     <div class="card mb-2" style="background-color: #e3f2fd;">
-      <div class="card-header" @click="toggleSection('feedback')">
-        <h2 style="cursor: pointer; color: #396d7e;">Gaining More Feedback and Stakeholder Insight</h2>
+      <div class="card-header" @click="toggleSection('feedback')" style="display: flex; align-items: center; justify-content: space-between; cursor: pointer;">
+        <h2 style="color: #396d7e;">Gaining More Feedback and Stakeholder Insight</h2>
+        <span>{{ openSection === 'feedback' ? '▲' : '▼' }}</span>
       </div>
       <div v-if="openSection === 'feedback'" class="card-body" style="background-color: #e5efdf;">
         <h3 style="color: #396d7e;">Survey on GMOs</h3>
@@ -140,12 +144,12 @@ export default {
   margin-bottom: 1rem;
 }
 .card {
-  border-radius: 10px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 0.25rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 .card-header {
   padding: 1rem;
-  font-weight: bold;
+  font-size: 1.25rem;
 }
 .card-body {
   padding: 1rem;