@font-face { font-family: Fanwood; src: url('/fonts/Fanwood Text.otf');}
@font-face { font-family: Handwriting; src: url('/fonts/PhontPhreaks Handwriting.ttf');}
@font-face { font-family: Cooper; src: url('/fonts/Cooper-Medium.otf');}
@font-face { font-family: GoudyBookletter1911; src: url('/fonts/GoudyBookletter1911.otf');}
                  /* 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;
              top: 50%;
              left: 50%;
              text-align: center;
              transform: translate(-50%, -50%);
              z-index: 99;
              font-size: 1.5rem;
              font-family: GoudyBookletter1911;
              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;

              /* add hover effects like transform or filter to your images here! */
            }
/*code snippet from ribo.zone end*/
@font-face { font-family: Fanwood; src: url('fonts/Fanwood Text.otf');}
@font-face { font-family: Handwriting; src: url('fonts/PhontPhreaks Handwriting.ttf');}
@font-face { font-family: Cooper; src: url('fonts/Cooper-Medium.otf');}
@font-face { font-family: GoudyBookletter1911; src: url('fonts/GoudyBookletter1911.otf');}
 
/*code snippet from ribo.zone end*/