/*  fonts  */          
     @font-face { font-family: BILLO; src: url('fonts/BILLO___.TTF'); } 
    @font-face { font-family: Pop Magic; src: url('fonts/GAU_pop_magic.TTF'); } 
    @font-face { font-family: Fanwood; src: url('fonts/Fanwood Text.otf');}
    @font-face { font-family: Cooper; src: url('fonts/Cooper-Medium.otf');}


/* animation */
        @keyframes bounce {
            0% { transform: translate(0, 0) rotate(0deg); }
            25% { transform: translate(1px, 0px) rotate(1deg); }
            50% { transform: translate(0, 0) rotate(0deg); }
            75% { transform: translate(0px, 1px) rotate(-1deg); }
            100% { transform: translate(0, 0) rotate(0deg); }
            }
            .link hover {
                animation-name: bounce;
                animation-duration: .5s;
                animation-iteration-count: infinite;
                }
            aside {
                position:absolute;
                position:relative;
                opacity: .80;
                }
            	
            aside {
                position:absolute;
                position:relative;
                opacity: .80;
                  }
                  /* code snippet from https://ribo.zone (i added the animation but dont worry about crediting if u rip it :) )*/
            .imgtxt {
                width: fit-content;
               height: fit-content;
               display: inline-block;
               position: relative;
                }
            .imgtxt span {
              opacity: 0;
              position: absolute;
              text-align: center;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              z-index: 99;
              font-size: 2.5rem;
              font-family: Pop Magic;
              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);
            }
            .imgtxt:hover span, .imgtxt:focus span {
              opacity: 1;
            }
            .imgtxt:hover img, .imgtxt:focus img {
                opacity: 1;
                margin-top: -10px;
                animation-name: bounce;
                animation-duration: .5s;
                animation-iteration-count: infinite;
              /* add hover effects like transform or filter to your images here! */
            }
            .imgtxtsmall {
                width: fit-content;
               height: fit-content;
               display: inline-block;
               position: relative;
                }
            .imgtxtsmall span {
              opacity: 0;
              position: absolute;
              text-align: center;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              z-index: 99;
              font-size: 1rem;
              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);
            }
            .imgtxtsmall:hover span, .imgtxt:focus span {
              opacity: 1;
            }
            .imgtxtsmall:hover img, .imgtxt:focus img {
                opacity: 1;
                margin-top: -10px;
                animation-name: bounce;
                animation-duration: .5s;
                animation-iteration-count: infinite;
              /* add hover effects like transform or filter to your images here! */
            }
/*code snippet from ribo.zone end. i added the smaller version*/
          .chair {
              opacity: 0.85;
            }