/* ============================================================
   Root colors for buildings and windows
   ============================================================ */
:root {
  --building-color1: #aa80ff;
  --building-color2: #66cc99;
  --building-color3: #cc6699;
  --building-color4: #538cc6;
  --window-color1: #bb99ff;
  --window-color2: #8cd9b3;
  --window-color3: #d98cb3;
  --window-color4: #8cb3d9;
}

body {
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* ============================================================
   Skyline containers
   ============================================================ */
.background-buildings,
.foreground-buildings {
  width: 100vw;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
  position: absolute;
	left: 0;
  top: 0;
}

.building-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.window-wrap {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.sky {
  background: radial-gradient(
    closest-corner circle at 15% 15%,
    #ffcf33,
    #ffcf33 20%,
    #ffff66 21%,
    #bbeeff 100%
  );
}

/* ============================================================
   BACKGROUND BUILDINGS
   bb = background building
   ============================================================ */
.bb1 { width: 10%; height: 70%; }
.bb1a { width: 70%; }
.bb1b { width: 80%; }
.bb1c { width: 90%; }
.bb1d {
  width: 100%;
  height: 70%;
  background: linear-gradient(var(--building-color1) 50%, var(--window-color1));
}
.bb1-window {
  height: 10%;
  background: linear-gradient(var(--building-color1), var(--window-color1));
}

.bb2 { width: 10%; height: 50%; }
.bb2a {
  border-bottom: 5vh solid var(--building-color2);
  border-left: 5vw solid transparent;
  border-right: 5vw solid transparent;
}
.bb2b {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    var(--building-color2),
    var(--building-color2) 6%,
    var(--window-color2) 6%,
    var(--window-color2) 9%
  );
}

.bb3 {
  width: 10%;
  height: 55%;
  background: repeating-linear-gradient(
    90deg,
    var(--building-color3),
    var(--building-color3),
    var(--window-color3) 15%
  );
}

.bb4 { width: 11%; height: 58%; }
.bb4a { width: 3%; height: 10%; background-color: var(--building-color4); }
.bb4b { width: 80%; height: 5%; background-color: var(--building-color4); }
.bb4c { width: 100%; height: 85%; background-color: var(--building-color4); }
.bb4-window { width: 18%; height: 90%; background-color: var(--window-color4); }

/* ============================================================
   FOREGROUND BUILDINGS
   fb = foreground building
   ============================================================ */
.fb1 { width: 10%; height: 60%; }
.fb1a {
  border-bottom: 7vh solid var(--building-color4);
  border-left: 2vw solid transparent;
  border-right: 2vw solid transparent;
}
.fb1b { width: 60%; height: 10%; background-color: var(--building-color4); }
.fb1c {
  width: 100%;
  height: 80%;
  background: 
    repeating-linear-gradient(
      90deg,
      var(--building-color4),
      var(--building-color4) 10%,
      transparent 10%,
      transparent 15%
    ),
    repeating-linear-gradient(
      var(--building-color4),
      var(--building-color4) 10%,
      var(--window-color4) 10%,
      var(--window-color4) 90%
    );
}

.fb2 { width: 10%; height: 40%; }
.fb2a {
  width: 100%;
  border-bottom: 10vh solid var(--building-color3);
  border-left: 1vw solid transparent;
  border-right: 1vw solid transparent;
}
.fb2b { width: 100%; height: 75%; background-color: var(--building-color3); }
.fb2-window { width: 22%; height: 100%; background-color: var(--window-color3); }

.fb3 { width: 10%; height: 35%; }
.fb3a { width: 80%; height: 15%; background-color: var(--building-color1); }
.fb3b { width: 100%; height: 35%; background-color: var(--building-color1); }
.fb3-window { width: 25%; height: 80%; background-color: var(--window-color1); }

.fb4 { width: 8%; height: 45%; position: relative; left: 10%; }
.fb4a {
  border-top: 5vh solid transparent;
  border-left: 8vw solid var(--building-color1);
}
.fb4b {
  width: 100%;
  height: 89%;
  display: flex;
  flex-wrap: wrap;
  background-color: var(--building-color1);
}
.fb4-window {
  width: 30%;
  height: 10%;
  border-radius: 50%;
  background-color: var(--window-color1);
  margin: 10%;
	position: relative;
}

.fb5 {
  width: 10%;
  height: 33%;
  position: relative;
  right: 10%;
  background: 
    repeating-linear-gradient(
      var(--building-color2),
      var(--building-color2) 5%,
      transparent 5%,
      transparent 10%
    ),
    repeating-linear-gradient(
      90deg,
      var(--building-color2),
      var(--building-color2) 12%,
      var(--window-color2) 12%,
      var(--window-color2) 44%
    );
}

.fb6 {
  width: 9%;
  height: 38%;
  background: 
    repeating-linear-gradient(
      90deg,
      var(--building-color3),
      var(--building-color3) 10%,
      transparent 10%,
      transparent 30%
    ),
    repeating-linear-gradient(
      var(--building-color3),
      var(--building-color3) 10%,
      var(--window-color3) 10%,
      var(--window-color3) 30%
    );
}

footer {
  position: relative;
  z-index: .1;
}

/* ============================================================
   night view for smaller screens
   ============================================================ */
@media (max-width: 992px) {
  :root {
    --building-color1: #000;
    --building-color2: #000;
    --building-color3: #000;
    --building-color4: #000;
    --window-color1: #777;
    --window-color2: #777;
    --window-color3: #777;
    --window-color4: #777;
  }

  .sky {
    background: radial-gradient(
      closest-corner circle at 15% 15%,
      #ccc,
      #ccc 20%,
      #445 21%,
      #223 100%
    );
  }
	.fb4-window:nth-child(4)::after {		
	filter: drop-shadow(0 0 3px rgba(255,255,200,0.8));
	}
}

/* ============================================================
   SQUIRREL
   ============================================================ */
/* Tiny squirrel in middle-right window of FB4 */
.fb4-window:nth-child(4)::after {
  content: "";
  position: absolute;
  inset: 10%;
  pointer-events: none;

  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='3 -4 64 64' role='img' aria-label='Squirrel icon'>\
  <circle cx='42' cy='30' r='18' fill='%23C68642'/>\
  <ellipse cx='28' cy='36' rx='12' ry='14' fill='%238D5524'/>\
  <circle cx='24' cy='20' r='10' fill='%238D5524'/>\
  <circle cx='27' cy='10' r='4' fill='%238D5524'/>\
  <circle cx='22' cy='17' r='2' fill='%23000'/>\
  <circle cx='16' cy='22' r='1.5' fill='%23000'/>\
  <circle cx='20' cy='44' r='5' fill='%238D5524'/>\
</svg>");

  background-repeat: no-repeat;
  background-position: center 125%;
  background-size: contain;
}