Inscription #70289727#70,289,727webpInscription #60966195#60,966,195html: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,795jsInscription #60617814#60,617,814htmlInscription #60617809#60,617,809htmlInscription #60617797#60,617,797htmlInscription #60617793#60,617,793htmlInscription #60617790#60,617,790htmlInscription #60617785#60,617,785htmlInscription #60617782#60,617,782htmlInscription #60617778#60,617,778htmlInscription #60617765#60,617,765htmlInscription #56589366#56,589,366htmlInscription #56263155#56,263,155htmlInscription #54245544#54,245,544htmlInscription #54233871#54,233,871htmlInscription #54231938#54,231,938html