@font-face {
  font-family: "Ganz Egal";
  src: url("../decor/GanzEgal.ttf") format("truetype");
}

:root {
  --laceTrim: url(../decor/ea01-bg-lace.gif);
  --chambreWP: url("../decor/andromedaCup.jpg");
  --houseWallpaper: url("../decor/eltham.jpg") center/25px;
  --dollhouseBlend: normal;
  --roof: none;
}

h4 {font-family:"Ganz Egal", serif;font-size:3em;margin:0;font-weight:normal;}

/* Entire House */
#house {
  filter:drop-shadow(0px 1px 1px);
  margin:0 auto;
  transition: .22s width linear;
  width: 100%;
  shape-outside: url("neighbours/roof.png");
  shape-image-threshold: .5;
  shape-margin: 10px;
  margin-top:-80px;
}

/* Roof */
.roof {transition:inherit;}
.roof img {filter:var(--roof);}
.roof img, .door img {display:block;width:100%;transition:inherit;pointer-events:none;}
/* Interior */
.wall {
  background: var(--laceTrim) repeat-x top, var(--houseWallpaper), var(--violet);
  width: 90%;
  border: 5px solid transparent;
  border-image:linear-gradient(to bottom in oklch, #394a74 12px, var(--ash)) 1;
  border-top:none;
  box-shadow:0px 7px 8px 2px color-mix(in oklch, #394a74, var(--violet)) inset;
  margin: 0 auto;
  margin-top:-12px;
  transition:inherit;
  
  & > a {margin:0 auto;place-self:center;}
  }
  /* Rooms */
    /* My Bedroom */
  .rooms.chambre, .wall .rooms:first-child {
    background: var(--laceTrim) repeat-x top, repeat center/40px var(--chambreWP), var(--violet);
    background-blend-mode: var(--dollhouseBlend);
    padding-top:2.5em;
    box-shadow:0px 8px 8px 2px color-mix(in oklch, #1e2842, var(--violet)) inset;
  }
    /* Other Rooms */
  .rooms {
    background: var(--houseWallpaper), var(--violet);
    /* background-blend-mode: var(--dollhouseBlend);*/
    box-shadow: 0px 1px 8px 2px color-mix(in oklch, #1e2842, var(--ash)) inset;
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(88px, 1fr));
    grid-template-rows: repeat(auto-fill, minmax(31px, 1fr));
    margin: 0 auto;
    place-items: center;
    gap: .5em normal;
    padding: 1em;
    transition:inherit;
    
    & > a {
      display:flex;
      :hover {filter:drop-shadow(0px 0px 3px var(--violet));}
      & > img {image-rendering:pixelated;}
    }
  }
    /* Multiple Rooms on Same Floor */
  .flexfloor {
    display:flex;
    & > .rooms {
      margin:0;
      /* flex:1; --> add this manually to all rooms not given calculated widths */
      background-blend-mode: var(--dollhouseBlend);
    }
  }
  
  /* Inner Walls (Dividers) */
  .innerWall {
    background:color-mix(in oklch, var(--ash) 70%, var(--violet));
    width:5px;
  }
  /* Floors (Dividers) */
  .floor {
    width: 100%;
  margin:0;
  pointer-events: none;
  background: url("../decor/bord_acanthus.gif") center repeat-x;
  height: 1em;
  background-size: contain;
  mix-blend-mode: normal;
  box-shadow:0px 0px 6px 1px #66616c inset;
  }
  .wall > div:nth-last-of-type(2) {
    margin-bottom:0;
  }
/* Front Door & Facade */
  .door img {/*border-top:2px solid var(--ash);*/filter:var(--roof);/*mix-blend-mode:var(--dollhouseBlend);*/}
  
@media only screen and (min-device-width : 320px) and (max-device-width: 480px) {
  .container {width:75vw;margin-top:0;}
  .wall {width:75%;}
}
@media only screen and (min-device-width:320px) and (max-device-width:480px) and (orientation: portrait) {
  .wall {width:90%;}
}
@media (prefers-color-scheme: dark) {
  :root {
    --houseWallpaper: url("../decor/aquila.jpg") center/50px;
    --dollhouseBlend: difference;--roof:invert(1);
  }
}