Added symbiosis section

css/styles.css

@@ -130,6 +130,16 @@ h1 {
   box-shadow: 10px 15px var(--main-highlight-color);
 }
 
+.symbiosis-section {
+  width: 40%;
+  background-color: var(--background-section-color);
+  height: 22.5rem;
+  padding: 1em;
+  margin: 1em;
+  margin-left: 10%;
+  box-shadow: 10px 15px var(--main-highlight-color);
+}
+
 .food-web-section {
   width: 50%;
   background-color: var(--background-section-color);
@@ -178,6 +188,20 @@ h1 {
   text-align: center;
 }
 
+.image-section-2 {
+  width: 35%;
+  background-color: var(--background-section-color);
+  height: 17.5rem;
+  padding: 1em;
+  margin: 1em;
+  margin-left: auto;
+  margin-bottom: 5rem;
+  margin-top: -20.5rem;
+  margin-right: 2em;
+  box-shadow: 10px 15px var(--main-highlight-color);
+  text-align: center;
+}
+
 .map-section-1 {
   width: 35%;
   background-color: var(--background-section-color);

index.html

@@ -79,6 +79,21 @@
       </div>
     </div>
 
+    <!-- Start symbiosis section -->
+    <div class="symbiosis-section">
+      <div class="section-header">
+        <h1>Symbiosis</h1>
+        <p>A mutualistic relationship that is directly affected by rhino poaching is the relationship between rhinos and the oxpecker bird. Oxpeckers eat ticks, parasites, and insects off of rhinos' skin. The oxpecker has a steady food source and the rhino is able to stay clean. If rhino poaching continues, oxpeckers could lose a large part of their diet. An example of commensalism can be seen in the relationship between rhinos and dung beetles. Rhinos produce up to 50 pounds of excrement a day, and dung beetles rely on this as a food source. Again, if rhinos continue to be poached, these beetles could lose a very important source of nutrition.</p>
+      </div>
+    </div>
+
+    <!-- Start image section -->
+    <div class="image-section-2">
+      <div class="poaching-image">
+        <img src="static/img/oxpecker-rhino.jpg" alt="Oxpecker birds on a rhino" loading="lazy">
+      </div>
+    </div>
+
   <div class="placeholder">
     <p>placeholder</p>
   </div>