html {
    height:100%;
  }
  
  body {
    margin:0;
  }
  
  .bgx {
    animation:slide 3s ease-in-out infinite alternate;
    background-image: linear-gradient(-60deg, #000000 50%,rgb(44, 34, 173) 50%);
    bottom:0;
    left:-50%;
    opacity:.5;
    position:fixed;
    right:-50%;
    top:0;
    z-index:-1;
  }
  
  .bg2x {
    animation-direction:alternate-reverse;
    animation-duration:4s;
    background-image: linear-gradient(-60deg, #000000 50%,rgb(198, 119, 35) 50%);
  }
  
  .bg3x {
    animation-duration:5s;
    background-image: linear-gradient(-60deg, #000000 50%,rgb(63, 138, 165) 50%);
  }
  
  .content {
    border-radius:.25em;
    box-shadow:0 0 .25em rgba(0,0,0,.25);
    box-sizing:border-box;
    text-align:center;
  }
  
  h1 {
    font-family:monospace;
  }
  
  @keyframes slide {
    0% {
      transform:translateX(-25%);
    }
    100% {
      transform:translateX(25%);
    }
  }

  body, html {
    height: 100%;
    padding 0;
    margin: 0;
  }
  
  body {
    background-image: url('https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b73302ddf5fabf9285df2da9c462efbb&auto=format&fit=crop&w=1350&q=80');
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  .gradient-container {
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: radial-gradient(at 50% 50%, rgba(44, 34, 54, 0.9) 0, rgb(0, 1, 7) 30%);
  }

  /* Sternen-Animation */
  @keyframes animStar {
    from {
        transform: translateY(0px);
    }
    to {
        transform: translateY(-2000px);
    }
  }