/* fonts */
        
             @import url('https://fonts.googleapis.com/css2?family=Mali:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
            
            @import url('https://fonts.googleapis.com/css2?family=Crafty+Girls&family=Unkempt:wght@400;700&display=swap');
              
        /* borders */
              .frostingborder {
                    background: white;
                    background-size: auto;
                  background-size: auto;
                  background-size: 30%;
                  border: 2px solid black;
                    border-image-outset: 0;
                    border-image-repeat: stretch;
                    border-image-slice: 100%;
                    border-image-source: none;
                    border-image-width: 1;
                  border-image-outset: 0;
                  border-image-repeat: stretch;
                  border-image-slice: 100%;
                  border-image-source: none;
                  border-image-width: 1;
                  border-image: url('https://i.postimg.cc/D0BpHgQ2/mode4.png') 19% round;
                    border-image-outset: 0;
                    border-image-width: 1;
                  border-image-outset: 0;
                  border-image-width: 1;
                  border-image-width: 36px;
                  border-image-outset: 12px;
                  padding: 17px;
                  margin:5px; <!-- just added the margin bc it kind of overlaps everything feel free to remove -->
              }

              .imglace1 {
                  border-width: 7px;
                  border-style: solid;
                  border-image: url("https://file.garden/app5NUCh-on09Abt/emmy/border/2jXrMdE.png")
                      11 fill round;
              }
              
              
            /* animations */
                     
            #float {
                animation-name: floating;
                animation-duration: 3s;
                animation-iteration-count: infinite;
                animation-timing-function: ease-in-out;
            }
 
            @keyframes floating {
                0% { transform: translate(0,  0px); }
                50%  { transform: translate(0, 15px); }
                100%   { transform: translate(0, -0px); }    
            }

          #shake:hover img { 
              animation: shake 0.5s; 
              animation-iteration-count: infinite; 
              -webkit-filter:blur(1px); 
              -webkit-transition: .5s ease-in; 
              } 
               
              @keyframes shake {
              0% { transform: translate(1px, 1px) rotate(0deg); }
              10% { transform: translate(-1px, -2px) rotate(-1deg); }
              20% { transform: translate(-3px, 0px) rotate(1deg); }
              30% { transform: translate(3px, 2px) rotate(0deg); }
              40% { transform: translate(1px, -1px) rotate(1deg); }
              50% { transform: translate(-1px, 2px) rotate(-1deg); }
              60% { transform: translate(-3px, 1px) rotate(0deg); }
              70% { transform: translate(3px, 1px) rotate(-1deg); }
              80% { transform: translate(-1px, -1px) rotate(1deg); }
              90% { transform: translate(1px, 2px) rotate(0deg); }
              100% { transform: translate(1px, -2px) rotate(-1deg); }
              } 
        
        
             /* shit for my goddamn navigation buttons - need to put this on every web page !! */
            
            .left .navi {
                width: 100%;
                min-width: 0;
                padding: 10px;
                background: url("https://64.media.tumblr.com/401700d4a654dd14a78e817ff3e1a416/e27af78e8c6e008c-29/s250x400/29a5120c35f43630621291902f266988b38ddabd.gifv");
                border: 1px solid #ffccd5;
                border-radius: 8px;
            } 
              .left .naviser {
                    box-shadow: -1px -1.4px 1px inset #9e9699, 2px 3px 1.5px inset white, 0px 0px 2px #aba4a6;
                    width: 100%;
                    height: 40px;
                    text-align: center;
                    background: url(https://file.garden/ag5W6PuEnT-lvEi8/backgrounds/naviserbg.webp);
                    background-size: 180px;
                    color: #fff;
                    text-shadow: 1px 1px 0 #ffbade, 1px -1px 0 #ffbade, -1px 1px 0 #ffbade, -1px -1px 0 #ffbade, 1px 0px 0 #ffbade, 0px 1px 0 #ffbade, -1px 0px 0 #ffbade, 0px -1px 0 #ffbade;
                    font-size: 20px;
                    font-weight: 700;
                    font-family: crafty girls, cursive;
                    padding-top: 5px;
                }
                
               .left .link {
                    width: 100%;
                    height: 40px;
                    box-shadow: -1px -1.4px 1px inset #9e9699, 2px 3px 1.5px inset white, 0px 0px 2px #aba4a6;
                    background: url(https://file.garden/ag5W6PuEnT-lvEi8/backgrounds/link1.jpeg);
                    background-size: 100px;
                    font-size: 20px;
                    font-family: Mali, cursive;
                    padding: 3px;
                    text-align: left;
                    
               }
               
               .left .link2 {
                    width: 100%;
                    height: 40px;
                    box-shadow: -1px -1.4px 1px inset #9e9699, 2px 3px 1.5px inset white, 0px 0px 2px #aba4a6;
                    background: url(https://file.garden/ag5W6PuEnT-lvEi8/backgrounds/link2.webp);
                    background-size: 100px;
                    font-size: 20px;
                    font-family: Mali, cursive;
                    padding: 3px;
                    text-align: left;
                    background-position: center;
                    
               }

                  /*end of shit for nav buttons */
                  
                  
                  /* marquee */
                  
                .marquee {
                    overflow: hidden;
                    white-space: nowrap;
                }
            
                .marquee span {
                    display: inline-block;
                    padding-left: 100%;
                    animation: marquee 28s linear infinite;
                }
            
                .marquee span:hover {
                    animation-play-state: paused;
                }
            
                @keyframes marquee {
                    from {
                        transform: translateX(0);
                    }
            
                    to {
                        transform: translateX(-100%);
                    }
                } 

                .marqueebuttons {
                    overflow: hidden;
                    white-space: nowrap;
                }
            
                .marqueebuttons span {
                    display: inline-block;
                    padding-left: 100%;
                    animation: marquee 15s linear infinite;
                }
            
                .marqueebuttons span:hover {
                    animation-play-state: paused;
                }
            
                @keyframes marqueebuttons {
                    from {
                        transform: translateX(0);
                    }
            
                    to {
                        transform: translateX(-100%);
                    }
                } 


                /* scrollbar */
                
              body::-webkit-scrollbar {
                 width: 15px;
              }
               
              body::-webkit-scrollbar-track {
                background-color: #fccae7;
                outline: 1px solid #fcaedc;
              }
               
              body::-webkit-scrollbar-thumb {
                background-image: url("https://file.garden/ag5W6PuEnT-lvEi8/backgrounds/rainbowbg.gifv");
                outline: 1px solid #fcaedc;
                border-radius: 10px;
                auto !important;
              }