/*
  CSS RESET
*/


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: normal;
    font-size: 100%;
  }
  
  
  ul,
  ol {
    list-style: none;
  }
  
  
  img,
  video {
    
    height:100%;
    aspect-ratio: 1;
  }
 
  
  a {
    color: black;
    text-decoration: none;
  }

    /*
    STYLES
  */

  :root {
    font-size: 16px;
  }

  body {
    background-color: black;
    perspective: 100000px;
    overflow:hidden;
  }

  circle {
    cx:0%; 
    cy:50%; 
    r:50%; 
    stroke:white;
    stroke-width: 1px;
    fill:white;
    fill-opacity:0.0;
  }

  code {
    color: white;
    font-size: calc(.8vh + .8vw);
  }

  .fullscreen {
    position: absolute;
    width: 100vw;
    height: 100vh;
  }

  .center {
    position: absolute;
    height: 100vh;
    text-align: center;
    padding-top: 25vh;
    padding-bottom: 25vh;
    padding-left: 25vw;
    padding-right: 25vw;
    align-content: center;
  }

  .cbutton {
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
  }



  .gaya {
    width: auto;
    max-width: 100vw;
    height: 100vh;
    margin-left: auto;
    margin-right: auto;
    transform-style: preserve-3d;

  }

  .svg-wrapper {
    text-align:center;
    max-height: 100%;
    aspect-ratio: 1/1;
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
    animation-name: modulation;
    animation-direction: alternate;
    animation-duration: 0s;
    animation-iteration-count: infinite;


    svg {
        position: absolute;
        width: 100%;
        height: auto;
        animation-name: zoom-in;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        overflow: visible; 
        /* !!!! overflow: visible lässt elemente im zweifel aus dem seitenlayout ausbrechen */
    }
  }

  .far {
    overflow: hidden; 
  }
  
  .level-1 {
    width: 100%;
  }

  .level-2 {
    width: 66%;
}

.level-3 {
    width: 66%;
}

.s1 {
    transform:scale(0,0);
    position:absolute;
    animation-name:s1;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

.s2 {
    transform:scale(0,0);
    position:absolute;
    animation-name:s2;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

.s3 {
    transform:scale(0,0);
    position:absolute;
    animation-name:s3;
    animation-duration: 7s;
    animation-iteration-count: infinite;
}

.s4 {
    transform:scale(0,0);
    position:absolute;
    animation-name:s4;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

.s5 {
    transform:scale(0,0);
    position:absolute;
    animation-name:s5;
    animation-duration: 7s;
    animation-iteration-count: infinite;
}*/

.d1 {
    animation-delay: 1s;
}

.d2 {
    animation-delay: 3s;
}

.d3 {
    animation-delay: 5s;
} 

.p1 {
    animation-duration: 30s;
}

.p2 {
    animation-duration: 80s;
}

.p3 {
    animation-duration: 21s;
}

.b {
    filter:blur(20px)
}

.ba {
    animation-name: blur;
    animation-duration:3s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

.r {
    animation-name: rotate;
    animation-direction: alternate;
    animation-duration: 50s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.-r {
    animation-name: -rotate;
    animation-direction: alternate;
    animation-duration: 50s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}




@keyframes s1{
    from {top:0%; right:0px; transform: translate(0%, -50%) scale(3%,3%);}
    to {top:150%; right:-100%; transform: translate(0%, -50%) scale(50%,50%);}
  }

@keyframes s2{
    from {top:0%; right:0px; transform: translate(0%, -50%) scale(3%,3%);}
    to {top:50%; right:-150%; transform: translate(0%, -50%) scale(100%,100%);}
  }

@keyframes s3{
    from {top:0%; right:0px; transform: translate(0%, -50%) scale(3%,3%);}
    to {top:150%; right:70%; transform: translate(0%, -50%) scale(100%,100%);}
}

@keyframes s4{
    from {top:0%; right:0px; transform: translate(0%, -50%) scale(3%,3%);}
    to {top:20%; right:150%; transform: translate(0%, -50%) scale(100%,100%);}
}

@keyframes s5{
    from {top:0%; right:0px; transform: translate(0%, -50%) scale(3%,3%);}
    to {top:50%; right:200%; transform: translate(0%, -50%) scale(70%,70%);}
}

@keyframes zoom-in{
    from {width: 5000%;}
    to {width: 7500%;}
  }

  @keyframes modulation {
    from {top: 0%;}
    to {top: 10%;}
  }

  @keyframes rotate{
    from {transform: rotateX(0deg);}
    to {transform: rotateX(360deg);}
  }

  @keyframes -rotate{
    from {transform: rotateX(0deg);}
    to {transform: rotateX(-360deg);}
  }

  @keyframes position{
    from {transform: rotateX(0deg);}
    to {transform: rotateX(360deg);}
  }

  @keyframes blur{
    from {filter: blur(200px);}
    to {filter: blur(0px);}
  }

.rh1 {
    position:absolute;
    z-index:2;
    width:100%;
}

.rh2 {
    position:absolute;
    z-index:2;
    width:100%;
    animation-name: -rotate;
    animation-direction: alternate;
    animation-duration: 50s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}