body {
    background-color: #002C7A;
    color: white;
    overflow-y: hidden;
}

main {
    width: 40%;
}
a {
    color: white;
}
.animation {
    width: 100%;
    height: auto;
    display: flex;
    z-index: -1;
    position: absolute;
    justify-content: center;
    align-items: center;
    bottom: 30vh;
    transform-origin: 50% 50%;
    animation: schmelzen 10s ease-in-out forwards;
}
  
@keyframes schmelzen {
    0% { 
      transform:  translate(0) scale(1); 
    }
    20% { 
        transform: translate(10%, 20%) scale(4, 2); 
    }
    40% { 
        transform: translate(10%, 20%) scale(6, 3) 
    }
    60% { 
        transform: translate(10%, 30%) scale(3, 6) 
    }
    80% { 
        transform: translate(30%, 20%) scale(8, 3) 
    }
    100% { 
        transform:  translate(20%, 10%) scale(7, 8); 
      }
}


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

/* Mobile */
@media (max-width: 800px) {
    .animation {
        transform-origin: 50% 50%;
    }
    @keyframes schmelzen {
        0% { 
          transform:  translate(0) scale(1); 
        }
        20% { 
            transform: translate(5%, 10%) scale(2, 1); 
        }
        40% { 
            transform: translate(5%, 10%) scale(2, 2) 
        }
        60% { 
            transform: translate(5%, 15%) scale(2, 3) 
        }
        80% { 
            transform: translate(15%, 10%) scale(3, 2) 
        }
        100% { 
            transform:  translate(10%, 5%) scale(2, 2); 
          }
    }
}