Sekce main a scroll při kliknutí na šipku

index.html

@@ -17,9 +17,12 @@
 	<header>
 		<h1>Projekt SPIN</h1>
 		<p>Projekt SPIN &ndash; <i>Spolupráce a inovace</i> &ndash; vznikl z&nbsp;iniciativy <strong>katedry matematiky a didaktitky matematiky</strong> a <strong>katedry preprimární a primární pedagogiky PedF UK</strong> za podpory <strong>Nadace České spořitelny</strong>. Jeho hlavním cílem je zkvalitnit a inovovat přípravu budoucích učitelů prvního stupně. Největší důraz se klade na propojovaní teorie a praxe, například prostřednictvím tandemové výuky v&nbsp;rámci vysokoškolských kurzů, práce s&nbsp;čerstvými absolventy nebo tutoringu.</p>
-		<img src="img/arrow.svg" alt="Arrow" class="arrow">
+		<a href="#main">
+			<img src="img/arrow.svg" alt="Arrow" class="arrow">
+		</a>
 	</header>
-	<main>
+	<main id="main">
+		<h2>Lorem Ipsum</h2>
 	</main>
 </body>
 </html>

style.css

@@ -1,9 +1,15 @@
+:root {
+	--width: 1000px;
+}
+
 @font-face {
 	font-family: montserrat;
 	src: url(fnt/montserrat-light.ttf) format("truetype");
 }
 
+
 * { box-sizing: border-box }
+html { scroll-behavior: smooth }
 
 body {
 	margin: 0;
@@ -13,19 +19,19 @@ body {
 	font-family: montserrat, sans;
 }
 
+header, main { min-height: 100vh }
+
 header {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
 
-	min-height: 100vh;
 	padding: 1rem;
-
 	font-size: 1.5rem;
 }
 header p {
-	max-width: 65rem;
+	max-width: var(--width);
 	text-align: justify;
 }
 header .arrow {
@@ -33,3 +39,9 @@ header .arrow {
 	margin-top: 3em;
 }
 
+main {
+	max-width: var(--width);
+	margin: 0 auto;
+	padding: 1em;
+}
+