Add Header, Footer, Basic Search

Website/styles/index.css

@@ -0,0 +1,77 @@
+:root{
+    --background-color: #030304;
+    --second-background-color: white;
+    --primary-color: #f5a9b8;
+    --secondary-color:  #5bcefa;
+    --blur-background: rgba(245, 169, 184, 0.58);
+    --accent-color: #fff;
+    /* --primary-color: green;
+    --secondary-color: gold;
+    --blur-background: rgba(86, 131, 36, 0.8);
+    --accent-color: olive; */
+    --topbar-height: 60px;
+    box-sizing: border-box;
+}
+
+body{
+    padding: 0;
+    margin: 0;
+    height: 100vh;
+    background-color: var(--background-color);
+    font-family: "Inter", sans-serif;
+    overflow-x: hidden;
+}
+
+header {
+    display: flex;
+    align-items: center;
+    height: var(--topbar-height);
+    background-color: var(--secondary-color);
+    z-index: 100;
+    box-shadow: 0 0 20px black;
+}
+
+header > #titlebox {
+    position: relative;
+    display: flex;
+    margin: 0 0 0 40px;
+    height: 100%;
+    align-items:center;
+    justify-content:center;
+}
+
+header > #titlebox > span{
+    cursor: default;
+    font-size: 24pt;
+    font-weight: bold;
+    background: linear-gradient(150deg, var(--primary-color), var(--accent-color));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-left: 20px;
+}
+
+header > #titlebox > img {
+    height: 100%;
+    cursor: grab;
+}
+
+footer {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    width: 100%;
+    height: 40px;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--primary-color);
+    align-content: center;
+    position: fixed;
+    bottom: 0;
+}
+
+#madeWith {
+    flex-grow: 1;
+    text-align: right;
+    margin-right: 20px;
+    cursor: url("Website/media/blahaj.png"), grab;
+}