body {

    background: linear-gradient(#000,#092dcc);
    margin: 0;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: black; */
  }

  
  .container
  {
      position: absolute;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      align-items: center;
      justify-content: center;
    }

  .container::before
  {
      content: '';
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 153px; 
      background: url('Baum.png');
      z-index: -1;
  }
.container .circle
{
    position: absolute;
    top: 10%;
    left: 10%;
    transform: translateX(-50%);
    width: 150px;
    height: 150px;
    background: #fff;
    border-radius: 50%;
}
.container .circle::before
{
    content: ' ';
    position: absolute;
    inset: -200px -300px;
    background: url('Bear-2\ .png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 120px;
    

}



.container .haus
{
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
    
    width: 485px;
    height: 245px;
}
.container .haus::before
{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%; 
    background: url('Haus.png');
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}

  @keyframes firework {
    0% { transform: translate(var(--x), var(--initialY)); width: var(--initialSize); opacity: 1; }
    50% { width: 0.5vmin; opacity: 1; }
    100% { width: var(--finalSize); opacity: 0; }
  }
  
  /* @keyframes fireworkPseudo {
    0% { transform: translate(-50%, -50%); width: var(--initialSize); opacity: 1; }
    50% { width: 0.5vmin; opacity: 1; }
    100% { width: var(--finalSize); opacity: 0; }
  }
   */
  .firework,
  .firework::before,
  .firework::after
  {
    --initialSize: 0.5vmin;
    --finalSize: 45vmin;
    --particleSize: 0.2vmin;
    --color1: yellow;
    --color2: khaki;
    --color3: white;
    --color4: lime;
    --color5: gold;
    --color6: mediumseagreen;
    --y: -30vmin;
    --x: -50%;
    --initialY: 60vmin;
    content: "";
    animation: firework 2s infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, var(--y));
    width: var(--initialSize);
    aspect-ratio: 1;
    background: 
      /*
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 0%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 0%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 100%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 100%,
      */
      
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 50% 0%,
      radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 50%,
      radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 50% 100%,
      radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 0% 50%,
      
      /* bottom right */
      radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 80% 90%,
      radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 95% 90%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 90% 70%,
      radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 60%,
      radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 55% 80%,
      radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 70% 77%,
      
      /* bottom left */
      radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 22% 90%,
      radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 45% 90%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 70%,
      radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 10% 60%,
      radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 31% 80%,
      radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 28% 77%,
      radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 13% 72%,
      
      /* top left */
      radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 80% 10%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 95% 14%,
      radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 90% 23%,
      radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 100% 43%,
      radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 85% 27%,
      radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 77% 37%,
      radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 60% 7%,
      
      /* top right */
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 22% 14%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 45% 20%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 34%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 10% 29%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 31% 37%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 28% 7%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 13% 42%
      ;
    background-size: var(--initialSize) var(--initialSize);
    background-repeat: no-repeat;
  }
  
  .firework::before {
    --x: -50%;
    --y: -50%;
    --initialY: -50%;
  /*   transform: translate(-20vmin, -2vmin) rotate(40deg) scale(1.3) rotateY(40deg); */
    transform: translate(-50%, -50%) rotate(40deg) scale(1.3) rotateY(40deg);
  /*   animation: fireworkPseudo 2s infinite; */
  }
  
  .firework::after {
    --x: -50%;
    --y: -50%;
    --initialY: -50%;
  /*   transform: translate(44vmin, -50%) rotate(170deg) scale(1.15) rotateY(-30deg); */
    transform: translate(-50%, -50%) rotate(170deg) scale(1.15) rotateY(-30deg);
  /*   animation: fireworkPseudo 2s infinite; */
  }
  
  .firework:nth-child(2) {
    --x: 30vmin;
  }
  
  .firework:nth-child(2),
  .firework:nth-child(2)::before,
  .firework:nth-child(2)::after {
    --color1: pink;
    --color2: violet;
    --color3: fuchsia;
    --color4: orchid;
    --color5: plum;
    --color6: lavender;  
    --finalSize: 40vmin;
    left: 30%;
    top: 60%;
    animation-delay: -0.25s;
  }
  
  .firework:nth-child(3) {
    --x: -30vmin;
    --y: -50vmin;
  }
  
  .firework:nth-child(3),
  .firework:nth-child(3)::before,
  .firework:nth-child(3)::after {
    --color1: cyan;
    --color2: lightcyan;
    --color3: lightblue;
    --color4: PaleTurquoise;
    --color5: SkyBlue;
    --color6: lavender;
    --finalSize: 35vmin;
    left: 70%;
    top: 60%;
    animation-delay: -0.4s;
  }


  .firework:nth-child(4) {
    --x: -2vmin;
    --y: -60vmin;
  }
  
  .firework:nth-child(4),
  .firework:nth-child(4)::before,
  .firework:nth-child(4)::after {
    --color1: red;
    --color2: #a73e3e;
    --color3: hsl(0, 76%, 53%);
    --color4: hsl(14, 60%, 65%);
    --color5: hsl(0, 98%, 51%);
    --color6: hsl(0, 93%, 32%);
    --finalSize: 35vmin;
    left: 90%;
    top: 60%;
    animation-delay: -0.7s;
  }
  

  .firework:nth-child(5) {
    --x: 20vmin;
    --y: -60vmin;
  }
  
  .firework:nth-child(5),
  .firework:nth-child(5)::before,
  .firework:nth-child(5)::after {
    --color1: cyan;
    --color2: lightcyan;
    --color3: lightblue;
    --color4: PaleTurquoise;
    --color5: SkyBlue;
    --color6: lavender;
    --finalSize: 40vmin;
    left: 10%;
    top: 60%;
    animation-delay: -0.95s;
  }
  


  .container .neon 
  {
      position: absolute;
      top: 10%;
      left: 50%;
      transform: translateX(-50%);
/*      width: 350px;
      height: 350px;
    position: relative; */
    align-items: flex-start;
    overflow: hidden;
    filter: brightness(200%);
}

.text {
    background-color: black;
    color: white;
    font-size: 5vw;
    font-weight: bold;
    font-family: sans-serif;
    text-transform: uppercase;
    position: relative; 
    user-select: none;
}

.text::before {
    content: attr(data-text);
    position: absolute;  
    color: white;
    filter: blur(0.02em);
    mix-blend-mode: difference;
}

.gradient {
    position: absolute; 
    background: linear-gradient(45deg, red, gold, lightgreen, gold, red);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    mix-blend-mode: multiply;
}

.spotlight {
    position: absolute; 
    top: -100%;
    left: -100%;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(
            circle,
            white,
            transparent 25%
        ) center / 25% 25%,
        radial-gradient(
            circle,
            white,
            black 25%
        ) center / 12.5% 12.5%;
    animation: light 5s linear infinite;
    mix-blend-mode: color-dodge;
}

@keyframes light {
    to {
        transform: translate(50%, 50%);
    }
}




.fade {
    position: relative;
    width: 100%;
    min-height: 60vh;
    top: -25px;
    background-image: linear-gradient(0deg, transparent, black 75%);
    z-index: 1;
  }
  
  .star-wars {
    display: flex;
    justify-content: center;
    position: relative;
    height: 1200px;
    color: #feda4a;
    font-family: 'Pathway Gothic One', sans-serif;
    font-size: 500%;
    font-weight: 600;
    letter-spacing: 6px;
    line-height: 150%;
    perspective: 400px;
    text-align: center;
  }
  
  .crawl {
    position: relative;
    top: 99999px;
    transform-origin: 50% 100%;
    animation: crawl 60s linear;
  }
  
  .crawl > .title {
    font-size: 90%;
    text-align: center;
  }
  
  .crawl > .title h1 {
    margin: 0 0 100px;
    text-transform: uppercase;
  }

  .crawl > .title h2 {
    margin: 0 0 60px;
    text-transform: uppercase;
  }
  
  @keyframes crawl {
    0% {
      top: -100px;
      transform: rotateX(20deg)  translateZ(0);
    }
    100% { 
      top: -6000px;
      transform: rotateX(25deg) translateZ(-2500px);
    }
  }