fix: help window animation

static/index.css

@@ -184,15 +184,15 @@
     padding-top: 2rem;
 }
 
-#sqlInpt {
-    position: relative;
+.sqlInpt {
     margin: 3.5rem;
     background-color: rgb(0 0 0 / 85%);
     padding: 0.5rem 1.5rem;
     text-align: left;
-    width: auto;
+    width: clamp(40rem, 35%, 60rem);
     height: 22rem;
     transition: 1s;
+    display: flex;
 }
 .slideinInpt {
     transition: 1s;
@@ -317,7 +317,7 @@
 }
 
 .navigation{
-    width: 18%;
+    width: 19.5rem;
     height: clamp(27rem, 65%, 39rem);
     padding: 0;
     top: 17.5%;

static/scripts/animation.js

@@ -1,9 +1,7 @@
 function showPopup() {
   const popup = document.getElementById("popup");
-  const sqlInpt = document.getElementById("sqlInpt");
 
   popup.classList.remove('slideoutHelp');
-  sqlInpt.classList.remove('slideoutInpt');
   popup.style.display = "block";
 
   setTimeout(() => {
@@ -14,10 +12,8 @@ function showPopup() {
 
 function hidePopup() {
   const popup = document.getElementById("popup");
-  const sqlInpt = document.getElementById("sqlInpt");
 
-  sqlInpt.classList.remove('slideinInpt');
-  sqlInpt.classList.add('slideoutInpt')
+
   popup.classList.remove('slideinHelp');
   popup.classList.add('slideoutHelp');