@font-face {
  font-family: "Daydream";
  src : url("Daydream.otf");
}

@font-face {
  font-family: "PixelTitle";
  src : url("visitor1.ttf")
}

@font-face {
  font-family: "PixelBody";
  src : url("rainyhearts.ttf")
}

@font-face {
  font-family: "Mieszkanie";
  src : url("mieszkanie9.otf")
}

html {
  height: 100%;
  box-sizing: border-box;
}

body {
  height: 100%;
  font: 0.8em;
  font-family: "PixelBody";
  padding: 0;
  margin: 0;
  background-image: url("img/DargosRest.png");
  background-size: cover;
  background-attachment: fixed;
}

* {
  box-sizing: inherit;
}

.wrapper {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.page-header,
.page-footer {
  padding: 20px;
}

#foot {
  color: #4a7d96;
  background: #292831;
  padding: 0px 5px 0px 5px;
}

.page-body {
  padding: 20px;
}

.page-body p {
  /*border: 1px solid grey*/;
}

#stay {
  position: fixed;
  top: 60vh;
  left: 60vw;
  display: inline-block;
  text-align: left;
  color: #292831;
  background: #4a7a96;
  padding: 50px 100px 50px 100px;
}

*::selection {
  background: #292831;
  color: #4a7a96;
}

*::-moz-selection {
  background: #292831;
  color: #4a7a96;
}

*::-webkit-selection {
  background: #292831;
  color: #4a7a96;
}

#keyImageBird {
  opacity: 0;
  transition: 0.3s ease;
  position: fixed;
  top: 5vh;
  left: 50vw;
  width: 3vw;
}

#keyImageBird:hover {
  opacity: 1;
  scale: 2.6;
}

#keyImageGrasshopper {
  opacity: 0;
  transition: 0.3s ease;
  position: fixed;
  top: 45vh;
  left: 27vw;
  width: 3vw;
}

#keyImageGrasshopper:hover {
  opacity: 1;
  scale: 2.6;
}

#keyImageCaterpillar {
  opacity: 0;
  transition: 0.3s ease;
  position: fixed;
  top: 87vh;
  left: 45vw;
  width: 3vw;
}

#keyImageCaterpillar:hover {
  opacity: 1;
  scale: 2.6;
}

.bg {
  position: fixed;
  margin: 0px;
  padding: 0px;
  height: 110vh;
  width: 110vw;
  left: -2vw;
  top: -2vh;
  display: block;
}

.mouse_move {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}