@font-face {font-family: "Cinnamon Cake"; src: url(http://static.tumblr.com/npggxjg/Jm9m1xlt2/cinnamon_cake.ttf);}
 @font-face {font-family: "Awesome Lathusca"; src: url(https://file.garden/aeur2iVxx2XDWeKX/Fox%20Den%20Website/Fonts/Awesome%20Lathusca.ttf);}
    
    /*
     border: 1px solid white;
    */
    
    body {
      background-image: url("https://file.garden/aeur2iVxx2XDWeKX/Fox%20Den%20Website/Fox%20Den%20Backgrounds/den%20-%202%20tunnels.png");
      background-attachment: fixed;
      background-size: 1440px 710px;
      font-family: "Cinnamon Cake"; 
      color: white;
      overflow: scroll;
    }
    
  p{
      position: absolute;
      font-family: "Awesome Lathusca"; 
      font-size: 50px;
      display: block;
      z-index: -1;
      top: -25px;
      left: 575px;
    }
    
    .bookshelf{
      position: absolute;
      display: block;
      z-index: 1;
      top: 100px;
      left: 450px;
    }
    
    .onshelves{
      position: absolute;
      top:30px;
      left: 60px;
      width: 75%;
      height: 65%;
      
      
    }
    
    .pinkbooks-img{
      width: 95px; 
      position: absolute;
      display: block;
      z-index: 5;
      top: -14px;
      left: 90px;
    }
    
    .clock-img{
      width: 85px; 
      position: absolute;
      display: block;
      z-index: 5;
      top: 1px;
      left: 20px;
    }
    
    .greenbooks-img{
      width: 175px; 
      position: absolute;
      display: block;
      z-index: 5;
      top: 80px;
      left: 3px;
    }
    
    .browngreenbooks-img{
      width: 175px; 
      position: absolute;
      display: block;
      z-index: 5;
      top: 165px;
      left: 5px;
    }
    
    .foxfigurines-img{
      width: 50px; 
      position: absolute;
      display: block;
      z-index: 5;
      top: 162px;
      left: 110px;
    }
    
    .typewriter-img{
      width: 100px; 
      position: absolute;
      display: block;
      z-index: 5;
      top: 227px;
      left: 5px;
    }
    
    .smallplant-img{
      width: 175px; 
      position: absolute;
      display: block;
      z-index: 5;
      top: 195px;
      left: 55px;
    }
    
    .classicbooks-img{
      width: 170px; 
      position: absolute;
      display: block;
      z-index: 5;
      top: -69px;
      left: 197px;
    }
    
    .blueyellowbooks-img{
      width: 175px; 
      position: absolute;
      display: block;
      z-index: 5;
      top: 99px;
      left: 200px;
    }
    
    .bluewhitebooks-img {
      width: 175px; 
      position: absolute;
      display: block;
      z-index: 5;
      top: 83px;
      left: 200px;
    }
    
    .trinketbox-img {
      width: 85px; 
      position: absolute;
      display: block;
      z-index: 5;
      top: 265px;
      left: 203px;
    }
    
    .readingfox-img {
      width: 75px; 
      position: absolute;
      display: block;
      z-index: 5;
      top: 246px;
      left: 295px;
    }
    
    .armchair {
      position: absolute;
      display: block;
      z-index: 3;
      width: 300px;
      height: 300px;
      top: 400px;
      left: 810px;
    }
    
    .armchair-img {
      width: 300px;
      z-index: 3;
    }
    
    #bookstack-img {
      position: absolute;
      z-index: 5;
      width: 100px;
      top: 50px;
      left: 100px;
      
    }
    
    .floorlamp {
      position: absolute;
      display: block;
      z-index: -3;
      width: 350px;
      top: 270px;
      left: 900px;
    }
    
    .floorlamp-img {
      width: 350px;
    }
    
    #floorlamp-span {
      top: 20%;
      left:40%;
      
    }
    
    .plant {
      position: absolute;
      display: block;
      z-index: 3;
      width: 300px;
      left: 200px;
    }
    
    .plant-img {
      width: 300px;
    }
    
    #plant-span{
      width:100px;
      left: 25%;
    }
    
    .globe{
      position: absolute;
      display: block;
      z-index: 3;
      width: 170px;
      top: 330px;
      left: 345px;
    }
    
    .globe-img{
      width: 170px;
    }
    
    #globe-span{
      width: 150px;
      top: 25%;
      left:60%;
    }
    
    /*Below Code Snippet from ribo.zone*/
    .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;
      font-size: 1.5rem;
      color: #FFF;
      text-align: center;
      filter: drop-shadow(1px 1px 0 #7e8478) 
        drop-shadow(-1px 1px 0 #7e8478)
        drop-shadow(1px -1px 0 #7e8478)
        drop-shadow(-1px -1px 0 #7e8478);
    }
    .imgtxt:hover span, .imgtxt:focus span {
      opacity: 1;
    }
    .imgtxt:hover img, .imgtxt:focus img {
      /* add hover effects like transform or filter to your images here! */
      filter: sepia(70%) saturate(75%);
      transform: rotate(10deg);
    }