css/index.css

@@ -0,0 +1,68 @@
+#main {
+  display: flex;
+  flex-flow: column;
+
+  width: 100%;
+
+  text-align: center;
+}
+
+@media screen and (min-width: 360px) {
+  #main {
+    margin: auto;
+    width: 360px;
+  }
+}
+
+#about img {
+  width: 100%;
+  height: auto;
+}
+
+#search {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#search > * {
+  margin: 0.25rem;
+}
+
+.search-inputs {
+  width: 100%;
+  height: 2rem;
+
+  display: flex;
+}
+
+.search-inputs > * {
+  height: 100%;
+}
+
+.search-inputs input[name="query"] {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.search-radio-buttons {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.search-radio-buttons > .category {
+  display: flex;
+}
+
+.search-radio-buttons > .category:not(:last-child) {
+  margin-right: 1rem;
+}
+
+.search-radio-buttons > .category > input[type="radio"] {
+  margin: 0;
+  margin-right: 0.25rem;
+}
+
+#status {
+  font-size: smaller;
+}

css/theme.css

@@ -0,0 +1,43 @@
+:root {
+  --primary-color: #bc5151;
+}
+
+body {
+  background: url('https://www.tromsite.com/wp-content/uploads/2018/09/tromsite-bg-pattern-light-5.png');
+  background-repeat: repeat;
+  background-attachment: fixed;
+
+  font-family: sans-serif;
+}
+
+a {
+  color: var(--primary-color);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.search-inputs input[name="query"] {
+  border: 1px solid darkgrey;
+  border-radius: 0.5rem 0 0 0.5rem;
+}
+
+.search-inputs input[type="submit"] {
+  background-color: var(--primary-color);
+
+  color: white;
+  cursor: pointer;
+
+  border: none;
+  border-radius: 0 0.5rem 0.5rem 0;
+}
+
+.search-radio-buttons input[type="radio"] {
+  accent-color: var(--primary-color);
+}
+
+#status {
+  color: gray;
+}