html {
    overflow: hidden;
    height: 100%;
}

body {
    min-height: 100%;
    overflow-x: hidden;
}

html::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    background: url("/sheng-l-q2dUSl9S4Xg-unsplash.webp") no-repeat center;
    background-size: cover;
    filter: blur(5px) brightness(67%);
    z-index: -1;
}

.search-container input {
    background: rgba(21, 21, 21, 0);
}

.wrapper {
    background: rgba(21, 21, 21, 0.7);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
    --search-bg-input-border: rgba(60, 64, 67, 0.7);
}

.autocomplete ul li:hover {
    background: rgba(255, 255, 255, 0.2);
}

.selected {
    background: rgba(255, 255, 255, 0.2);
}

.search-button-wrapper button {
    background: rgba(21, 21, 21, 0.7);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
}