SHOWING: First 60
:root {
font-size: calc(0.5em + 1vw);
--city-width: 19rem;
--city-height: 27rem;
--rows: 0;
background: black;
}
body {
font-family: sans-serif;
height: 100vh;
display: flex;
flex-direction: column;
}
#wrapper {
margin: auto;
text-align: center;
}
#city {
width: var(--city-height);
height: var(--city-height);
margin: 0 auto;
transform: scale(1, -1);
position: relative;
overflow: hidden;
outline: 1.5rem solid white;
}
p {
font-size: .6rem;
text-align: center;
margin-top: 2rem;
color: white;
line-height: 1rem;
letter-spacing: 0.05rem;
}
p a {
color: currentColor;
}
p a:hover {
color: #0f0;
}
/* BUTTON STYLES */
button {
font-size: 1rem;
padding: 1rem 2rem;
border: 2px solid currentColor;
background: transparent;
border-radius: 50px;
color: white;
letter-spacing: 0.05rem;
}
button:hover {
cursor: pointer;
}
button:active {
transform: translate(.1rem, .1rem)
}
/* ROW, BUILDING AND WINDOW STYLES */
div[class*="row"] {
height: calc(var(--city-height) / var(--rows));
overflow: hidden;
display: flex;
overflow: visible;
position: absolute;
bottom: 0;
left: -2rem;
background: grey;
}
div[class*="building"] {
display: grid;
transform: scale(1, -1);
border-radius: 2px;
margin-left: .2rem;
overflow: hidden;
}
div[class*="window"] {
width: calc(var(--city-width) / 80);
height: calc(var(--city-height) / 50);
border: 1px solid #554e50;
}
.building-style1 {
grid-template-columns: repeat(10, 1fr);
grid-gap: .5rem;
padding: .8rem 0.5rem;
}
.building-style1 .window {
width: calc(var(--city-width) / 25);
border-bottom: 0.2rem double;
opacity: 0.7;
}
.building-style1 > div:nth-of-type(3n) {
opacity: 1!important;
}
.building-style2 {
grid-template-columns: repeat(15, 1fr);
grid-gap: .05rem;
padding: .1rem .1rem;
}
.building-style2 > div:nth-of-type(11n) {
opacity: 0.5!important;
}
.building-style2 > div:nth-of-type(5n) {
opacity: 1!important;
}
.building-style3 {
grid-template-columns: repeat(5, 1fr);
grid-gap: 1rem;
padding: 1rem 1rem;
}
.building-style3 > div:nth-of-type(13n) {
background-color: transparent!important;
border: none;
}
.building-style3 .window{
border-top-left-radius: 50rem;
border-top-right-radius: 50rem;
border-top: 0.3rem solid #c1c1c1;
border-right: 0.3rem solid #c1c1c1;
border-left: 0.3rem solid #c1c1c1;
border-bottom: 0.3rem double grey;
border-width: 0.1rem;
height: calc(var(--city-height) / 22);
}
.building-style4 {
grid-template-columns: repeat(22, 1fr);
padding: 1.1rem 0.8rem;
}
.building-style4 > div:nth-of-type(11n),.building-style4 > div:nth-of-type(12n) {
background-color: transparent!important;
border: none;
}
.building-style4 .window {
border: 1px solid grey;;
}
.building-style5 {
grid-template-columns: repeat(11, 1fr);
grid-gap: .05rem;
padding: .8rem 0.2rem;
}
.building-style5 .window {
opacity: 0.8;
}
.building-style5 > div:nth-of-type(5n) {
opacity: 1!important;
}
.building-style5 > div:nth-of-type(27n) {
opacity: 0.5!important;
}
.building-style6 {
grid-template-columns: repeat(7, 1fr);
grid-gap: 0.1rem;
padding: .5rem 0.4rem;
}
.building-style6 .window{
border-bottom: .3rem double grey;
}
.building-style7 {
grid-template-columns: repeat(30, 1fr);
grid-gap: .3rem;
padding: 1rem;
}
.building-style7 .window {
height: calc(var(--city-height) / 28);
}
.building-style7 > div:nth-of-type(5n) {
opacity: 0.5!important;
}
.building-style8 {
grid-template-columns: repeat(8, 1fr);
grid-gap: .1rem;
padding: .5rem 1rem;
}
.building-style8 > div:nth-of-type(13n) {
background-color: transparent!important;
}
.building-style8 > div:nth-of-type(3n) {
opacity: 0.5;
}
.building-style8 > div:nth-of-type(35n) {
background-color: lightgrey;
}
.building-style8 > div:nth-of-type(27n) {
opacity: 0.5!important;
}
.building-style9 {
grid-template-columns: repeat(6, 1fr);
grid-gap: .05rem;
padding: 1rem;
}
.building-style10 {
grid-template-columns: repeat(18, 1fr);
grid-gap: .05rem;
padding: .5rem 1rem;
}
.building-style10 > div:nth-of-type(35n) {
background-color: transparent!important;
border: none;
}
.building-style10 > div:nth-of-type(3n) {
opacity: 1!important;
}
.building-style10 .window {
border-top-left-radius: 50%;
opacity: 0.7;
}
.building-style11 {
grid-template-columns: repeat(13, 1fr);
grid-gap: .05rem;
padding: .5rem 0.2rem;
}
.building-style11 .window {
border-style: double;
border: 0.1rem double #554e50;
}#60,934,796text#60,934,795js