@font-face {
  font-family: "kulbaskervilleregular";
  src: url("font/kulbaskerville-webfont.eot");
  src:
    url("font/kulbaskerville-webfont.eot?#iefix") format("embedded-opentype"),
    url("font/kulbaskerville-webfont.woff2") format("woff2"),
    url("font/kulbaskerville-webfont.woff") format("woff"),
    url("font/kulbaskerville-webfont.ttf") format("truetype"),
    url("font/kulbaskerville-webfont.svg#kulbaskervilleregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

html {
  overflow-x: hidden;
  font-family: "kulbaskervilleregular";
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
figcaption {
  display: block;
}

#container {
  position: relative;
  padding: 0;
  margin: 0;

  width: 100%;
  height: 100%;
}
em {
  font-size: 70%;
}

#mars {
  position: absolute;
  float: left;
  margin-top: -4%;
  margin-left: -2%;

  height: 33%;
}

#slon {
  position: absolute;
  float: left;
  margin-top: 5%;
  margin-left: 7%;
  height: 20%;
  cursor: pointer;
}
#slon2 {
  position: absolute;
  float: left;
  margin-top: calc(5% + 130px);
  margin-left: calc(7% + 100px);
  height: 10%;
  font-size: 1.1vw;
}

#zwierz {
  position: absolute;
  float: left;
  margin-top: 16%;
  margin-left: 18%;
  height: 13%;
  text-align: center;
}

#zwierz2 {
  position: absolute;
  float: left;
  margin-top: calc(16% + 86px);
  margin-left: calc(10% + 110px);
  height: 13%;
  font-size: 0.8vw;
  text-align: center;
}
#kuna {
  position: absolute;
  float: left;
  margin-top: 21%;
  margin-left: 34%;
  height: 12%;
}
#kuna2 {
  position: absolute;
  float: left;
  margin-top: calc(21% + 75px);
  margin-left: calc(34% + 30px);
  height: 12%;
  font-size: 0.8vw;
}
#lew {
  position: absolute;
  float: left;
  margin-top: 320px;
  margin-left: 2%;
  height: 12%;
}
#lew2 {
  position: absolute;
  float: left;
  margin-top: calc(320px + 7%);
  margin-left: 2%;
  text-align: center;
  font-size: 0.8vw;
}
#wilk {
  position: absolute;
  float: left;
  margin-top: 38%;
  margin-left: 6%;
  height: 10%;
}

#wilk2 {
  position: absolute;
  float: left;
  margin-top: calc(38% + 65px);
  margin-left: calc(6% + 15px);
  text-align: center;
  font-size: 0.8vw;
}

#smok {
  position: absolute;
  float: left;
  margin-top: 29%;
  margin-left: 20%;
  height: 30%;
}
#smok2 {
  position: absolute;
  float: left;
  margin-top: calc(29% + 175px);
  margin-left: calc(20% + 55px);
  font-size: 0.8vw;
}
#gosc {
  position: absolute;
  margin-top: 47%;
  margin-left: 11%;
  height: 10%;
}
#gosc2 {
  position: absolute;
  margin-top: calc(47% + 60px);
  margin-left: calc(11% + 70px);
  font-size: 0.8vw;
}

#SZG {
  position: absolute;
  top: 40%;
  left: 50%;
  margin-top: -15%;
  margin-left: -5%;
  width: 20%;
  height: auto;
  cursor: pointer;
}

#quiz {
  position: absolute;
  float: left;
  margin-top: 44%;
  margin-left: 43%;
  height: 12%;
}
#quiz2 {
  position: absolute;
  float: left;
  margin-top: calc(44% + 30px);
  margin-left: calc(43% + 80px);
  font-size: 0.8vw;
}
#kula1 {
  position: absolute;
  float: left;
  margin-top: -2%;
  margin-left: 60%;

  height: 33%;
}
#sus {
  position: absolute;
  float: left;
  margin-top: 4%;
  margin-left: 68%;

  height: 33%;
}
#sus2 {
  position: absolute;
  float: left;
  margin-top: 1%;
  margin-left: 71%;
  font-size: 0.9vw;
  text-align: center;
}
#kula2 {
  position: absolute;
  float: left;
  margin-top: 13%;
  margin-left: 82%;

  height: 33%;
}
#konik {
  position: absolute;
  float: left;
  margin-top: 38%;
  margin-left: 63%;

  height: 11%;
}
#konik2 {
  position: absolute;
  float: left;
  margin-top: calc(38% + 80px);
  margin-left: calc(63% + 5px);
  text-align: center;
  font-size: 0.8vw;
}

#D1 {
  position: absolute;
  float: right;
  margin-top: 1.5%;
  margin-left: 32%;
  height: 8%;
}
#D2 {
  position: absolute;
  float: right;
  margin-top: 3%;
  margin-left: 56%;
  height: 9%;
}
#D3 {
  position: absolute;
  float: right;
  margin-top: 17%;
  margin-left: 63%;
  height: 11%;
}
#D4 {
  position: absolute;
  float: right;
  margin-top: 10%;
  margin-left: 77%;

  height: 15%;
}
#D5 {
  position: absolute;
  float: right;
  margin-top: 23%;
  margin-left: 70%;
  height: 24%;
}
#D6 {
  position: absolute;
  float: right;
  margin-top: 6%;
  margin-left: 84%;
  height: 7%;
}
#ptak {
  position: absolute;
  float: right;
  margin-top: 1%;
  margin-left: 90%;
  height: 7%;
}
#ptak2 {
  position: absolute;
  float: right;
  margin-top: calc(1% + 55px);
  margin-left: calc(91% + 5px);
  text-align: center;
  line-height: 0.9;
  margin-right: 1%;
  font-size: 8px;
}
#romb {
  float: right;
  margin-right: -200px;
  width: 500px;
  margin-top: 18%;
}
#mapa {
  position: absolute;
  margin-top: 2%;
  margin-bottom: -1%;
  width: 100%;
}

@media screen and (max-width: 768px) {
  /* 1. zmniejsz całą scenę jako jedną warstwę */
  #container {
    transform: scale(0.6);
    transform-origin: top left;
    width: 166%;
    height: auto;
  }

  /* 2. popraw teksty żeby nie były za duże */
  p,
  #slon2,
  #zwierz2,
  #kuna2,
  #lew2,
  #wilk2,
  #gosc2,
  #smok2,
  #quiz2,
  #sus2,
  #konik2,
  #ptak2 {
    font-size: 10px !important;
  }

  /* 3. mapa jako tło stabilne */
  #mapa {
    position: relative;
    width: 100%;
    height: auto;
  }
}