/* Skyline Theme */
:root{
    --building-color1:#000;
    --building-color2:#000;
    --building-color3:#000;
    --building-color4:#000;

    --window-color1:#999;
    --window-color2:#999;
    --window-color3:#999;
    --window-color4:#999;
}
*{
    box-sizing:border-box;
}

body{
    height:100vh;
    margin:0;
    overflow: hidden;
}
.background-buildings, .foreground-buildings{
    width:100%;
    height:100vh;
    display:flex;
    align-items:flex-end;
    justify-content: space-evenly;
    position:absolute;
    top:0;
}
/* City Layout */
.building-wrap{
   display:flex;
   flex-direction:column;
   align-items:center; 
}
.window-wrap{
    display:flex;
    align-items: center;
    justify-content:space-evenly;
}
/* Background Buildings */
.bb1{
    width:6%;
    height:90%;
}
.bb1-window{
    height: 10%;
    background:linear-gradient(
    var(--building-color1),
    var(--window-color1)
    );
}
.bb1a{
    width:70%;
}
.bb1b{
width: 80%;
}
.bb1c{
    width: 90%;
}
.bb1d{
    width: 100%;
    height:70%;
    background: linear-gradient(
    var(--building-color1) 50%,
    var(--window-color1)
    );
}
.bb2{
    width:10%;
    height:65%;
}
.bb2b{
    width:100%;
    height:92%;
    background:repeating-linear-gradient(
        var(--building-color2),
        var(--building-color2) 6%,
        var(--window-color2) 6%,
        var(--window-color2)  9%
    );
}
.bb2a{
    border-bottom:8vh solid var(--building-color2);
    border-left:5vw solid transparent;
    border-right:5vw solid transparent;
}
.bb3{
    width:8%;
    height:65%;
    background:repeating-linear-gradient(90deg,
    var(--building-color3) 0%,
    var(--building-color3) 7.5%,
    var(--window-color3) 15%
    );

}
.bb4{
    width:10%;
    height:85%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.bb4-window{
    width:18%;
    height:90%;
    background-color:var(--window-color4);
}
.bb4a{
    width:2%;
    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);
}
/*Foreground Buildings */
.fb1{
    width:7%;
    height:75%;
}
.fb1a{
    border-bottom: 7vh solid var(--building-color4);
    border-left: 2vw solid transparent;
    border-right: 2vw solid transparent;
}
.fb1b{
    width:55%;
    height:12%;
    background-color:var(--building-color4);
}
.fb1c{
    width:100%;
    height:80%;
    background-color:var(--building-color4);
    background:repeating-linear-gradient(
        90deg,
        var(--building-color4) 0%,
        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:8%;
    height:40%;
}
.fb2-window{
    width:2%;
    height:100%;
    background-color:var(--window-color3);
}
.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);
}
.fb3{
    width:8%;
    height:35%;
}
.fb3-window{
    width:25%;
    height:80%;
    background-color:var(--window-color1);
}
.fb3a{
    width:80%;
    height:15%;
    background-color:var(--building-color1);
}
.fb3b{
width:100%;
height:35%;
background-color:var(--building-color1);
}
.fb4{
    width:8%;
    height:45%;
    position: relative;
    left:10%;
}
.fb4-window{
    width:30%;
    height:10%;
    border-radius:50%;
    background-color: var(--building-color1);
    margin:10%;

}
.fb4a{
    border-top:5vh solid transparent;
    border-left:8vw solid var(--building-color1);
}
.fb4b{
    width:100%;
    height:89%;
    background-color: var(--building-color1);
    display:flex;
    flex-wrap:wrap;
}
.fb5{
    width:8%;
    height:30%;
    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:8%;
    height:55%;
    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%
    );
}
.sky {
    background: radial-gradient(
      closest-corner circle at 10% 10%,
      #ffcf33,
      #ffcf33 20%,
      #ffff66 21%,
      #bbeeff 100%
    );
}
/*Responsive Design */
@media(max-width:1000px){
    :root{
        --building-color1: #000;
        --building-color2: #000;
        --building-color3: #000;
        --building-color4: #000;
        --window-color1: #999;
        --window-color2: #999;
        --window-color3: #999;
        --window-color4: #999;
    }
}