/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
     text {
     text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
  color: white;
  font-size: 2em;
  }
 
body {
  background-color: black;
  p{color:#ffb7b7;}
  color: black;
  font-family: 'jblack-demo';
  h1 {
color:#ffdada;
}
 :any-link {
   color: #FE0000;
   font-family: 'jblack-demo'
 }
}
.cover-gallery img {
  border: none !important;    /* Removes standard borders */
  outline: none !important;   /* Removes green outlines if they are outlines */
  box-shadow: none !important; /* Removes any green shadow glows */
}

.cover-gallery img {
  /* This creates a solid 3-pixel wide purple border around each individual image */
  border: 7px solid #7d0202 !important; 
  
  /* Optional: This rounds the corners of the individual image borders slightly */
  border-radius: 5px; 
  
  /* Clears out any remaining green styles */
  outline: none !important;   
  box-shadow: none !important; 
}
.row-gallery img {
  border: none !important;    /* Removes standard borders */
  outline: none !important;   /* Removes green outlines if they are outlines */
  box-shadow: none !important; /* Removes any green shadow glows */
}

.row-gallery img {
  /* This creates a solid 3-pixel wide purple border around each individual image */
  border: 0px solid #7d0202 !important; 
  
  /* Optional: This rounds the corners of the individual image borders slightly */
  border-radius: 0px; 
  
  /* Clears out any remaining green styles */
  outline: none !important;   
  box-shadow: none !important; 
}


 body {
    background-color: #02021a;
    background-image: url('https://ncdimage.carrd.co/assets/images/image48.jpg?v=9eaa8413'); /* Hier steht dein Bild */
    background-repeat: repeat;
    background-size: 200px; 
    animation: moveBg 2s linear infinite; 
    
    color: #ff4242;            
    text-align: center;
    padding: 20px;
    margin: 0;
}

@keyframes moveBg {
    from { 
        background-position: 0 0; 
    }
    to { 
        background-position: 0 100px; /* Muss genau so groß sein wie background-size! */
    }
}
<style>
    .animatedBg {
        background-image: url('https://ncdimage.carrd.co/assets/images/image48.jpg?v=9eaa8413');
        /* Change effect speed by changing animation duration, 5s (5 seconds), to something else */
        animation: scrollingBg 3s infinite linear;
    }

    @keyframes scrollingBg {
        from { background-position: 10px 5px; }

        /* Assuming you have a background image that's 64x64 pixels: */
         to { background-position: 15px 20px; } Bg moves right 
        /* to { background-position: 0px -64px; }  Bg moves up  */
        /* to { background-position: 64px -64px; } Bg moves top-right */
        /* to { background-position: 64px 64px; } Bg moves bottom-right */
        /* to { background-position: 0px 64px; } Bg moves down */
        /* to { background-position: -64px 64px; } Bg moves bottom-left */
        /* to { background-position: -64px 0px; } Bg moves left */
        /* to { background-position: -64px -64px; } Bg moves top-left */
    }

    /* Disables the animation based on browser preferences */
    @media (prefers-reduced-motion: reduce) {
        .animatedBg { animation: none; }
    }
    .rainbow {
  background: linear-gradient(
    to right,
    #ff0000, #ab0404, #bc2f1e, #fd8383, #5f0101, #6f1a1a, #9f4141, #ae0000
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow-move 4s linear infinite;
}

@keyframes rainbow-move {
  to {
    background-position: 200% center;
  }
}
.rainbows {
  font-family: 'jblack-demo'
  font-size: 2.5rem;          /* adjust as needed */
  font-weight: bold;
  background: linear-gradient(
    to right,
    #ff0000,   /* red */
    #ab0404,   /* orange */
    #800000,   /* yellow */
    #fd8383,   /* green */
    #800000,   /* blue */
    #ab0404,   /* indigo */
    #ff0000    /* violet */
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* optional soft glow that matches the site vibe */
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}
 .impon {
  background: linear-gradient(
    to right,
    #ff0000, #da0000, #fa1818, #e31414, #e40b0b, #f81d1d, #cc0202, #e70f0f
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: impon-move 3s linear infinite;
}

@keyframes impon-move {
  to {
    background-position: 200% center;
  }
}
 .tfp {
  background: linear-gradient(
    to right,
    #290049, #FFC500, #D50000, #290049, #D6A753
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: tfp-move 10s linear infinite;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

@keyframes tfp-move {
  to {
    background-position: 200% center;
  }
}
.slink {
  font-family: 'jblack-demo', cursive; /* optional – they use a fraktur-style font */
  font-size: 2rem;          /* adjust as needed */
  background: linear-gradient(
    to right,
    #E80000,   /* red */
    #FF0000,   /* orange */
    #5f0101,   /* blue */
    #ab0404   /* indigo */

  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* optional soft glow that matches the site vibe */
  text-shadow: 0 0 10px rgba(245, 0, 0, 0.5);
}
 .impon2 {
  font-size: 2.5rem;          /* adjust as needed */
  background: linear-gradient(
    to right,
    #ff0000, #da0000, #fa1818, #ff2222
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  animation: impon2-move 1s linear infinite;
}

@keyframes impon2-move {
  to {
    background-position: 200% center;
  }
}
</style>