body {
    position: relative;
    background-color: #002C7A;
    color: white;
    width: 100%;
	height: 100vh;
    overflow-y: hidden;
}

main {
    width: 40%;
    z-index: 2;
}
a {
    color: white;
}

.animation {
    width: 100%;
    height: auto;
    display: flex;
    z-index: -1;
    position: absolute;
    justify-content: center;
    align-items: center;
}
#k1 {
    transform-origin: 50% 50%;
    animation: krach1 0.15s 1s ease-out forwards;
}
@keyframes krach1 {
    from { 
      transform: translate(0); 
    }
    to { 
        transform: translate(1%, 2%); 
    }
 }
 #k2 {
    transform-origin: 50% 50%;
    animation: krach2 0.15s 1s ease-out forwards;
}
@keyframes krach2 {
    from { 
      transform: translate(0); 
    }
    to { 
        transform: translate(-3%, 0); 
    }
}
#k3 {
    transform-origin: 50% 50%;
    animation: krach3 0.15s 1s ease-out forwards;
}
@keyframes krach3 {
    from { 
      transform: translate(0); 
    }
    to { 
        transform: translate(-2%, 5%); 
    }
 }
#k4 {
    transform-origin: 50% 50%;
    animation: krach4 0.15s 1s ease-out forwards;
}
@keyframes krach4 {
    from { 
      transform: translate(0); 
    }
    to { 
        transform: translate(0, 5%); 
    }
 }
#k5 {
    transform-origin: 50% 50%;
    animation: krach5 0.15s 1s ease-out forwards;
}
@keyframes krach5 {
    from { 
      transform: translate(0); 
    }
    to { 
        transform: translate(-2%, 1%); 
    }
 }
#k6 {
    transform-origin: 50% 50%;
    animation: krach6 0.15s 1s ease-out forwards;
}
@keyframes krach6 {
    from { 
      transform: translate(0); 
    }
    to { 
        transform: translate(-3%, 6%); 
    }
 }
#k7 {
    transform-origin: 50% 50%;
    animation: krach7 0.15s 1s ease-out forwards;
}
@keyframes krach7 {
    from { 
      transform: translate(0); 
    }
    to { 
        transform: translate(-1%, -2%); 
    }
 }
#k8 {
    transform-origin: 50% 50%;
    animation: krach8 0.15s 1s ease-out forwards;
}
@keyframes krach8 {
    from { 
      transform: translate(0); 
    }
    to { 
        transform: translate(-1%, 3%); 
    }
 }
#k9 {
    transform-origin: 50% 50%;
    animation: krach9 0.15s 1s ease-out forwards;
}
@keyframes krach9 {
    from { 
      transform: translate(0); 
    }
    to { 
        transform: translate(-1%, 6%); 
    }
 }
 #k10 {
    transform-origin: 50% 50%;
    animation: krach10 0.15s 1s ease-out forwards;
}
@keyframes krach10 {
    from { 
      transform: translate(0); 
    }
    to { 
        transform: translate(-2%, -3%); 
    }
 }
#k11 {
    transform-origin: 50% 50%;
    animation: krach11 0.15s 1s ease-out forwards;
}
@keyframes krach11 {
    from { 
      transform: translate(0); 
    }
    to { 
        transform: translate(2%, 6%); 
    }
 } 

/* iPad */
@media (max-width: 1040px) {
    main {
        width: 90%;
    }
    body,
	.animation,
	svg {
		width: auto;
		height: 100vh;
	}
}