.typewriter-container {
    width: 400px;
    height: 340px;
    padding-top: 44px;
    padding-bottom: 44px;
    background-image: url('https://www.xilolix.com/wp-content/uploads/2024/11/empty_half-unrolled_parchment_scroll_horizontal.png');
    background-size: cover;
    background-position: center;
    margin: 0 auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    left: -40%;         
    outline: none;      
}

.typewriter-smaller {
    display: none;
}

@media (max-width: 768px) {
    .typewriter-container {
        left: 0;
    }
}

@media (max-width: 374px) {
    .typewriter-container {
        display: none;
    }
    .typewriter-smaller {
        display: block;
    }

    .typewriter-smaller p {
        color:#F2832E !important;
        font-family: "Comic Sans MS", "Arial Rounded MT Bold", "Verdana", sans-serif !important;
    }
}


.typewriter {
    width: 100%;
    height: auto;
    overflow: hidden;
    text-align: center;
}

.typewriter-text {
    opacity: 0;
    overflow: hidden;
    margin: 0;
    padding-left: 37px;
    padding-right: 37px;
    border-right: 0.15em solid black;
    display: inline-block;
    text-align: left;
    max-width: 63%;
    font-family: "Courier New", Courier, monospace;
    color: black;
    font-weight: bold;
}

.typewriter-container:hover .typewriter-text,
.typewriter-container:focus .typewriter-text {
    opacity: 1;
    animation: typing 3.5s steps(40, end), 
               blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: black }
}

#x-penc-parch img, #x-penc-parch {
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

/* CSS3 Pattern */

#bubble-gradient-pattern {
    animation: bubble-shift 10s linear infinite;
}

@keyframes bubble-shift {
    0% {
        background-position: 0 0, 100px 100px, 200px 200px, -100px -100px, -200px -200px;
    }
    100% {
        background-position: 200px 200px, 0 0, -200px -200px, 100px 100px, -100px -100px;
    }
}
#dynamic-green-pattern {
    animation: movePattern 5s linear infinite;
}

@keyframes movePattern {
    0% {
        background-position:
            0 0,
            0 0,
            0 0,
            0 0,
            0 0,
            0 0;
    }
    100% {
        background-position:
            var(--base-size) var(--base-size),
            var(--base-size) var(--base-size),
            var(--size-half) var(--size-half),
            var(--size-3quarter) var(--size-3quarter),
            var(--size-quarter) var(--size-quarter),
            calc(var(--size-quarter) * 1.3) calc(var(--size-quarter) * 1.3);
    }
}


#snowfall-gradient-pattern {
    position: relative;
    overflow: hidden;
  }
  
  #snowfall-gradient-pattern::before {
    height: 400%;
    top: -200%;
    content: 'halelujah';
    position: absolute;
    left: 0;
    right: 0;
    background-image:
      radial-gradient(white 1px, transparent 1px),
      radial-gradient(white 1px, transparent 1px),
      radial-gradient(white 1px, transparent 1px),
      radial-gradient(white 0.5px, transparent 0.5px),
      radial-gradient(white 0.5px, transparent 0.5px),
      radial-gradient(white 2px, transparent 0.5px),
      radial-gradient(white 2px, transparent 0.5px);
    background-size:
      110px 110px,
      80px 80px,
      65px 65px,
      450px 45px,
      55px 55px,
      95px 95px,
      87px 87px;
    animation: snowfall-1 16s linear infinite;
    opacity: 0.7;
    pointer-events: none;
  }

    /* Keyframes for ::before */
    @keyframes snowfall-1 {
        0% {
          transform: translateY(0);
        }
        100% {
          transform: translateY(100%);
        }
      }
  
  #snowfall-gradient-pattern::after {
    height: 400%;
    top: -200%;
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    background-image:
      radial-gradient(white 1px, transparent 1px),
      radial-gradient(white 1px, transparent 1px),
      radial-gradient(white 1px, transparent 1px),
      radial-gradient(white 0.5px, transparent 0.5px),
      radial-gradient(white 0.5px, transparent 0.5px),
      radial-gradient(white 2px, transparent 0.5px),
      radial-gradient(white 2px, transparent 0.5px);
    background-size:
      100px 100px,
      70px 70px,
      50px 50px,
      30px 30px,
      40px 40px,
      85px 85px,
      80px 80px;
    animation: snowfall-1 10s linear infinite;
    opacity: 0.7;
    pointer-events: none;
  }
  
  #snowfall-gradient-pattern::after {
    height: 200%;
    top: -100%;
    background-image:
      radial-gradient(white 2px, transparent 2px),
      radial-gradient(white 2px, transparent 2px),
      radial-gradient(white 1.5px, transparent 1.5px),
      radial-gradient(white 1.5px, transparent 1.5px),
      radial-gradient(white 1px, transparent 1px),
      radial-gradient(white 1px, transparent 1px);
    background-size:
      180px 180px,
      120px 120px,
      90px 90px,
      140px 140px,
      40px 40px;
    animation: snowfall-2 20s linear infinite;
    opacity: 0.4;
  }
  
  /* Keyframes for ::after */
  @keyframes snowfall-2 {
    0% {
      transform: translateY(5%);
    }
    100% {
      transform: translateY(100%);
    }
  }


  

  #windmill-pattern .pattern-display::before,
  #windmill-pattern .pattern-display::after {
      content: '';
      position: absolute;
      inset: 0;
      overflow: hidden;
  }
  
  #windmill-pattern .pattern-display::before {
    background: conic-gradient(
      from 0deg at 100% 0%,
      rgba(43, 197, 135, 0.8) 0deg 30deg,
      transparent 30deg 60deg,
      rgba(43, 197, 135, 0.8) 60deg 90deg,
      transparent 90deg 120deg,
      rgba(43, 197, 135, 0.8) 120deg 150deg,
      transparent 150deg 180deg,
      rgba(43, 197, 135, 0.8) 180deg 210deg,
      transparent 210deg 240deg,
      rgba(43, 197, 135, 0.8) 240deg 270deg,
      transparent 270deg 300deg,
      rgba(43, 197, 135, 0.8) 300deg 330deg,
      transparent 330deg 360deg
  );
      animation: rotatePattern 10s infinite linear;
      mix-blend-mode: multiply;
      transform-origin: 100% 0%;
      animation-delay: 3s;
  }
  
  #windmill-pattern .pattern-display::after {
      background: repeating-conic-gradient(
          from 0deg at 0% 100%, /* Unten links */
          rgb(157, 10, 180) 0deg 30deg,
          transparent 30deg 60deg,
          rgb(157, 10, 180) 60deg 90deg,
          transparent 90deg 120deg,
          rgb(157, 10, 180) 120deg 150deg,
          transparent 150deg 180deg,
          rgb(157, 10, 180) 180deg 210deg,
          transparent 210deg 240deg,
          rgb(157, 10, 180) 240deg 270deg,
          transparent 270deg 300deg,
          rgb(157, 10, 180) 300deg 330deg,
          transparent 330deg 360deg
      );
      animation: rotatePattern 10s infinite linear;
      mix-blend-mode: multiply;
      transform-origin: 0% 100%;
      animation-delay: 3s;
  }
  
  @keyframes rotatePattern {
      0% {
          transform: rotate(0deg);
      }
      100% {
          transform: rotate(360deg);
      }
  }


  #blurred-pyramid .pattern-display::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-conic-gradient(
      from 45deg at 100% 0%, 
      #87CEEB 0deg 90deg, 
      #87CEEB 90deg 180deg, 
      #E8D5AC 180deg 270deg, 
      #E8D5AC 270deg 360deg
    );
    background-size: 50px 50px; /* Size of the pyramid pattern grid */
    transform-origin: center;
    animation: pyramidMove 4.7s infinite ease-in-out; /* Rotating animation */
    animation-delay: 3s;
    z-index: 2;
  }
  
  /* Animation for the pyramid pattern movement */
  @keyframes pyramidMove {
    0% {
      transform: rotateX(30deg) translateY(0);
    }
    20% {
      transform: rotateX(60deg) translateY(-20px);
    }
    40% {
      transform: rotateX(90deg) translateY(-20px);
    }
    60% {
      transform: rotateX(120deg) translateY(-20px);
    }
    80% {
      transform: rotateX(150deg) translateY(-20px);
    }
    100% {
      transform: rotateX(180deg) translateY(0);
    }
  }



    #psychedelic-gradient .pattern-display::before,
    #psychedelic-gradient .pattern-display::after {
                    content: "";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 100%;
                    height: 100%;
                    transform-origin: center center;
                    transform: translate(-50%, -50%);
                    }

    #psychedelic-gradient .pattern-display::before {
    background: repeating-linear-gradient(
        60deg,
                        rgba(255, 215, 0, 0.8) 0%, /* Gelb */
                        rgba(242, 131, 46, 0.6) 15%, /* Orange */
                        rgba(46, 218, 241, 0.6) 30% /* Türkis */
                        ),
                        radial-gradient(
                        circle at center,
                        rgba(255, 255, 255, 0.2),
                        transparent 70%
                        );
                    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
                    animation: mainAnimation 10s infinite cubic-bezier(0.4, 0, 0.2, 1);
                    z-index: 2;
                    mix-blend-mode: screen;
                    }

    #psychedelic-gradient .pattern-display::after {
    background: linear-gradient(
        120deg,
                        #FFD700, /* Gelb */
                        #F2832E, /* Orange */
                        #2EDAF1 /* Türkis */
                    );
                    clip-path: circle(50% at 50% 50%);
                    animation: mainAnimation 20s infinite cubic-bezier(0.4, 0, 0.2, 1);
                    z-index: 1;
                    mix-blend-mode: overlay;
                    }

                    @keyframes mainAnimation {
                    0% {
                        transform: translate(-50%, -50%) scale(0.6) rotate(0deg);
                    }
                    25% {
                        transform: translate(-50%, -50%) scale(0.8) rotate(180deg);
                    }
                    50% {
                        transform: translate(-50%, -50%) scale(1.0) rotate(360deg);
                    }
                    75% {
                        transform: translate(-50%, -50%) scale(0.8) rotate(540deg);
                    }
                    100% {
                        transform: translate(-50%, -50%) scale(0.6) rotate(720deg);
                    }
                    }