#searchBox { background: var(--base-bg); color: var(--base-color); text-align: center; font-family: roboto-bold; width: 30vw; height: 48px; border: none; border-radius: 24px; padding-left: 10px; padding-right: 10px; margin: 0; opacity: 0; position: absolute; backdrop-filter: blur(var(--blur-strength)); left: 50%; top: 60%; pointer-events: none; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: opacity var(--transition-speed), top var(--transition-speed), visibility var(--transition-speed), pointer-events var(--transition-speed) ; } #searchBox.show { opacity: 1; top: 100%; pointer-events: initial; }