main {
    align-self: start;
    width: 100%;
    max-width: 900px;
}

#search {
    width: 100%;
    height: 80px;
    color: rgb(var(--color-background));
    background-color: rgb(var(--color-contrast));
}

input[type="search"] {
    width: 100%;
    height: 100%;
    font-size: 18px;
    color: inherit;
    padding: 0 calc(var(--padding) * 1.5);
    background-color: transparent;
    border: none;
    outline: none;
}

input[type="search"]::selection {
    color: rgb(var(--color-contrast));
    background-color: rgb(var(--color-background));
}

input[type="search"]::placeholder {
    color: rgba(var(--color-background),.4);
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 32px;
    width: 32px;
    background: center no-repeat rgba(var(--color-background),.1) url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAAAAXNSR0IArs4c6QAAAFRJREFUeNrlkrkNADEIBK8JunD/GVW4oLnMAViagNBkLDsS3/d4sEiiqUGy7kACmyj2DeQRavEgTRGkZ4oUuyPF7ojYBRi35ENP1+qHG7+GP9/b8QPsDLZNvX0megAAAABJRU5ErkJggg==');
    cursor: pointer;
}

#results {
    text-align: center;
    font-size: 18px;
    padding: 0 var(--padding);
}

/* -- Media Queries -- */

@media (prefers-color-scheme: dark) {
    #search {
        color: rgb(var(--color-contrast));
        background-color: rgba(var(--color-contrast),.15);
    }

    input[type="search"]::placeholder {
        color: rgba(var(--color-contrast),.4);
    }
}