/*headings*/
h1 {
  text-align: center;
  text-transform: lowercase;
  font-family: "Tangerine";
}

body {
  margin: 0;
  background: #e8f0e4;
  overflow: hidden;
  height: 100vh;
  position: relative;
}

.floating {
  position: absolute;
  transition: transform 0.15s ease;
}

.floating img {
  width: 120px;
  display: block;
}

.floating:hover {
  transform: scale(1.1) rotate(3deg);
}

.floating img {
  display: block;
}

/* hover text */

.imgtxt {
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
}

.imgtxt span {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: #fff;
  white-space: nowrap;
  font-family: "IMFellGreatPrimer";
  font-size: 15px;
  filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black)
    drop-shadow(1px -1px 0 black) drop-shadow(-1px -1px 0 black);
}

.imgtxt:hover span,
.imgtxt:focus span {
  opacity: 1;
}

.imgtxt:hover img,
.imgtxt:focus img {
  transition:
    transform 0.15s ease,
    filter 0.15s ease;
}

/*size of trinkets*/

.derpy img {
  width: 93px;
}

.lps img {
  width: 75px;
}

.books img {
  width: 275px;
}

.camera img {
  width: 200px;
}

.ipod img {
  width: 150px;
}

/* positions of trinkets */

.derpy {
  top: 63%;
  right: 305px;
  position: fixed;
}

.lps {
  top: 31%;
  right: 250px;
  position: fixed;
}

.books {
  top: 25%;
  left: 400px;
  position: fixed;
}

.camera {
  top: 31%;
  left: 250px;
  position: fixed;
}

.ipod {
  bottom: 40%;
  left: 5%;
  transform: rotate(20deg);
  position: fixed;
}