#searchBoxContainer { width: 100%; height: auto; top: 60%; opacity: 0; position: absolute; pointer-events: none; transition: opacity var(--transition-speed), top var(--transition-speed), pointer-events var(--transition-speed); } #searchBox { width: 30vw; height: 48px; padding-left: 10px; padding-right: 10px; margin-bottom: 10px; /*Center horizontally*/ position: relative; left: 50%; transform: translateX(-50%); 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; } .showSearchBox { opacity: 1 !important; top: 90% !important; pointer-events: initial !important; } @media screen and (max-width: 580px) { #searchBox { width: 50vw; } .showSearchBox { opacity: 1 !important; top: 70% !important; pointer-events: initial !important; } }