google-search.html

<title>Gwern.net Search</title>
<style id="search-styles">
html {
	font-size: 18px;
}
body {
	margin: 0;
	padding: 0.5em;
	background-color: #fff;
}
.searchform {
	display: flex;
	margin: 0;
}
.searchform input.search {
	appearance: none;
	border: none;
	background-color: #fff;
	outline: 1px solid #ccc;
	flex: 1 1 auto;
	height: 2em;
	padding: 0.25em 0.5em;
	font-size: inherit;
}
.searchform:focus-within input.search {
	outline: 2px solid #ccc;
}
.searchform input.search:focus {
	outline: 2px solid #777;
}
.searchform button {
	appearance: none;
	border: none;
	background-color: #e4e4e4;
	height: 2em;
	padding: 0.25em 0.5em;
	flex: 0 0 5em;
	margin: 0 0 0 0.5em;
	outline: 1px solid #ccc;
	cursor: pointer;
	font-size: inherit;
}
.searchform:focus-within button {
	outline: 2px solid #ccc;
}
.searchform button:hover {
	background-color: #777;
	color: #fff;
}
.searchform button:hover,
.searchform button:focus {
	outline: 2px solid #777;
}
</style>
<style id="search-styles-dark" media="all and (prefers-color-scheme: dark)">
body {
	background-color: #161616;
}
.searchform input.search {
	background-color: #161616;
	outline: 1px solid #5c5c5c;
}
.searchform:focus-within input.search {
	outline: 2px solid #5c5c5c;
}
.searchform input.search:focus {
	outline: 2px solid #a6a6a6;
}
.searchform button {
	background-color: #404040;
	outline: 1px solid #5c5c5c;
}
.searchform:focus-within button {
	outline: 2px solid #5c5c5c;
}
.searchform button:hover {
	background-color: #a6a6a6;
	color: #000;
}
.searchform button:hover,
.searchform button:focus {
	outline: 2px solid #a6a6a6;
}
</style>
<form action="https://www.google.com/search" class="searchform" method="get" name="searchform" target="_blank">
<input autocomplete="on" class="form-control search" name="q" placeholder="Search in Gwern.net" required="required" type="text">
<input name="sitesearch" type="hidden" value="gwern.net">
<button class="button" type="submit">Search</button>
</form>