first commit

src/styles/index.css

@@ -0,0 +1,73 @@
+:root {
+	color-scheme: dark light;
+	scroll-behavior: smooth;
+
+	--primary: hsl(211, 26%, 39%);
+	--secondary: hsl(209, 28%, 29%);
+	--secondary-hover: hsl(209, 28%, 19%);
+	--text-primary: hsl(0, 0%, 100%);
+	--secondary-text: hsl(211, 26%, 39%);
+}
+
+body {
+	font-family: "Lato", -apple-system, Roboto, "Helvetica Neue", Arial,
+		"Noto Sans", sans-serif;
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	min-height: 100vh;
+	background: var(--secondary);
+	color: var(--text-primary);
+}
+
+body.light {
+	--primary: hsl(220, 27%, 98%);
+	--secondary: hsl(0, 0%, 100%);
+	--secondary-hover: hsl(0, 0%, 80%);
+	--text-primary: hsl(220, 17%, 32%);
+	--secondary-text: hsl(211, 26%, 39%);
+}
+
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+svg {
+	vertical-align: middle;
+	font-size: 0.75em;
+}
+
+section:not(section section) {
+	background: var(--secondary);
+	padding: 10rem 0;
+}
+
+section:nth-child(2n):not(section section) {
+	background: var(--primary);
+}
+
+section > svg {
+	color: var(--primary);
+}
+
+section:nth-child(2n) > svg {
+	color: var(--secondary);
+}
+
+section > :is(h1, h2) {
+	font-size: 2.5em;
+	margin: 0;
+	text-align: center;
+	text-transform: uppercase;
+}
+
+h1 {
+	margin: 0;
+}
+
+img {
+	max-width: 100%;
+}