* {
  box-sizing: border-box
}

@font-face {
  font-family: myFont;
  /* set name */
  src: url(../font/Version_0.4_100_skeletor_avec.ttf);
  /* url of the font */
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior-x: none;
}
a{
  color:aqua;
}
div {
  font-family: 'myFont';
  letter-spacing: 5%;
  line-height: 125%;
  color: white;
    text-shadow:
    3px 3px 0 #000,
    -3px 3px 0 #000,
    -3px -3px 0 #000,
    3px -3px 0 #000;
}
h1{
  line-height: 105%;
}

.window {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  cursor: grab;
}

.window:active {
  cursor: grabbing;
}

.world {
  position: relative;
  width: 4096px;
  height: 5048px;
  background: url(../images/BG/background-dark.png);
}

.item {
  position: absolute;
}

#item1 {
  top: 1200px;
  left: 800px;
  width: 300px;
  height: 200px;
  background: #1C31E9;
  color: white;
  padding: 20px;
  text-align: center;
  display: none;
}

#item2 {
  top: 1300px;
  left: 2500px;
  width: 200px;
  height: 200px;
  background: #1C93E9;
  color: white;
  padding: 20px;
  text-align: center;
  display: none;
}

#logo {
  top: 300px;
  left: 1050px;
  width: calc(3540px/2/2);
  height: calc(758px/2);
  background: url(../images/logo/player.png) no-repeat left center / auto 100%;
  animation: animation-logo 1600ms steps(2) infinite;
}

@keyframes animation-logo {
  0% {
    background-position: 0px 0px;
  }

  100% {
    background-position: calc(-3540px/2) 0px;
  }
}

#tarpit {
  top: 1200px;
  left: 1800px;
  width: calc(3129px/3/2);
  height: calc(764px/2);
  background: url(../images/islands/tarpit.png) no-repeat left center / auto 100%;
  animation: animation-tarpit 500ms steps(3) infinite;
  z-index: 1;
}

@keyframes animation-tarpit {
  0% {
    background-position: 0px 0px;
  }

  100% {
    background-position: calc(-3129px/2) 0px;
  }
}

#zipbomb {
  top: 1100px;
  left: 2450px;
  width: calc(1144px/2);
  height: calc(2751px/7/2);
  background: url(../images/islands/zipbomb.png) no-repeat left center / 100% auto;
  animation: animation-zipbomb 1600ms steps(7) infinite;
  z-index: 1;
}

@keyframes animation-zipbomb {
  0% {
    background-position: 0px 0px;
  }

  100% {
    background-position: 0px calc(-2751px/2);
  }
}
#crawler{
  top: 1500px;
  left: 2200px;
  width: 320px;
  height: 180px;
  background: url(../images/comics/crawler.png) no-repeat left center / auto 100%;
  animation: shake 2s infinite steps(2);
  image-rendering: pixelated;
}
#crawler_txt{
  top: 1700px;
  left: 2200px;
  width: 320px;
  height: auto;
}
#zipdead{
  top: 1200px;
  left: 2650px;
  width: 427px;
  height: 214px;
  background: url(../images/comics/zipdead.png) no-repeat left center / auto 100%;
  animation: shake 2s infinite steps(2);
  image-rendering: pixelated;
}
#zipdead_txt{
  top: 1400px;
  left: 2700px;
  width: 360px;
  height: auto;
}
#table{
  top: 1650px;
  left: 2700px;
  width: 800px;
  height: auto;
  padding: 0.5em 1em 0em 1em;
  border: 5px solid white;
  rotate: -2deg;
}
#info{
  top: 2050px;
  left: 2400px;
  width: 400px;
  height: auto;
  padding: 1em;
  background-color: #000;
  border-top: 15px solid #DDBB22;
  rotate: -2deg;
}
#warning {
  top: 1200px;
  left: 1750px;
  width: 640px;
  height: 360px;
  background: url(../images/comics/warning.png) no-repeat left center / auto 100%;
  animation: animation-warning 1500ms steps(8) infinite;
  transform: scale(1.6);
  image-rendering: pixelated;
  visibility: hidden;
}
#warning2 {
  top: 1000px;
  left: 2350px;
  width: 640px;
  height: 360px;
  background: url(../images/comics/warning.png) no-repeat left center / auto 100%;
  animation: animation-warning 1500ms steps(8) infinite;
  transform: scale(1.6);
  image-rendering: pixelated;
  visibility: hidden;
}
@keyframes animation-warning {
  0% {
    background-position: 0px 0px;
  }

  100% {
    background-position: -5120px 0px;
  }
}

#why {
  top: 770px;
  left: 850px;
  width: 500px;
  height: 350px;
  background: url(../images/comics/why.png) no-repeat left center / auto 100%;
}

#title1 {
  top: 700px;
  left: 1550px;
  width: calc(1280px/2);
  height: calc(804px/2);
  background: url(../images/comics/title1.png) no-repeat left center / 90%;
}

#title1:hover , #why:hover, #link1:hover, #link2:hover{
  transform: scale(0.95);
  animation: blink 0.1s steps(5, start) infinite;
}

@keyframes blink {
  to {
    visibility: hidden;
  }
}

#fifteenmin {
  top: 1200px;
  left: 150px;
  width: calc(1590px/1.4);
  height: calc(1040px/1.4);
  background: url(../images/comics/15min.png) no-repeat left center / auto 100%;
  animation: shake 4s infinite steps(2);
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px)
  }

  10% {
    transform: translate(-1px, -2px);
  }

  30% {
    transform: translate(3px, 2px);
  }

  40% {
    transform: translate(1px, -1px);
  }

  50% {
    transform: translate(-1px, 2px);
  }

  60% {
    transform: translate(-3px, 1px);
  }

  70% {
    transform: translate(3px, 1px);
  }

  80% {
    transform: translate(-1px, -1px);
  }

  90% {
    transform: translate(1px, 2px);
  }

  100% {
    transform: translate(1px, -2px);
  }
}

#city15 {
  top: 1410px;
  left: 700px;
  width: calc(450px);
  height: calc(1040px/3);
  image-rendering: pixelated;
  background: url(../images/comics/15min_small.png) no-repeat left center / auto 100%;
  animation: shake 5s infinite steps(2);
}

#text1 {
  top: 1150px;
  left: 800px;
  width: 500px;
  height: auto;
}

#text2 {
  top: 2000px;
  left: 300px;
  width: 600px;
  height: auto;
}

#public{
  top: 2410px;
  left: 600px;
  width: 580px;
  height: 540px;
  background: url(../images/comics/public.png) no-repeat left center / 100%;
}


#text3 {
  top: 3000px;
  left: 700px;
  width: 300px;
  height: auto;
}

#blog{
  top: 2900px;
  left: 1050px;
  width: 700px;
  height: 700px;
  background: url(../images/comics/blog.png) no-repeat left center / 100%;
}

#public:hover, #blog:hover {
  transform: scale(1.6);
  z-index: 1;
}
 #tarpit:hover, #zipbomb:hover{
  transform: scale(1.5);
  z-index: 1;
  animation: shake 0.2s infinite steps(2);
}

#text4 {
  top: 3600px;
  left: 950px;
  width: 200px;
  height: auto;
}

#img1 {
  top: 3600px;
  left: 1200px;
  width: 370px;
  height: 450px;
  background: url(../images/comics/img1.png) no-repeat left center / 100%;
}

#text5 {
  top: 4000px;
  left: 1650px;
  width: 200px;
  height: auto;
}

#img2 {
  top: 3900px;
  left: 1900px;
  width: 370px;
  height: 560px;
  background: url(../images/comics/img2.png) no-repeat left center / 100%;
}
#img3 {
  top: 3900px;
  left: 2300px;
  width: 400px;
  height: 300px;
  background: url(../images/comics/img3.png) no-repeat left center / 100%;
}
#img4 {
  top: 4200px;
  left: 2300px;
  width: 460px;
  height: 300px;
  background: url(../images/comics/img4.png) no-repeat left center / 100%;
}
#img5 {
  top: 3700px;
  left: 2700px;
  width: 450px;
  height: 660px;
  background: url(../images/comics/img5.png) no-repeat left center / 100%;
}
#img6 {
  top: 4150px;
  left: 2800px;
  width: 400px;
  height: 560px;
  background: url(../images/comics/img6.png) no-repeat left center / 100%;
}
#img7 {
  top: 3700px;
  left: 3200px;
  width: 370px;
  height: 560px;
  background: url(../images/comics/img7.png) no-repeat left center / 100%;
}#img8 {
  top: 4150px;
  left: 3250px;
  width: 570px;
  height: 560px;
  background: url(../images/comics/img8.png) no-repeat left center / 100%;
}


.link {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.photos {
  position: absolute;
  animation: shake 2s infinite steps(2);
}

.photos:hover {
  animation: none;
  transform: scale(1.1);
}

#link1 {
  top: 3850px;
  left: 3650px;
  width: 300px;
  height: auto;
  font-size: 24pt;
  padding: 1em;
  border: 5px solid white;
  rotate: 2deg;
}
#link2 {
  top: 2450px;
  left: 2950px;
  width: 300px;
  height: auto;
  font-size: 24pt;
  padding: 1em;
  border: 5px solid white;
  rotate: 2deg;
}