Init

src/styles/header.css

@@ -0,0 +1,66 @@
+header > div {
+	display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
+	align-items: flex-start;
+	justify-content: flex-start;
+	align-content: stretch;
+}
+
+header > div h1 {
+	margin-block-start: 0em;
+	margin-block-end: 0em;
+	font-weight: normal;
+	font-size: var(--font-size-main);
+	line-height: var(--font-size-main);
+}
+
+header > div description {
+	font-family: "Google Sans", Roboto, Noto Sans SC, sans-serif;
+	font-size: var(--font-size-description);
+	line-height: var(--lineheight-description);
+	color: var(--font-color-lighter);
+}
+
+header > div description > * {
+	max-width: 32px;
+	max-width: 32px;
+}
+
+header {
+	display: inline-flex;
+	align-items: flex-start;
+	flex-direction: column;
+	justify-content: center;
+	backdrop-filter: blur(15px);
+	background-color: rgba(255, 255, 255, 0.5);
+	border-radius: 15px;
+	border: 10px;
+	padding: 20px 40px;
+}
+
+header > img {
+	margin-right: 1rem;
+	margin-bottom: 1rem;
+}
+
+@media screen and (min-width: 768px) {
+	header > * {
+		display: inline-block;
+	}
+
+	header {
+		flex-direction: row;
+		align-items: center;
+	}
+}
+/* @media screen and (max-width: 480px) {
+
+	
+} */
+
+@media (prefers-color-scheme: dark) {
+	header {
+		background-color: rgba(0, 0, 0, 0.5);
+	}
+}