html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #bfe8ff;
  }

  body {
    display: grid;
    place-items: center;
  }

  .wrap {
    width: 100vw;
    height: 100vh;
    display: grid;
    place-items: center;
  }

  svg {
    width: 100%;
    height: 100%;
    display: block;
  }

      a {
        cursor: pointer;
      }

      /* =========================
         Base Colors
      ========================= */
      .sea {
        fill: #6ec5ff;
        animation: seaDayNight 24h linear infinite;
      }

      .island {
        fill: #f4c78a;
      }

      .island-ear {
        fill: #f0bf7c;
      }

      .plaza {
        fill: #fff6e8;
      }

      .harbor-water {
        fill: #8ed0f5;
      }

      .harbor-edge {
        fill: none;
        stroke: #7fb5d8;
        stroke-width: 3;
      }

      .dock {
        fill: #c79b6b;
      }

      /* =========================
         Lines / Roads / Waves
      ========================= */
      .wave {
        fill: none;
        stroke: white;
        stroke-opacity: 0.45;
        stroke-width: 4;
        stroke-linecap: round;
      }

      .road {
        fill: none;
        stroke: #d8c29b;
        stroke-width: 18;
        stroke-linecap: round;
      }

      .road-line {
        fill: none;
        stroke: #f6ead6;
        stroke-width: 5;
        stroke-linecap: round;
      }

      /* =========================
         Labels
      ========================= */
      .label {
        font-weight: 500;
        fill: #5b4a3a;
        text-anchor: middle;
      }

      .sub {
        font-size: 14px;
        fill: #5b4a3a;
        text-anchor: middle;
      }

      .small-label {
        font-weight: 700;
        fill: #5b4a3a;
        text-anchor: middle;
      }

      .tiny {
        font-size: 12px;
        fill: #5b4a3a;
        text-anchor: middle;
      }

      /* =========================
         Optional House Colors
      ========================= */
      .house-wall {
        fill: #f7ecd2;
      }

      .house-roof {
        fill: #d7866a;
      }

      .house-door {
        fill: #8c5b45;
      }

      .house-window {
        fill: #d9f1ff;
      }

      /* =========================
         Day / Night
      ========================= */
      @keyframes seaDayNight {
        0% {
          fill: #6ec5ff;
        }
        25% {
          fill: #4a8ed0;
        }
        50% {
          fill: #1f3f6b;
        }
        75% {
          fill: #4a8ed0;
        }
        100% {
          fill: #6ec5ff;
        }
      }