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) * 2);
    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);
}

#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);
    }
}