/* 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." */
  
 body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    overflow-y: scroll; /* Prevent scrollbars if stripes extend beyond viewport */
    overflow-x: hidden;
}

.moving-stripes-background {
    background-image: repeating-linear-gradient(
        -45deg, /* Angle of the stripes */
        #FEA3AA, /* Light stripe color */
        #FEA3AA 50px, /* Light stripe width */
        #FFB8BF 50px, /* Dark stripe color */
        #FFB8BF 100px /* Dark stripe width */
    );
    background-size: 400% 400%; /* Make background larger than viewport for smooth animation */
    animation: moveStripes 160s linear infinite; /* Animation name, duration, timing, and repeat */
}


.moving-stripes-background-journal {
    background-image: repeating-linear-gradient(
        -45deg, /* Angle of the stripes */
        #3B3131, /* Light stripe color */
        #3B3131 50px, /* Light stripe width */
        #34282C 50px, /* Dark stripe color */
        #34282C 100px /* Dark stripe width */
    );
    background-size: 400% 400%; /* Make background larger than viewport for smooth animation */
    animation: moveStripesjournal 160s linear infinite; /* Animation name, duration, timing, and repeat */
}


.moving-stripes-background-stories {
    background-image: repeating-linear-gradient(
        -45deg, /* Angle of the stripes */
        #D6A1E6, /* Light stripe color */
        #D6A1E6	50px, /* Light stripe width */
        #A8A1D6	50px, /* Dark stripe color */
        #A8A1D6	100px /* Dark stripe width */
    );
    background-size: 400% 400%; /* Make background larger than viewport for smooth animation */
    animation: moveStripesjournal 160s linear infinite; /* Animation name, duration, timing, and repeat */
}


@keyframes moveStripes {
    0% {
        background-position: 0% 0%; /* Starting position */
    }
    100% {
        background-position: 100% 100%; /* Ending position (moves diagonally) */
    }
}

@keyframes moveStripesjournal {
    0% {
        background-position: 0% 0%; /* Starting position */
    }
    100% {
        background-position: 100% 100%; /* Ending position (moves diagonally) */
    }
} 
  
@keyframes moveStripesstories {
    0% {
        background-position: 0% 0%; /* Starting position */
    }
    100% {
        background-position: 100% 100%; /* Ending position (moves diagonally) */
    }
} 




.holder {
  overflow: hidden;
}

.banner:hover {
 animation-play-state: paused; 
}

.banner {
  animation : slide 60s linear infinite;
  
}

@keyframes slide {
  0% {
    transform: translatex(-100%)
  }

  100% {
    transform: translatex(200%)
  }
}




.TitleGradient {
    background-image: linear-gradient(#01F9C6, #FF007F);
    color: transparent;
    background-clip: text;
}


.MainLinks {
    a:hover {
      color:#9D00FF;
      background-color:transparent;
      text-decoration:none;
    }
}


   
   
@font-face {
  font-family: 'Amarante';
  src: url('https://madsmadramblings.neocities.org/Fonts/Amarante-Regular.ttf') format("truetype");
}

@font-face {
  font-family: 'Amatic';
  src: url('https://madsmadramblings.neocities.org/Fonts/AmaticSC-Regular.ttf') format("truetype");
}

@font-face {
  font-family: 'DotGothic';
  src: url('https://madsmadramblings.neocities.org/Fonts/DotGothic16-Regular.ttf') format("truetype");
}

@font-face {
  font-family: 'Gamja';
  src: url('https://madsmadramblings.neocities.org/Fonts/GamjaFlower-Regular.ttf') format("truetype");
}

@font-face {
  font-family: 'Gill';
  src: url('https://madsmadramblings.neocities.org/Fonts/gill-sans-ultra-bold.ttf') format("truetype");
}

@font-face {
  font-family: 'Honk';
  src: url('https://madsmadramblings.neocities.org/Fonts/Honk-Regular-VariableFont_MORF,SHLN.ttf') format("truetype");
}

@font-face {
  font-family: 'KalniaExtraLight';
  src: url('https://madsmadramblings.neocities.org/Fonts/KalniaGlaze-ExtraLight.ttf') format("truetype");
}

@font-face {
  font-family: 'KalniaLight';
  src: url('https://madsmadramblings.neocities.org/Fonts/KalniaGlaze-Light.ttf') format("truetype");
}

@font-face {
  font-family: 'KalniaThin';
  src: url('https://madsmadramblings.neocities.org/Fonts/KalniaGlaze-Thin.ttf') format("truetype");
}

@font-face {
  font-family: 'PhilosopherRegular';
  src: url('https://madsmadramblings.neocities.org/Fonts/Philosopher-Regular.ttf') format("truetype");
}

@font-face {
  font-family: 'RockSalt';
  src: url('https://madsmadramblings.neocities.org/Fonts/RockSalt-Regular.ttf') format("truetype");
}






.Amarante {
  font-family: Amarante;
}

.Amatic {
  font-family: Amatic;
}

.DotGothic {
  font-family: DotGothic;
}

.Gamja {
  font-family: Gamja;
}

.Gill {
  font-family: Gill; 
}

.Honk {
  font-family: Honk;
}

.KalniaExtraLight {
  font-family: KalniaExtraLight;
}

.KalniaLight {
  font-family: KalniaLight;
}

.KalniaThin {
  font-family: KalniaThin;
}

.PhilosopherRegular {
  font-family: PhilosopherRegular;
}

.RockSalt {
  font-family: RockSalt;
}


.LargeTitleFont {
 font-size: 50px; 
}


p {text-align: justify}