/* @import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap'); */

* {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;

   box-sizing: border-box;
}
.st0{fill:none;}
.st1{fill:none;stroke:#FF0000;stroke-miterlimit:10;}
html {
   height: 100vh;
}

body{
   min-height: 100%;

   cursor : url(1x/cursorarrow1.png), auto;
}
div { 
   position: relative;
}

img {
   height: auto;
   display: block;
}
a {
   cursor : url(1x/cursorgrab1.png), auto;
}

#page-title, 
#page-description{
   position: fixed;
   left: 50%;

   transform: translate(-50%, 0);

   pointer-events: none;
   z-index: 2;
}
#page-title {
   top: 2rem;
   max-width: 90vw;
   transform: translate(-50%, 0);
}
#page-description {
   bottom: 2rem;
   width: 100%;

   font-family: 'PT Sans', sans-serif;
   font-size: 24px;
   text-align: center;
}


#lines { 
   position: absolute;
   inset: 0;

   width: 100%;
   height: 100%;

   /* border: 4px dashed green; */

   pointer-events: none;
   z-index: 10;
}
#lines line,
#lines path { 
   stroke: red;
   stroke-width: 20px;
   fill: none;
   display: none;
}

.lines img{
   float: left;
}

.cityElements{
    width: 100%;
    /* aspect-ratio: width / height */
    /* aspect-ratio: 800 / 2240 */
    /* aspect-ratio: 5 / 14 */
   aspect-ratio: 1 / 2;

   /* isolation: isolate; */
   overflow: hidden;}

.cityElements a{
   position: absolute;

   translate: -50% -50%;

   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
}
.cityElements a img { max-width: 80vw }
.cityElements a img { max-width: 80vw }
.cityElements div img { max-width: 80vw }

.cityElements a img:hover { opacity: 0 }
/* container - global logistics */
/* .cityElements .container{ top: 10%; left: 90% }
.cityElements .container:hover {
   background-image: url("container.png");} */

.cityElements .consumerism{ top: 30%; left: 40%; z-index: 1;}
.cityElements .consumerism:hover {
   background-image: url("consumerism-hover.jpg.png");}

.cityElements .office{top: 30%; left: 10% }
.cityElements .office:hover {
   background-image: url("office.jpg");
}
.cityElements .pigeon{ top: 50%;  left: 80%;  z-index: 1;}
.cityElements .pigeon:hover {
   background-image: url("pigeon.gif");
}

.cityElements .ad { top: 14%; left: 16%;}
.cityElements .ad:hover{
   background-image: url("flyers.png");
}

.cityElements .cement { top: 48%; left: 10%;}
   .cityElements .cement:hover{
      background-image: url("cement.png");
   }

.cityElements .weather { top: 10%; left: 60%;}
   .cityElements .weather:hover{
      background-image: url("weather-hover.jpg");
   }
.cityElements .bedbug{ top: 40%; right: -20%;}
.cityElements .phone{top: 10%; right: -70%;}

.cityElements .ciga{top: 55%; right: -25%; z-index: 2;}

.cityElements .pipe{top: 78%; left: 11%;}

.cityElements .container{top: 23%; right: -46%;}

/* .cityElements .cement { top: 60%; left: -20% }
.cityElements .cement:hover{
   background-image: url("cement.gif");
} */

.cityElements .modularsystem { bottom: 8%; left: 40% }
.cityElements .modularsystem:hover{
   background-image: url("modularsystem.jpg"); 
}

.cityElements .Flora { bottom: 40%; right: 10% }
.cityElements .Flora:hover{
   background-image: url("Flora/street\ plants-min.jpg"); 
}

.cityElements .Fauna { bottom: 30%; left: 30% }
.cityElements .Fauna:hover{
   background-image: url("urbananimal.jpg"); 
}

.cityElements .energy-consumption{ bottom:-15%; right: -30%}
.cityElements .energy-consumption:hover{
   background-image: url("energyconsumption-hover.png"); 
}
.cityElements .material{ bottom: 0%; right: 0% }
.cityElements .material:hover{
   background-image: url("plastic.gif"); 
}


#page-content {
   position: fixed;
   inset: 0;
   padding: 1em 13vw 5em calc(26vw + 1em);

   background: white;
   overflow: hidden;
   overflow-y: auto;

   display: none;
   z-index: 11;
}
#page-content.intro-page {
   padding: 2em 13vw 5em;
   background-color: black;
}
#page-content.intro-page p {
   font-size: 1rem;
   font-style: italic;
   color: white;
   font-family: "acumin-pro", sans-serif;
}

html.content-display {
   overflow: hidden;
}
html.content-display #page-content {
   display: block;
}