added a How to Play dropdown

index.html

@@ -223,8 +223,12 @@ <h1 class="text text--title">
             <a href="./AboutUs/About.html"><button class="btn btn--in fa-solid fa-circle-info"></button></a>
         </div>
 
+
+<audio id="background-music" autoplay loop >
+
         <!-- Audio element for background music -->
         <audio id="background-music" autoplay loop>
+
   <source src="Music/8 Bit Space Groove! Chill Pretty Chiptune Game Music by HeatleyBros.mp3" type="audio/mpeg">
 </audio>
 
@@ -262,6 +266,31 @@ <h1 class="text text--title">
   <script src="progress.js"></script>
 
 
+  <div class="sec-center">
+    <input class="dropdown" type="checkbox" id="dropdown" name="dropdown"/>
+    <label class="for-dropdown" for="dropdown">How To Play! <i class="uil uil-arrow-down"></i></label>
+    <div class="section-dropdown">
+        <h2>1. Twisting the segments</h2>
+        <br>
+        This can be done by dragging the cursor over the segment you want to rotate.
+        <br>
+        <br>
+
+        <h2>2. Changing the view of the cube</h2>
+        <br>
+        This can be done by dragging the cursor in an arrow around the cube.
+        <br>
+        <br>
+
+        <img src="twist1.png" height="150" width="240">
+        <img src="twist2.png" height="150" width="240">
+        <img src="changeview.png" height="150" width="240">
+    </div>
+</div>
+
+
+
+
 </body>
 
 </html>

style.css

@@ -552,6 +552,92 @@ body {
   margin-top: 20px;
 }
 
+
+
+/* HOW TO PLAY CSS */
+
+
+/* Body styling */
+body {
+  line-height: 1.2;
+  color: #ffffff;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  padding-right: 1300px;
+  padding-bottom: 500px;
+}
+
+/* Center section styling */
+.sec-center {
+  position: relative;
+  max-width: 100%;
+  text-align: center;
+  z-index: 200;
+}
+
+/* Hide checkboxes */
+[type="checkbox"] {
+  position: absolute;
+  left: -9999px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Dropdown button styling */
+.dropdown:checked + label,
+.dropdown:not(:checked) + label {
+  position: relative;
+  line-height: 2;
+  height: 50px;
+  transition: all 200ms linear;
+  border-radius: 4px;
+  width: 220px;
+  letter-spacing: 1px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  border: none;
+  background-color: #a188eac4;
+  cursor: pointer;
+  color: #102770;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
+}
+
+
+/* Dropdown content styling */
+.section-dropdown {
+  position: absolute;
+  padding: 5px;
+  background-color: #5a29edd8;
+  top: 70px;
+  left: 0;
+  width: 400%;
+  border-radius: 10px;
+  display: block;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
+  z-index: 2;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(20px);
+  transition: all 200ms linear;
+}
+
+.dropdown:checked ~ .section-dropdown {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 20px;
+  color: #333;
+
 .profile-menu {
   position: relative;
   display: inline-block;
@@ -591,13 +677,21 @@ body {
   height: 40px;
   border-radius: 50%;
   /* Ensure the profile picture is circular */
+
   z-index: 10;
   width: 100%;
   height: 100%;
   border-radius: 50%;
   /* Ensures the image inside is circular */
 }
 
+
+.btn--about {
+  position: relative;
+  z-index: 10; /* Ensure it's on top */
+}
+
+
 .dropdown-content {
   display: none;
   position: absolute;
@@ -646,4 +740,4 @@ body {
     opacity: 1;
     pointer-events: auto;
   }
-}
+}