Add style to index page

www/res/style.css

@@ -1,7 +1,11 @@
 
+* {
+    box-sizing: border-box;
+}
+
 :root {
     font-family: 'Arial', sans-serif;
-    box-sizing: border-box;
+    scroll-behavior: smooth;
 }
 
 body {
@@ -15,6 +19,7 @@ header {
     height: 3em;
     border-bottom: 1px solid #C0C0C0;
     background-color: #FFFFFF;
+    z-index: 10;
 }
 
 header img {
@@ -24,6 +29,13 @@ header img {
 
 nav {
     height: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+
+nav > *:first-child,
+nav > *:last-child {
+    flex: 100px 1 1;
 }
 
 nav ul {
@@ -36,15 +48,183 @@ nav ul {
     height: 100%;
 }
 
-nav li {
-
-}
-
 nav li a {
     text-decoration: none;
-    padding: 1em;
+    padding: 1em 2em;
+    color: #808080;
+}
+
+nav li a:hover {
+    color: #A040C0;
+}
+
+main span[id] {
+    position: relative;
+    top: -8em;
+}
+
+p a {
+    color: #A040C0;
+}
+
+main .home {
+    height: 100vh;
+    background: url("/res/images/Italien-1.jpg") no-repeat bottom center fixed;
+    background-size: cover;
+}
+
+main .picture-1 {
+    width: 100%;
+    margin: 0;
+    background: url("/res/images/Italien-2.jpg") no-repeat bottom center fixed;
+    background-size: cover;
+    height: 24em;
+}
+
+main .picture-2 {
+    width: 100%;
+    margin: 0;
+    background: url("/res/images/Italien-3.jpg") no-repeat bottom center fixed;
+    background-size: cover;
+    height: 24em;
+}
+
+main .home a {
+    text-decoration: none;
+    color: #000000;
+    top: calc(32vh - 1em);
+    position: relative;
+}
+
+main .home a > div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.5em;
+    transition: top 0.25s, font-size 0.25s;
+    width: fit-content;
+    margin: auto;
+    backdrop-filter: blur(16px);
+    padding: 1em 0.5em;
+    border-radius: 3em;
+}
+
+main .home a > div:hover {
+    font-size: 1.675em;
+    top: calc(32vh - 1.5em);
+}
+
+main .home img {
+    width: 8em;
+    height: 8em;
+}
+
+main .home h1 {
+    font-size: 3.5em;
+    margin: 0;
+    font-weight: normal;
+}
+
+main .home h2 {
+    font-size: 1.125em;
+    margin: 0;
+    font-weight: bold;
+}
+
+main section {
+    padding: 1em 0 2em 0;
+}
+
+main section p,
+main section table {
+    max-width: 1000px;
+    margin: 1em auto;
+}
+
+main section p {
+    text-align: justify;
+}
+
+main section h3 {
+    text-align: center;
+    font-size: 2em;
+}
+
+main .about {
+    border-top: 1em solid #C0F080;
+    border-bottom: 1em solid #C0F080;
+}
+
+main .clients {
+    border-top: 1em solid #C0F080;
+    border-bottom: 1em solid #C0F080;
 }
 
 table td {
     padding: 0.125em 0.5em;
 }
+
+footer {
+    height: 8em;
+    padding: 1em;
+    width: 100%;
+    background-color: #404040;
+    color: #FFFFFF;
+    display: flex;
+    justify-content: center;
+    gap: 2em;
+}
+
+footer img {
+    height: 4em;
+    width: 4em;
+}
+
+footer a {
+    align-self: center;
+}
+
+@media screen and (max-width: 1032px) {
+    nav li a {
+        padding: 1em;
+    }
+    main section p,
+    main section table {
+        margin: 1em;
+    }
+}
+
+@media screen and (max-width: 800px) {
+    footer {
+        flex-direction: column;
+        height: unset;
+        align-items: center;
+        gap: 1em;
+    }
+
+    footer > *:not(:first-child) {
+        width: 300px;
+    }
+
+    .home {
+        font-size: 0.5em;
+    }
+}
+
+@media screen and (max-width: 650px) {
+    nav li:first-child {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 550px) {
+    nav li:nth-child(2) {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 500px) {
+    nav li:nth-child(3) {
+        display: none;
+    }
+}