diff --git a/src/lib/Intro.svelte b/src/lib/Intro.svelte
index 24e5926..f333396 100644
--- a/src/lib/Intro.svelte
+++ b/src/lib/Intro.svelte
@@ -1,99 +1,100 @@
 <script>
-  let mobile = screen.width <= 760 ? true : false;
+    let mobile = screen.width <= 760 ? true : false;
 </script>
 
 <div class="intro">
-  <div class="title">
-    <div class="top">Terremoti</div>
-    <div class="bottom" aria-hidden="true">Terremoti</div>
-  </div>
+    <div class="title">
+        <div class="top">Terremoti</div>
+        <div class="bottom" aria-hidden="true">Terremoti</div>
+    </div>
 
-  <br /> <br />
-  <span class="subtitle">in Italia dal 2000 ad oggi</span>
+    <br /> <br />
+    <span class="subtitle">in Italia dal 2000 ad oggi</span>
 
-  <p id="description">
-    L'Italia è situata lungo la zona di collisione tra la placca africana e
-    quella euroasiatica, ed è quindi soggetta a frequenti attività sismiche.
-    Essendo caratterizzata da zone geologicamente complesse, dove le rocce sono
-    molto varie e la crosta terrestre è molto sottile, l'Italia è inoltre
-    vittima di una maggiore instabilità sismica.
-  </p>
-  <p>
-    Negli ultimi 20 anni, l'italia ha subito diversi terremoti significativi.
-  </p>
-
-  {#if !mobile}
-    <a id="scroll-btn" href="#scroller"> </a>
-  {:else}
-    <p style="color:red">
-      Malheureusement la visualisation est disponible seulement en Desktop.
+    <p id="description">
+        L'Italia è situata lungo la zona di collisione tra la placca africana e
+        quella euroasiatica, ed è quindi soggetta a frequenti attività
+        sismiche. Essendo caratterizzata da zone geologicamente complesse, dove
+        le rocce sono molto varie e la crosta terrestre è molto sottile,
+        l'Italia è inoltre vittima di una maggiore instabilità sismica.
+    </p>
+    <p>
+        Negli ultimi 20 anni, l'italia ha subito diversi terremoti
+        significativi.
     </p>
-  {/if}
+
+    {#if !mobile}
+        <a id="scroll-btn" href="#scroller"> </a>
+    {:else}
+        <p style="color:red">
+            Purtroppo, la visualizzazione è ottimizzata per desktop. <br />
+        </p>
+    {/if}
 </div>
 
 <style>
-  #description {
-    padding: 50px;
-  }
-  .intro {
-    height: 100vh;
-    padding: 8%;
-    text-align: center;
-  }
-
-  .subtitle {
-    font-family: Poppins;
-    font-weight: 100;
-    font-size: 2rem;
-    color: #f12526;
-  }
+    #description {
+        padding: 50px;
+    }
+    .intro {
+        height: 100vh;
+        padding: 8%;
+        text-align: center;
+    }
 
-  p {
-    font-weight: 100;
-    font-size: 1.3rem;
-  }
+    .subtitle {
+        font-family: Poppins;
+        font-weight: 100;
+        font-size: 2rem;
+        color: #f12526;
+    }
 
-  .title {
-    display: grid;
-    place-content: center;
-    background-color: var(--background-color);
-    min-height: 3vh;
-    font-size: clamp(1.5rem, 1rem + 18vw, 15rem);
-    font-weight: 500;
-    font-size: 4rem;
-    text-transform: uppercase;
-    color: var(--text-color);
-  }
+    p {
+        font-weight: 100;
+        font-size: 1.3rem;
+    }
 
-  .title > div {
-    grid-area: 1/1/-1/-1;
-  }
-  .top {
-    clip-path: polygon(0% 0%, 100% 0%, 100% 48%, 0% 58%);
-    font-size: 4rem;
-  }
-  .bottom {
-    clip-path: polygon(0% 60%, 100% 50%, 100% 100%, 0% 100%);
-    color: transparent;
-    background: -webkit-linear-gradient(
-      177deg,
-      whitesmoke 53%,
-      var(--text-color) 65%
-    );
-    background: linear-gradient(177deg, white 10%, var(--text-color) 65%);
-    background-clip: text;
-    -webkit-background-clip: text;
-    transform: translateX(-0.02em);
-    font-size: 4rem;
-  }
+    .title {
+        display: grid;
+        place-content: center;
+        background-color: var(--background-color);
+        min-height: 3vh;
+        font-size: clamp(1.5rem, 1rem + 18vw, 15rem);
+        font-weight: 500;
+        font-size: 4rem;
+        text-transform: uppercase;
+        color: var(--text-color);
+    }
 
-  @media only screen and (min-width: 768px) {
+    .title > div {
+        grid-area: 1/1/-1/-1;
+    }
     .top {
-      font-size: 8rem;
+        clip-path: polygon(0% 0%, 100% 0%, 100% 48%, 0% 58%);
+        font-size: 4rem;
     }
-
     .bottom {
-      font-size: 8rem;
+        clip-path: polygon(0% 60%, 100% 50%, 100% 100%, 0% 100%);
+        color: transparent;
+        background: -webkit-linear-gradient(
+            177deg,
+            whitesmoke 53%,
+            var(--text-color) 65%
+        );
+        background: linear-gradient(177deg, white 10%, var(--text-color) 65%);
+        background-clip: text;
+        -webkit-background-clip: text;
+        transform: translateX(-0.02em);
+        font-size: 4rem;
+    }
+
+    @media only screen and (min-width: 768px) {
+        .top {
+            font-size: 8rem;
+        }
+
+        .bottom {
+            font-size: 8rem;
+        }
     }
-  }
 </style>
diff --git a/src/lib/Map.svelte b/src/lib/Map.svelte
index c83d879..01e70b4 100644
--- a/src/lib/Map.svelte
+++ b/src/lib/Map.svelte
@@ -1,368 +1,382 @@
 <script>
-  import { onMount } from "svelte";
-  import { geoMercator, geoPath } from "d3-geo";
-  import { ascending } from "d3-array";
-  import { select, selectAll } from "d3-selection";
-  import { draw } from "svelte/transition";
-  import { Column, Grid, Row } from "carbon-components-svelte";
-  import { zoom, zoomIdentity } from "d3-zoom";
-  import { steps } from "../assets/steps.js";
-
-  // Mobile
-  let mobile = screen.width <= 760 ? true : false;
-
-  // Scroll
-  import Scroll from "./Scrolly.svelte";
-
-  // Scroll steps
-  let currentStep;
-
-  // Earthquakes API url
-  const url =
-    "https://emidius.mi.ingv.it/fdsnws/event/1/query?starttime=2000-01-01T00:00:00&endtime=2022-12-31T23:59:59&orderby=time-asc&limit=4000&format=json";
-
-  // Arrays storing data when fetched
-  let biggestEarthquakes = [];
-  let borders = [];
-  let cities = [];
-  let temporalEarthquakes = [];
-
-  // SVG properties
-  const margin = { top: 50, right: 50, bottom: 0, left: 50 },
-    w = window.innerWidth / 2 - margin.left - margin.right,
-    h = window.innerHeight - margin.top - margin.bottom;
-
-  //Define map projection and path
-  const projection = geoMercator()
-    .translate([w / 2 - 500, 2400])
-    .scale([2500]);
-  const path = geoPath().projection(projection);
-
-  const doZoom = (e) => {
-    selectAll("path").attr("transform", e.transform);
-    selectAll("circle").attr("transform", e.transform);
-    selectAll("text").attr("transform", e.transform);
-  };
-
-  // Zoom
-  const mapZoom = zoom().scaleExtent([1, 1]).on("zoom", doZoom);
-
-  // Tooltip
-  const showTooltip = (event, source_id) => {
-    let tooltip = document.getElementById(source_id);
-    tooltip.style.display = "block";
-    tooltip.style.left = event.layerX + 10 + "px";
-    tooltip.style.top = event.layerY + 10 + "px";
-  };
-  const hideTooltip = (event, source_id) => {
-    let tooltip = document.getElementById(source_id);
-    tooltip.style.display = "none";
-  };
-
-  const initZoom = () => {
-    select("svg").call(mapZoom).on("wheel.zoom", null);
-  };
-
-  const zoomTo = (coordinates, scale) => {
-    select("svg")
-      .transition()
-      .duration(4000)
-      .call(
-        mapZoom.transform,
-        zoomIdentity
-          .translate(w / 2, h / 2)
-          .scale(scale)
-          .translate(-projection(coordinates)[0], -projection(coordinates)[1])
-      );
-  };
-
-  // Fetch data and initialize zoom
-  onMount(async () => {
-    temporalEarthquakes = await fetch(url)
-      .then((response) => response.json())
-      .then((json) => json.features);
-    const sortedEarthquakes = temporalEarthquakes
-      .slice()
-      .sort((a, b) => ascending(a.properties.mag, b.properties.mag));
-    cities = await fetch("./data/cities.geojson")
-      .then((response) => response.json())
-      .then((json) => json.features);
-    biggestEarthquakes = sortedEarthquakes.slice(-10);
-
-    borders = await fetch("./data/limits_IT_regions.geojson")
-      .then((response) => response.json())
-      .then((json) => json.features);
-
-    initZoom();
-  });
-
-  $: if (currentStep == 0) {
-    zoomTo(steps.map((d) => d.coordinates)[0], 5);
-  } else if (currentStep == 1) {
-    zoomTo(steps.map((d) => d.coordinates)[1], 5);
-  } else if (currentStep == 2) {
-    zoomTo(steps.map((d) => d.coordinates)[2], 5);
-  } else if (currentStep == 3) {
-    zoomTo(steps.map((d) => d.coordinates)[3], 5);
-  }
+    import { onMount } from "svelte";
+    import { geoMercator, geoPath } from "d3-geo";
+    import { ascending } from "d3-array";
+    import { select, selectAll } from "d3-selection";
+    import { draw } from "svelte/transition";
+    import { Column, Grid, Row } from "carbon-components-svelte";
+    import { zoom, zoomIdentity } from "d3-zoom";
+    import { steps } from "../assets/steps.js";
+
+    // Scroll
+    import Scroll from "./Scrolly.svelte";
+
+    // Scroll steps
+    let currentStep;
+
+    // Earthquakes API url
+    const url =
+        "https://emidius.mi.ingv.it/fdsnws/event/1/query?starttime=2000-01-01T00:00:00&endtime=2022-12-31T23:59:59&orderby=time-asc&limit=4000&format=json";
+
+    // Arrays storing data when fetched
+    let biggestEarthquakes = [];
+    let borders = [];
+    let cities = [];
+    let temporalEarthquakes = [];
+
+    // SVG properties
+    const margin = { top: 50, right: 50, bottom: 0, left: 50 },
+        w = window.innerWidth / 2 - margin.left - margin.right,
+        h = window.innerHeight - margin.top - margin.bottom;
+
+    //Define map projection and path
+    const projection = geoMercator()
+        .translate([w / 2 - 500, 2400])
+        .scale([2500]);
+    const path = geoPath().projection(projection);
+
+    const doZoom = (e) => {
+        selectAll("path").attr("transform", e.transform);
+        selectAll("circle").attr("transform", e.transform);
+        selectAll("text").attr("transform", e.transform);
+    };
+
+    // Zoom
+    const mapZoom = zoom().scaleExtent([1, 1]).on("zoom", doZoom);
+
+    // Tooltip
+    const showTooltip = (event, source_id) => {
+        let tooltip = document.getElementById(source_id);
+        tooltip.style.display = "block";
+        tooltip.style.left = event.layerX + 10 + "px";
+        tooltip.style.top = event.layerY + 10 + "px";
+    };
+    const hideTooltip = (event, source_id) => {
+        let tooltip = document.getElementById(source_id);
+        tooltip.style.display = "none";
+    };
+
+    const initZoom = () => {
+        select("svg").call(mapZoom).on("wheel.zoom", null);
+    };
+
+    const zoomTo = (coordinates, scale) => {
+        select("svg")
+            .transition()
+            .duration(4000)
+            .call(
+                mapZoom.transform,
+                zoomIdentity
+                    .translate(w / 2, h / 2)
+                    .scale(scale)
+                    .translate(
+                        -projection(coordinates)[0],
+                        -projection(coordinates)[1]
+                    )
+            );
+    };
+
+    // Fetch data and initialize zoom
+    onMount(async () => {
+        temporalEarthquakes = await fetch(url)
+            .then((response) => response.json())
+            .then((json) => json.features);
+        const sortedEarthquakes = temporalEarthquakes
+            .slice()
+            .sort((a, b) => ascending(a.properties.mag, b.properties.mag));
+        cities = await fetch("./data/cities.geojson")
+            .then((response) => response.json())
+            .then((json) => json.features);
+        biggestEarthquakes = sortedEarthquakes.slice(-10);
+
+        borders = await fetch("./data/limits_IT_regions.geojson")
+            .then((response) => response.json())
+            .then((json) => json.features);
+
+        initZoom();
+    });
+
+    $: if (currentStep == 0) {
+        zoomTo(steps.map((d) => d.coordinates)[0], 5);
+    } else if (currentStep == 1) {
+        zoomTo(steps.map((d) => d.coordinates)[1], 5);
+    } else if (currentStep == 2) {
+        zoomTo(steps.map((d) => d.coordinates)[2], 5);
+    } else if (currentStep == 3) {
+        zoomTo(steps.map((d) => d.coordinates)[3], 5);
+    }
 </script>
 
 <main>
-  {#if !mobile}
     <Grid>
-      <Row>
-        <Column>
-          <div id="map">
-            <svg width={w} height={h}>
-              <!--Italy regions shapes -->
-              <g fill="white" stroke="grey" stroke-width="0.1">
-                {#each borders as border, i}
-                  <path
-                    d={path(border)}
-                    in:draw={{ delay: i * 50, duration: 1500 }}
-                  />
-                {/each}
-              </g>
-
-              <g id="map">
-                {#each temporalEarthquakes as earthquake, i}
-                  <circle
-                    r={Math.pow(1.1, earthquake.properties.mag)}
-                    cx={projection([
-                      earthquake.geometry.coordinates[0],
-                      earthquake.geometry.coordinates[1],
-                    ])[0]}
-                    cy={projection([
-                      earthquake.geometry.coordinates[0],
-                      earthquake.geometry.coordinates[1],
-                    ])[1]}
-                    fill="#F12526"
-                    stroke-width="1"
-                    opacity="0.1"
-                    on:mouseover={showTooltip(
-                      event,
-                      earthquake.properties.source_id
-                    )}
-                    on:mouseout={hideTooltip(
-                      event,
-                      earthquake.properties.source_id
-                    )}
-                    on:blur={hideTooltip(
-                      event,
-                      earthquake.properties.source_id
-                    )}
-                    on:focus={showTooltip(
-                      event,
-                      earthquake.properties.source_id
-                    )}
-                  >
-                  </circle>
-                {/each}
-
-                {#each biggestEarthquakes as earthquake, i}
-                  <circle
-                    r={Math.pow(1.1, earthquake.properties.mag)}
-                    cx={projection([
-                      earthquake.geometry.coordinates[0],
-                      earthquake.geometry.coordinates[1],
-                    ])[0]}
-                    cy={projection([
-                      earthquake.geometry.coordinates[0],
-                      earthquake.geometry.coordinates[1],
-                    ])[1]}
-                    fill="#F12526"
-                    stroke-width="1"
-                  >
-                    <animate
-                      attributeName="r"
-                      from="0"
-                      to={Math.pow(1.3, earthquake.properties.mag)}
-                      dur="3s"
-                      begin="0s"
-                      repeatCount="indefinite"
-                    />
-                    <animate
-                      attributeName="opacity"
-                      from="1"
-                      to="0"
-                      dur="3s"
-                      begin="0s"
-                      repeatCount="indefinite"
-                    />
-                  </circle>
-
-                  <circle
-                    id="earthquakes"
-                    r={Math.pow(1.1, earthquake.properties.mag)}
-                    cx={projection([
-                      earthquake.geometry.coordinates[0],
-                      earthquake.geometry.coordinates[1],
-                    ])[0]}
-                    cy={projection([
-                      earthquake.geometry.coordinates[0],
-                      earthquake.geometry.coordinates[1],
-                    ])[1]}
-                    fill="#F12526"
-                    stroke-width="1"
-                    on:mouseover={showTooltip(
-                      event,
-                      earthquake.properties.source_id
-                    )}
-                    on:mouseout={hideTooltip(
-                      event,
-                      earthquake.properties.source_id
-                    )}
-                    on:blur={hideTooltip(
-                      event,
-                      earthquake.properties.source_id
-                    )}
-                    on:focus={showTooltip(
-                      event,
-                      earthquake.properties.source_id
-                    )}
-                  ></circle>
-                {/each}
-              </g>
-
-              {#each cities as city, i}
-                <circle
-                  r="1"
-                  cx={projection([
-                    city.geometry.coordinates[0],
-                    city.geometry.coordinates[1],
-                  ])[0]}
-                  cy={projection([
-                    city.geometry.coordinates[0],
-                    city.geometry.coordinates[1],
-                  ])[1]}
-                  fill="grey"
-                  stroke-width="1"
-                ></circle>
-                <text
-                  x={projection([
-                    city.geometry.coordinates[0],
-                    city.geometry.coordinates[1],
-                  ])[0] - 3}
-                  y={projection([
-                    city.geometry.coordinates[0],
-                    city.geometry.coordinates[1],
-                  ])[1] - 3}
-                  font-size="5px"
-                >
-                  {city.properties.name}
-                </text>
-              {/each}
-            </svg>
-
-            {#each temporalEarthquakes as earthquake, i}
-              <div
-                id={earthquake.properties.source_id}
-                display="none"
-                style="position: absolute; display: none;"
-              >
-                Magnitudo: <b>{earthquake.properties.mag} </b><br />
-                {new Date(earthquake.properties.time).toLocaleDateString(
-                  "fr-FR"
-                )}
-              </div>
-            {/each}
-          </div>
-        </Column>
-
-        <Column>
-          <section id="scroller">
-            <Scroll bind:value={currentStep}>
-              {#each steps as step, i}
-                <div class="step" class:active={currentStep === i}>
-                  <div class="step-content">
-                    <h1>{@html step.name}</h1>
-                    <p class="description">{@html step.description}</p>
-                    <br />
-                    <br />
-                    <figure>
-                      <img
-                        src={step.img}
-                        alt={step.name}
-                        width="400px"
-                        height="550px"
-                      />
-                      <figcaption style="padding: 20px">
-                        {step.caption}
-                      </figcaption>
-                    </figure>
-                  </div>
+        <Row>
+            <Column>
+                <div id="map">
+                    <svg width={w} height={h}>
+                        <!--Italy regions shapes -->
+                        <g fill="white" stroke="grey" stroke-width="0.1">
+                            {#each borders as border, i}
+                                <path
+                                    d={path(border)}
+                                    in:draw={{ delay: i * 50, duration: 1500 }}
+                                />
+                            {/each}
+                        </g>
+
+                        <g id="map">
+                            {#each temporalEarthquakes as earthquake, i}
+                                <circle
+                                    r={Math.pow(
+                                        1.1,
+                                        earthquake.properties.mag
+                                    )}
+                                    cx={projection([
+                                        earthquake.geometry.coordinates[0],
+                                        earthquake.geometry.coordinates[1]
+                                    ])[0]}
+                                    cy={projection([
+                                        earthquake.geometry.coordinates[0],
+                                        earthquake.geometry.coordinates[1]
+                                    ])[1]}
+                                    fill="#F12526"
+                                    stroke-width="1"
+                                    opacity="0.1"
+                                    on:mouseover={showTooltip(
+                                        event,
+                                        earthquake.properties.source_id
+                                    )}
+                                    on:mouseout={hideTooltip(
+                                        event,
+                                        earthquake.properties.source_id
+                                    )}
+                                    on:blur={hideTooltip(
+                                        event,
+                                        earthquake.properties.source_id
+                                    )}
+                                    on:focus={showTooltip(
+                                        event,
+                                        earthquake.properties.source_id
+                                    )}
+                                >
+                                </circle>
+                            {/each}
+
+                            {#each biggestEarthquakes as earthquake, i}
+                                <circle
+                                    r={Math.pow(
+                                        1.1,
+                                        earthquake.properties.mag
+                                    )}
+                                    cx={projection([
+                                        earthquake.geometry.coordinates[0],
+                                        earthquake.geometry.coordinates[1]
+                                    ])[0]}
+                                    cy={projection([
+                                        earthquake.geometry.coordinates[0],
+                                        earthquake.geometry.coordinates[1]
+                                    ])[1]}
+                                    fill="#F12526"
+                                    stroke-width="1"
+                                >
+                                    <animate
+                                        attributeName="r"
+                                        from="0"
+                                        to={Math.pow(
+                                            1.3,
+                                            earthquake.properties.mag
+                                        )}
+                                        dur="3s"
+                                        begin="0s"
+                                        repeatCount="indefinite"
+                                    />
+                                    <animate
+                                        attributeName="opacity"
+                                        from="1"
+                                        to="0"
+                                        dur="3s"
+                                        begin="0s"
+                                        repeatCount="indefinite"
+                                    />
+                                </circle>
+
+                                <circle
+                                    id="earthquakes"
+                                    r={Math.pow(
+                                        1.1,
+                                        earthquake.properties.mag
+                                    )}
+                                    cx={projection([
+                                        earthquake.geometry.coordinates[0],
+                                        earthquake.geometry.coordinates[1]
+                                    ])[0]}
+                                    cy={projection([
+                                        earthquake.geometry.coordinates[0],
+                                        earthquake.geometry.coordinates[1]
+                                    ])[1]}
+                                    fill="#F12526"
+                                    stroke-width="1"
+                                    on:mouseover={showTooltip(
+                                        event,
+                                        earthquake.properties.source_id
+                                    )}
+                                    on:mouseout={hideTooltip(
+                                        event,
+                                        earthquake.properties.source_id
+                                    )}
+                                    on:blur={hideTooltip(
+                                        event,
+                                        earthquake.properties.source_id
+                                    )}
+                                    on:focus={showTooltip(
+                                        event,
+                                        earthquake.properties.source_id
+                                    )}
+                                ></circle>
+                            {/each}
+                        </g>
+
+                        {#each cities as city, i}
+                            <circle
+                                r="1"
+                                cx={projection([
+                                    city.geometry.coordinates[0],
+                                    city.geometry.coordinates[1]
+                                ])[0]}
+                                cy={projection([
+                                    city.geometry.coordinates[0],
+                                    city.geometry.coordinates[1]
+                                ])[1]}
+                                fill="grey"
+                                stroke-width="1"
+                            ></circle>
+                            <text
+                                x={projection([
+                                    city.geometry.coordinates[0],
+                                    city.geometry.coordinates[1]
+                                ])[0] - 3}
+                                y={projection([
+                                    city.geometry.coordinates[0],
+                                    city.geometry.coordinates[1]
+                                ])[1] - 3}
+                                font-size="5px"
+                            >
+                                {city.properties.name}
+                            </text>
+                        {/each}
+                    </svg>
+
+                    {#each temporalEarthquakes as earthquake, i}
+                        <div
+                            id={earthquake.properties.source_id}
+                            display="none"
+                            style="position: absolute; display: none;"
+                        >
+                            Magnitudo: <b>{earthquake.properties.mag} </b><br
+                            />
+                            {new Date(
+                                earthquake.properties.time
+                            ).toLocaleDateString("fr-FR")}
+                        </div>
+                    {/each}
                 </div>
-              {/each}
-            </Scroll>
-          </section>
-        </Column>
-      </Row>
+            </Column>
+
+            <Column>
+                <section id="scroller">
+                    <Scroll bind:value={currentStep}>
+                        {#each steps as step, i}
+                            <div class="step" class:active={currentStep === i}>
+                                <div class="step-content">
+                                    <h1>{@html step.name}</h1>
+                                    <p class="description">
+                                        {@html step.description}
+                                    </p>
+                                    <br />
+                                    <br />
+                                    <figure>
+                                        <img
+                                            src={step.img}
+                                            alt={step.name}
+                                            width="400px"
+                                            height="550px"
+                                        />
+                                        <figcaption style="padding: 20px">
+                                            {step.caption}
+                                        </figcaption>
+                                    </figure>
+                                </div>
+                            </div>
+                        {/each}
+                    </Scroll>
+                </section>
+            </Column>
+        </Row>
     </Grid>
 
     <footer>
-      <small
-        ><code>Dati: Istituto Nazionale Geofisica et Vulcanologia</code></small
-      >
+        <small
+            ><code>Dati: Istituto Nazionale Geofisica et Vulcanologia</code
+            ></small
+        >
     </footer>
-  {/if}
 </main>
 
 <style>
-  h1 {
-    margin: 30px;
-    font-family: "Poppins";
-    color: #f12526;
-  }
-
-  footer {
-    text-align: right;
-    right: 0;
-    bottom: 0;
-    margin: 20px;
-    position: fixed;
-  }
-
-  .step {
-    height: 100%;
-    display: flex;
-    place-items: center;
-    justify-content: center;
-  }
-
-  .step-content {
-    color: #ccc;
-    padding: 1rem 1rem;
-    margin-bottom: 100px;
-    text-align: center;
-    transition:
-      background 500ms ease,
-      color 500ms ease;
-  }
-
-  .step.active .step-content {
-    background: white;
-    color: black;
-  }
-
-  .description {
-    font-size: 1.5em;
-  }
-
-  #map {
-    position: sticky;
-    top: 10%;
-    margin: auto;
-  }
-
-  #scroller {
-    margin-top: 20px;
-    padding-top: 10%;
-  }
-  img {
-    object-fit: contain;
-    max-width: 100%;
-    max-height: 500px;
-    width: auto;
-    height: auto;
-  }
+    h1 {
+        margin: 30px;
+        font-family: "Poppins";
+        color: #f12526;
+    }
+
+    footer {
+        text-align: right;
+        right: 0;
+        bottom: 0;
+        margin: 20px;
+        position: fixed;
+    }
+
+    .step {
+        height: 100%;
+        display: flex;
+        place-items: center;
+        justify-content: center;
+    }
+
+    .step-content {
+        color: #ccc;
+        padding: 1rem 1rem;
+        margin-bottom: 100px;
+        text-align: center;
+        transition:
+            background 500ms ease,
+            color 500ms ease;
+    }
+
+    .step.active .step-content {
+        background: white;
+        color: black;
+    }
+
+    .description {
+        font-size: 1.5em;
+    }
+
+    #map {
+        position: sticky;
+        top: 10%;
+        margin: auto;
+    }
+
+    #scroller {
+        margin-top: 20px;
+        padding-top: 10%;
+    }
+    img {
+        object-fit: contain;
+        max-width: 100%;
+        max-height: 500px;
+        width: auto;
+        height: auto;
+    }
 </style>