/*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: 25px;
  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;
}

/*vine special effect*/

.floatingvine {
  position: absolute;
  transition: transform 0.25s ease;
}

.floatingvine img {
  width: 1px;
  display: block;
}

.floatingvine:hover {
  transform: scale(1.05) rotate(30deg);
}

.floatingvine img {
  display: block;
}

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

.imgtxt-vine span {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  z-index: 2;
  color: #fff;
  white-space: nowrap;
  font-family: "IMFellGreatPrimer";
  font-size: 25px;
  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-vine:hover span,
.imgtxt:focus span {
  opacity: 1;
}

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

/*envelope effect*/
.envelope {
  position: relative;
  width: fit-content;
  height: 50px;
}

.envelope img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  transition: opacity 0.2s ease-in-out;
}

.img-bottom {
  opacity: 0;
  z-index: 1;
}

.img-top {
  opacity: 1;
  z-index: 2;
}

.envelope:hover .img-bottom {
  opacity: 1;
}

.envelope:hover .img-top {
  opacity: 0;
}

/*size of pins/pics*/

.about-me img {
  width: 300px;
}

.photobook img {
  width: 350px;
}

.blog img {
  width: 250px;
}

.artwork img {
  width: 300px;
}

.outside img {
  width: 200px;
}

.envelopecontainer img {
  width: 350px;
}

/* positions of pins */

.about-me {
  top: 50%;
  left: 75%;
  transform: rotate(-10deg);
  position: fixed;
}

.photobook {
  top: 10%;
  right: 50%;
  position: fixed;
}

.blog {
  top: 7%;
  left: 75%;
  transform: rotate(10deg);
  position: fixed;
}

.artwork {
  bottom: 4%;
  left: 55%;
  transform: rotate(10deg);
  position: fixed;
}

.outside {
  bottom: 35%;
  left: 5%;
  transform: rotate(30deg);
  position: fixed;
}

.envelopecontainer {
  bottom: 9%;
  left: 9%;
  position: fixed;
}