Website/static/css/search.css

/* inter-300 - latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    src: local(''),
        url('/static/fonts/inter-v12-latin-300.woff2') format('woff2'),
        /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('/static/fonts/inter-v12-latin-300.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* inter-regular - latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: local(''),
        url('/static/fonts/inter-v12-latin-regular.woff2') format('woff2'),
        /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('/static/fonts/inter-v12-latin-regular.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* inter-700 - latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: local(''),
        url('/static/fonts/inter-v12-latin-700.woff2') format('woff2'),
        /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('/static/fonts/inter-v12-latin-700.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* material-icons-round-regular - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Material Icons Round';
    font-style: normal;
    font-weight: 400;
    src: url('/static/webfonts/material-icons-round-v108-latin-regular.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

#search-wrapper-ico,
#clearSearch {
    background: none;
    border: none;
    color: var(--fg);
    position: absolute;
    top: 7px;
    right: 10px;
    cursor: pointer;
}

#search-wrapper-ico:hover,
#clearSearch:hover {
    transition: all .3s ease;
    color: var(--blue);
}

#sub-search-wrapper-ico {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 17px;
    /* will be set to 17px if icon pack can be loaded. */
    padding-right: 0px;
    margin-right: 0px;
}

.search-container {
    text-align: center;
    margin-top: 10%;
}

.search-container h1 {
    font-size: 70px;
    color: var(--font-fg);
    font-family: 'Inter';
}

.search-container input {
    width: 90%;
    color: var(--font-fg);
    background-color: var(--search-bg-input);
    font-size: inherit;
    font-family: sans-serif;
    border: none;
    margin-right: 100%;
    margin-left: 3px;
}

.search-container-results-btn {
    display: flex;
    color: var(--blue);
}

.search-container-results-btn:hover button {
    transition: all 0.3s ease;
    color: var(--blue);
}

#search-wrapper-ico,
#clearSearch {
    background: none;
    border: none;
    color: var(--fg);
    position: absolute;
    top: 7px;
    right: 10px;
    cursor: pointer;
}

.search-button-wrapper button:hover {
    border: 1px solid #5f6368;
    cursor: pointer;
}


.wrapper {
    margin: 0 auto;
    background: var(--search-bg-input);
    border-radius: 22px;
    position: absolute;
    width: 520px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    z-index: 2;
    border: 1px solid var(--search-bg-input-border);
}

.wrapper input {
    padding: 10px;
}

.wrapper-results {
    margin: 0 auto;
    background: var(--search-bg-input);
    border-radius: 22px;
    position: absolute;
    width: 628px;
    overflow: hidden;
    margin-top: 0px;
    top: 18px;
    left: 170px;
    z-index: 2;
    border: 1px solid var(--search-bg-input-border);
}

.wrapper-results:hover,
.wrapper-results:focus-within,
.wrapper:hover,
.wrapper:focus-within {
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}


.autocomplete {
    padding: 0px;
}

.autocomplete ul {
    margin: 0;
    padding: 0;
}

.autocomplete ul li {
    list-style: none;
    opacity: 0;
    display: none;
    padding: 8px 12px;
}

.show .autocomplete ul li {
    opacity: 1;
    display: block;
    text-align: left;
}

.show .autocomplete {
    padding-top: 10px;
    padding-bottom: 10px;
    color: var(--font-fg);
}

.autocomplete ul li:hover {
    cursor: pointer;
    background: var(--search-select);
}


@media only screen and (max-width: 750px) {

    .wrapper {
        width: 86%;
        position: absolute;
        float: none;
        margin-top: 0px;
        margin-bottom: 0px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        margin-top: 0px;
        top: 110px;
        left: 4px;
    }

    .wrapper input {
        padding: 10px;
        max-width: 92%;
    }

    .results-search-container {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .results-search-container input {
        width: 84%;
        margin-right: 100%;
        margin-left: 3px;
    }

    #search-wrapper-ico {
        top: 5px;
    }
    
}