Update file style.css

static/style.css

-body { padding-top: 56px; }
-.left-aligned { margin-left: auto; }
-.bg-dark { background-color: #343a40 !important; }
-.bg-hero { background-color: #45b06cff; }
-
-/* CALLOUT */
-.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
-.bd-callout h4 { margin-bottom:.25rem }
-.bd-callout p:last-child { margin-bottom:0 }
-.bd-callout code { border-radius:.25rem }
-.bd-callout+.bd-callout { margin-top:-.25rem }
-.bd-callout-info { border-left-color:#5bc0de }
-.bd-callout-warning { border-left-color:#f0ad4e }
-.bd-callout-danger { border-left-color:#d9534f }
-
-/* footer */
-footer a { color: white; font-weight: bold; text-decoration: none; }
-footer a:hover { color: white; text-decoration: underline; }
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #f0f0f0;
+  }
+  
+  .sachet {
+    position: relative;
+    width: 150px;
+    height: 200px;
+  }
+  
+  .bag {
+    width: 100%;
+    height: 100%;
+    background-image: url('https://static.igem.wiki/teams/5187/tie.png'); /* Change to your tied bag image */
+    background-size: contain;
+    background-repeat: no-repeat;
+    transition: background-image 1s ease-in-out;
+  }
+  
+  .bag.untied {
+    background-image: url('https://static.igem.wiki/teams/5187/untie.png'); /* Change to your untied bag image */
+  }
+  
+  .scent {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    top: -50px;
+    left: 25px;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
+    opacity: 0;
+    transform: scale(0.5);
+    transition: opacity 2s ease, transform 2s ease;
+  }
+  
+  .scent.release {
+    opacity: 1;
+    transform: scale(1.5);
+  }
+  
\ No newline at end of file