@font-face {
    font-family: toshiba;
    src: url(fonts/Web437_ToshibaTxL2_8x16.woff) format('woff');
}
body {
    background-image: url(resources/img/likes-hub/bg.png);
    background-size: 200%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: hidden;
}
.shelf {
    margin-left: auto;
    margin-right: auto;
    width: 1004px;
    margin-top: 30vh;
    display: block;
    top: 500px;
}
.major-cont {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    height: 840px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.imgtxt {
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: absolute;
  z-index: 2;
}
.imgtxt span {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  font-size: 2.5rem;
  color: #FFF;
  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);
  font-family: toshiba;
}
.imgtxt:hover span, .imgtxt:focus span {
  opacity: 1;
}
.imgtxt:hover img, .imgtxt:focus img {
  transform: rotate(-5deg);
}
.items {
    height: 840px;
    width: 1300px;
    position: absolute;
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 50;
}
#router {
    top: 435px;
    left: 180px;
}
#book {
    top: 435px;
    left: 405px;
}
#popcorn {
    top: 500px;
    left: 600px;
}
#tapes {
    top: 550px;
    left: 720px;
}
#sack {
    top: 450px;
    left: 880px;
}
#headphones {
    top: 655px;
    left: 50px;
}
#headphones:hover img {
    transform: rotate(5deg);
}
#painting {
    left: 440px;

}
#arrow {
    position: absolute;
}
#arrow:hover img {
    transform: rotate(5deg);
}