add searchbox container

css/search-box.css

@@ -1,26 +1,18 @@
-#searchBox {
-	background: var(--base-bg);
-	color: var(--base-color);
-	text-align: center;
-	font-family: roboto-bold, sans-serif;
+#searchBoxContainer {
 
-	width: 30vw;
-	height: 48px;
-	border: none;
-	border-radius: 24px;
+	background: #ff00ff;
 	
-	padding-left: 10px;
-	padding-right: 10px;
+	width: auto;
+	height: auto;
+
 	margin: 0;
 	opacity: 0;
 	position: absolute;
-	backdrop-filter: blur(var(--blur-strength));
-	
+
+	pointer-events: none;
 	left: 50%;
 	top: 60%;
-	
-	pointer-events: none;
-	
+
 	-ms-transform: translate(-50%, -50%);
 	transform: translate(-50%, -50%);
 	transition: opacity var(--transition-speed),
@@ -28,6 +20,25 @@
 				pointer-events var(--transition-speed);
 }
 
+#searchBox {
+	width: 30vw;
+	height: 48px;
+
+	padding-left: 10px;
+	padding-right: 10px;
+
+	background: var(--base-bg);
+	color: var(--base-color);
+	text-align: center;
+	font-family: roboto-bold, sans-serif;
+
+	border: none;
+	border-radius: 24px;
+	
+	backdrop-filter: blur(var(--blur-strength));
+	
+}
+
 #searchBox::placeholder {
 	font-family: roboto-bold, fantasque-sans-mono, sans-serif;
 }

index.html

@@ -51,7 +51,9 @@
 		<div id='profileImageContainer'>
 			<div id='profileImage'></div>
 		</div>
-		<input type="text" id="searchBox" autocomplete="off" autofocus="off" placeholder="  Search with HiddenWiki"/>
+		<div id='searchBoxContainer'>
+			<input type="text" id="searchBox" autocomplete="off" autofocus="off" placeholder="  Search with HiddenWiki"/>
+		</div>
 	</div>
 
 

js/show-search-box.js

@@ -1,10 +1,12 @@
+var searchBoxContainer = document.getElementById('searchBoxContainer');
+
 var searchBox = document.getElementById('searchBox');
 var centeredBoxOverlay = document.getElementById('centeredBoxOverlay');
 
 let searchBoxVisility = false;
 
 const showSearchBox = () => {
-	searchBox.classList.add('showSearchBox');
+	searchBoxContainer.classList.add('showSearchBox');
 
 	// Focus
     searchBox.focus();
@@ -13,7 +15,7 @@ const showSearchBox = () => {
 }
 
 const hideSearchBox = () => {
-	searchBox.classList.remove('showSearchBox');
+	searchBoxContainer.classList.remove('showSearchBox');
 
     searchBoxVisility = !searchBoxVisility;
 }