Start of works on frontend

static/styles/main.css

@@ -0,0 +1,111 @@
+@import url("../fonts/iosevka-aile.css");
+
+:root {
+  --col-gr-100: #012;
+  --col-gr-200: #234;
+  --col-gr-300: #456;
+  --col-gr-400: #678;
+  --col-gr-500: #89a;
+  --col-gr-600: #abc;
+  --col-gr-700: #cde;
+  --col-gr-800: #def;
+  --col-acc-1: #d15c5c;
+  --col-acc-2: #f36d6d;
+  --col-acc-0: #993d3d;
+
+  --col-bg-1: var(--col-gr-600);
+  --col-bg-2: var(--col-gr-700);
+  --col-bg-3: var(--col-gr-800);
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--col-main);
+  background-color: var(--col-bg-1);
+  font-family: "Iosevka Aile Web";
+  box-sizing: border-box;
+  font-size: 1.3rem;
+  margin: 0;
+  padding: 0;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+}
+
+.panel {
+  display: flex;
+  flex-direction: column;
+  border-radius: 1em;
+  background-color: var(--col-bg-2);
+  box-shadow: 2px 2px 100px #1115;
+  text-align: center;
+}
+
+#bookmarks {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+.card {
+  display: flex;
+  flex-direction: column;
+  border-radius: 1em;
+  background-color: var(--col-bg-2);
+  box-shadow: 2px 2px 100px #1115;
+  text-align: left;
+  padding: 1em;
+  margin: 1em;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  margin: 20px;
+}
+
+input {
+  background-color: var(--col-bg-3);
+  border: none;
+  border-radius: 5px;
+  padding: 1em 1em;
+  font-size: 1em;
+  margin: 1em 0;
+}
+
+input[type="submit"],
+button,
+.btn {
+  background-color: var(--col-acc-1);
+  transition: background-color 150ms ease;
+  color: white;
+}
+input[type="submit"]:hover,
+button:hover,
+.btn:hover {
+  background-color: var(--col-acc-2);
+}
+
+input[type="submit"]:focus,
+button:focus,
+.btn:focus {
+  background-color: var(--col-acc-0);
+}
+.accent {
+  background-color: var(--col-acc-1);
+  color: white;
+}