body {
    background-color: #195A32;
    color: white;
    overflow-y: hidden;
}

main {
    width: 40%;
}
a {
    color: white;
}

.animation {
    width: 117%;
    height: auto;
    display: flex;
    z-index: -1;
    position: absolute;
    justify-content: center;
    align-items: center;
}
#dreieck1 {
    transform-origin: 50% 50%;
    animation: krach1 0.3s ease-out forwards;
}
@keyframes krach1 {
    from { 
      transform:  translate(0) rotate(0); 
    }
    to { 
        transform: translate(-20%, -20%) rotate(0.2turn); 
    }
 }
#dreieck2 {
    transform-origin: 50% 50%;
    animation: krach2 0.3s ease-out forwards;
}
@keyframes krach2 {
    from { 
      transform:  translate(0) rotate(0); 
    }
    to { 
        transform: translate(-80%, -20%) rotate(-0.18turn); 
    }
}
#dreieck3 {
    transform-origin: 50% 50%;
    animation: krach3 0.3s ease-out forwards;
}
@keyframes krach3 {
    from { 
      transform:  translate(0) rotate(0); 
    }
    to { 
        transform: translate(-10%, -20%) rotate(-0.1turn); 
    }
 }
#dreieck4 {
    transform-origin: 50% 50%;
    animation: krach4 0.3s ease-out forwards;
}
@keyframes krach4 {
    from { 
      transform: translate(0) rotate(0); 
    }
    to { 
        transform: translate(0%, 30%) rotate(-0.2turn); 
    }
 }
#dreieck5 {
    transform-origin: 50% 50%;
    animation: krach5 0.3s ease-out forwards;
}
@keyframes krach5 {
    from { 
      transform: translate(0) rotate(0); 
    }
    to { 
        transform: translate(-10%, -38%) rotate(-0.15turn); 
    }
 }
#dreieck6 {
    transform-origin: 50% 50%;
    animation: krach6 0.3s ease-out forwards;
}
@keyframes krach6 {
    from { 
      transform: translate(0) rotate(0); 
    }
    to { 
        transform: translate(0%, 45%) rotate(0.2turn); 
    }
 }
#dreieck7 {
    transform-origin: 50% 50%;
    animation: krach7 0.3s ease-out forwards;
}
@keyframes krach7 {
    from { 
      transform: translate(0) rotate(0); 
    }
    to { 
        transform: translate(30%, -15%) rotate(0.3turn); 
    }
 }
 #dreieck8 {
    transform-origin: 50% 50%;
    animation: krach8 0.3s ease-out forwards;
}
@keyframes krach8 {
    from { 
      transform: translate(0) rotate(0); 
    }
     to { 
        transform: translate(0, 5%) rotate(-0.25turn); 
    }
 }

 /* iPad */
@media (max-width: 1040px) {
    main {
        width: 80%;
    }
    body {
		height: 100vh;
    }
}