* {
  margin: 0;
  padding: 0;
  text-align: center;
}

html, body {
  height: 100vh;
  width: 100vw;
}

body {
  overflow: hidden;
  background: linear-gradient(
    to right,
    rgba(239, 97, 97, 0.25),
    rgba(239, 97, 97, 0.25)
  ), url('/images/lyon-st-steps.svg');
  background-size: cover;
  background-position: center;
}

a {
  text-decoration: none
}

.title-container {
  height: 35vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  z-index: 5;
}

:root {
  --red-w: 75vmax;
  --red-h: 100%;
  --blue-w: 50vmax;
  --blue-h: 100%;
  --green-w: 25vmax;
  --green-h: 100%;
}

#landscape {
  width: 88%;
  height: 65vh;
  position: absolute;
  bottom: -1px;
  left: 12%;
}

.hill {
  position: absolute;
  background-repeat:no-repeat;
  background-size: 100%;
  background-position: bottom;
  bottom: 0px;
}

#red {
  background-image: url('/images/red.svg');
  z-index: 1;
  left: 30%;
  margin-left: calc(-1 * (var(--red-w) / 2));
  width: var(--red-w);
  height: var(--red-h);
}

#blue {
  background-image: url('/images/blue.svg');
  z-index: 2;
  left: 50%;
  margin-left: calc(-1 * (var(--blue-w) / 2));
  width: var(--blue-w);
  height: var(--blue-h);;
}

#green {
  background-image: url('/images/green.svg');
  z-index: 3;
  left: 68%;
  margin-left: calc(-1 * (var(--green-w) / 2));
  width: var(--green-w);
  height: var(--green-h);
}