:root {
  --background-vinette: linear-gradient(
    0deg,
    #ff8c42 0%,
    #fff39c 10%,
    #ecfff2 25%,
    #8bb2ff 50%,
    #212165 100%
  );
  --building-line: #554949;
  --building-fill: #b2afb6;
  --building-window: #f4d9be;
  --building-green: #171c19;
  --building-ground: rgb(110 112 125);
  --background-image-left: url("../images/honeycomb_7_white-01.png");
  --background-image-right: url("../images/honeycomb_7_white-02.png");
}

:root[data-season="summer"] {
  --background-vinette: linear-gradient(
    0deg,
    #d7ffd0 0%,
    #ffa347 20%,
    #ff8ac4 40%,
    #6b8fe5 80%,
    #52a8ff 100%
  );
  --building-ground: rgb(111 111 124);
}

:root[data-season="autumn"] {
  --background-vinette: linear-gradient(
    0deg,
    #ff8c42 0%,
    #fff39c 10%,
    #ecfff2 25%,
    #8bb2ff 50%,
    #212165 100%
  );
  --building-line: #554949;
  --building-fill: #b2afb6;
  --building-window: #f4d9be;
  --building-ground: rgb(110 112 125);
}

:root[data-season="winter"] {
  --background-vinette: linear-gradient(
    0deg,
    #f0f8ff 0%,
    #e6e6fa 20%,
    #b0e0e6 40%,
    #87ceeb 80%,
    #4682b4 100%
  );
  --building-fill: #b6b6ca;
  --building-line: #9d9eaf;
  --building-window: #e7f3ff;
  --building-ground: rgb(157 166 189);
}

:root[data-season="spring"] {
  --background-vinette: linear-gradient(
    0deg,
    #e7fb98 0%,
    #fc93a2 45%,
    #e279e2 60%,
    #3dbaeb 100%
  );
  --building-ground: rgb(129 115 132);
}

body {
  background: var(--background-vinette);
  position: relative;
}

.background {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.background::before,
.background::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 51%;
  max-width: 768px;
  height: 100%;
  background: transparent var(--background-image-left) repeat-y;
  opacity: 0.5;
  background-position: center right;
  background-size: contain;
}

.background::after {
  left: auto;
  right: 0;
  background-image: var(--background-image-right);
  background-position: center left;
  background-size: contain;
}

.cityscape-background {
  position: absolute;
  inset: 0 0 0 0;
  z-index: 1;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
}

.cityscape {
  position: relative;
  width: 100%;
  height: 35vw;
  min-height: 240px;
  overflow: hidden;
}

.cityscape .cityscape-ground {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 19vw;
  background-color: var(--building-ground);
  z-index: 0;
}

.cityscape svg {
  position: absolute;
  width: auto;
  height: 100%;
  object-fit: cover;
}

.cityscape svg .st0 {
  fill: var(--building-fill);
}

.cityscape svg .st1 {
  fill: var(--building-line);
}

.cityscape svg .st2 {
  fill: var(--building-window);
}

.cityscape svg .st3 {
  fill: var(--building-green);
}

.cityscape svg .suspect {
  fill: red;
}

.cityscape svg#city_backdrop {
  left: 50%;
  bottom: 10vw;
  height: 15vw;
  z-index: -1;
  transform: translateX(-50%);
}

.cityscape svg#city_backdrop .st3 {
  fill: var(--building-ground)
}

.cityscape svg#building_1 {
  left: 3%;
  bottom: 3vw;
  height: 26vw;
  z-index: 4;
}

.cityscape svg#building_2 {
  left: 10%;
  bottom: 2vw;
  height: 26vw;
  z-index: 3;
}

.cityscape svg#building_3 {
  left: 45%;
  bottom: 15vw;
  height: 10vw;
  z-index: 0;
}

.cityscape svg#building_4 {
  left: 30%;
  bottom: 13vw;
  height: 16vw;
  z-index: 2;
}

.cityscape svg#building_5 {
  right: -2%;
  bottom: 3vw;
  z-index: 2;
  height: 23vw;
}

.cityscape svg#building_6 {
  right: 42%;
  bottom: 17vw;
  height: 13vw;
}

.cityscape svg#building_7 {
  right: 17%;
  bottom: 15vw;
  z-index: 1;
  height: 20vw;
}

.cityscape svg#building_8 {
  right: -10vw;
  bottom: -3vw;
  z-index: 1;
  height: 28vw;
}

.cityscape svg#building_9 {
  left: 26%;
  bottom: 14vw;
  height: 12vw;
  z-index: 0;
}

.cityscape svg#building_10 {
  left: 82%;
  bottom: 16vw;
  height: 14vw;
  z-index: 0;
}

.cityscape svg#building_11 {
  left: 65%;
  bottom: 14vw;
  height: 13vw;
  z-index: 0;
}

.cityscape svg#building_12 {
    left: -6%;
    bottom: 0vw;
    height: 29vw;
    z-index: 4;
}

.cityscape svg#city_block_1,
.cityscape svg#city_block_2 {
  left: 25%;
  bottom: -2vw;
  height: 18vw;
  z-index: 5;
}

.cityscape svg#city_block_2 {
  z-index: 10;
}

.cityscape svg#city_decoration {
  left: 66%;
  bottom: 7vw;
  height: 13vw;
  z-index: 7;
  display: none;
}

.site-content,
.site-footer {
  position: relative;
  z-index: 2;
}

.site-footer {
  background: var(--footer-bg);
}

@media (max-width: 720px) {
  .cityscape {
    height: 45vw;
    min-height: 180px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-vinette: linear-gradient(
      0deg,
      #8b4513 0%,
      #d14242 10%,
      #fdea9d 25%,
      #2f5185 45%,
      #220c2f 80%
    );
    --building-fill: #363430;
    --building-line: #705c5c;
    --building-window: #d1b494;
    --building-ground: rgb(64 53 53);
    --background-image-left: url("../images/honeycomb_7-01.png");
    --background-image-right: url("../images/honeycomb_7-02.png");
  }

  :root[data-season="summer"] {
    --background-vinette: linear-gradient(
      0deg,
      #ff7f50 0%,
      #ff6b6b 20%,
      #ff4785 40%,
      #9b4f96 60%,
      #472d87 80%,
      #1a1b4b 100%
    );
    --building-ground: rgb(64 53 62);
  }

  :root[data-season="autumn"] {
    --background-vinette: linear-gradient(
      0deg,
      #8b4513 0%,
      #d14242 10%,
      #fdea9d 25%,
      #2f5185 45%,
      #220c2f 80%
    );
    --building-fill: #51504e;
    --building-line: #858080;
    --building-window: #fdb464;
    --building-ground: rgb(64 53 53);
  }

  :root[data-season="winter"] {
    --background-vinette: linear-gradient(
      0deg, 
      #064579 0%, 
      #333360 30%, 
      #000033 100%
    );
    --building-fill: #393b46;
    --building-line: #54545f;
    --building-window: #b1e2ff;
    --building-ground: rgb(12 11 20);
  }

  :root[data-season="spring"] {
    --background-vinette: linear-gradient(
      180deg,
      #1e0033 0%,
      #330033 20%,
      #4d1967 40%,
      #3d1f7a 60%,
      #372f6a 100%
    );
    --building-fill: #363430;
    --building-line: #5a4f64;
    --building-window: #d1c594;
    --building-ground: #141221;
  }
}

:root.theme-light {
  --background-vinette: linear-gradient(
    0deg,
    #ff8c42 0%,
    #fff39c 10%,
    #ecfff2 25%,
    #8bb2ff 50%,
    #212165 100%
  );
  --building-line: #554949;
  --building-fill: #b2afb6;
  --building-window: #f4d9be;
  --building-green: #c9cfcb;
  --building-ground: rgb(110 112 125);
  --background-image-left: url("../images/honeycomb_7_white-01.png");
  --background-image-right: url("../images/honeycomb_7_white-02.png");
}

:root.theme-light[data-season="summer"] {
  --background-vinette: linear-gradient(
    0deg,
    #d7ffd0 0%,
    #ffa347 20%,
    #ff8ac4 40%,
    #6b8fe5 80%,
    #52a8ff 100%
  );
  --building-ground: rgb(111 111 124);
}

:root.theme-light[data-season="autumn"] {
  --background-vinette: linear-gradient(
    0deg,
    #ff8c42 0%,
    #fff39c 10%,
    #ecfff2 25%,
    #8bb2ff 50%,
    #212165 100%
  );
  --building-line: #554949;
  --building-fill: #b2afb6;
  --building-window: #f4d9be;
  --building-ground: rgb(110 112 125);
}

:root.theme-light[data-season="winter"] {
  --background-vinette: linear-gradient(
    0deg,
    #f0f8ff 0%,
    #e6e6fa 20%,
    #b0e0e6 40%,
    #87ceeb 80%,
    #4682b4 100%
  );
  --building-fill: #b6b6ca;
  --building-line: #9d9eaf;
  --building-window: #e7f3ff;
  --building-ground: #bfc6d9;
}

:root.theme-light[data-season="spring"] {
  --background-vinette: linear-gradient(
    0deg,
    #e7fb98 0%,
    #fc93a2 45%,
    #e279e2 60%,
    #3dbaeb 100%
  );
  --building-line: #9e9494;
  --building-fill: #b2afb6;
  --building-window: #ecd9c6;
  --building-ground: #988aa0;
}

:root.theme-dark {
  --background-vinette: linear-gradient(
    0deg,
    #8b4513 0%,
    #d14242 10%,
    #fdea9d 25%,
    #2f5185 45%,
    #220c2f 80%
  );
  --building-fill: #51504e;
  --building-line: #858080;
  --building-window: #fdb464;
  --building-ground: rgb(64 53 53);
  --background-image-left: url("../images/honeycomb_7-01.png");
  --background-image-right: url("../images/honeycomb_7-02.png");
}

:root.theme-dark[data-season="summer"] {
  --background-vinette: linear-gradient(
    0deg,
    #ff7f50 0%,
    #ff6b6b 20%,
    #ff4785 40%,
    #9b4f96 60%,
    #472d87 80%,
    #1a1b4b 100%
  );
  --building-ground: rgb(64 53 62);
}

:root.theme-dark[data-season="autumn"] {
  --background-vinette: linear-gradient(
    0deg,
    #8b4513 0%,
    #d14242 10%,
    #fdea9d 25%,
    #2f5185 45%,
    #220c2f 80%
  );
  --building-fill: #51504e;
  --building-line: #858080;
  --building-window: #fdb464;
  --building-ground: rgb(64 53 53);
}

:root.theme-dark[data-season="winter"] {
  --background-vinette: linear-gradient(
    0deg,
    #4682b4 0%,
    #000080 60%,
    #000033 100%
  );
  --building-fill: #4e5060;
  --building-line: #a1a1ac;
  --building-window: #b1e2ff;
  --building-ground: rgb(12 11 20);
}

:root.theme-dark[data-season="spring"] {
  --background-vinette: linear-gradient(
    180deg,
    #1e0033 0%,
    #330033 20%,
    #4d1967 40%,
    #3d1f7a 60%,
    #372f6a 100%
  );
  --building-fill: #363430;
  --building-line: #5a4f64;
  --building-window: #d1c594;
  --building-ground: #141221;
}