@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
} 

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in-stop {
  -webkit-animation: fadeIn 4s ease-in-out;
          animation: fadeIn 4s ease-in-out;
}


.wiggle {
  -webkit-animation: wiggleWithBreaks 5s infinite;
          animation: wiggleWithBreaks 5s infinite;
}



  @media (min-aspect-ratio: 7/5) {
 @-webkit-keyframes wiggleWithBreaks {
            /* Wiggle for the first 25% (1 second) */
            0%, 5% { transform: rotate(8deg); }
            2.5% { transform: rotate(5deg); }
            7.5% { transform: rotate(12deg); }
            10% { transform: rotate(5deg); }
            12.5% { transform: rotate(12deg); }
            15% { transform: rotate(5deg); }
            17.5% { transform: rotate(12deg); }
            20% { transform: rotate(5deg); }
            22.5% { transform: rotate(12deg); }
            25% { transform: rotate(8deg); }
            
            /* Break/pause for 50% (2 seconds) */
            25%, 75% { transform: rotate(8deg); }
            
            /* Wiggle again for the last 25% (1 second) */
            75%, 80% { transform: rotate(8deg); }
            77.5% { transform: rotate(5deg); }
            82.5% { transform: rotate(12deg); }
            85% { transform: rotate(5deg); }
            87.5% { transform: rotate(12deg); }
            90% { transform: rotate(5deg); }
            92.5% { transform: rotate(12deg); }
            95% { transform: rotate(5deg); }
            97.5% { transform: rotate(12deg); }
            100% { transform: rotate(8deg); }
        }
 @keyframes wiggleWithBreaks {
            /* Wiggle for the first 25% (1 second) */
            0%, 5% { transform: rotate(8deg); }
            2.5% { transform: rotate(5deg); }
            7.5% { transform: rotate(12deg); }
            10% { transform: rotate(5deg); }
            12.5% { transform: rotate(12deg); }
            15% { transform: rotate(5deg); }
            17.5% { transform: rotate(12deg); }
            20% { transform: rotate(5deg); }
            22.5% { transform: rotate(12deg); }
            25% { transform: rotate(8deg); }
            
            /* Break/pause for 50% (2 seconds) */
            25%, 75% { transform: rotate(8deg); }
            
            /* Wiggle again for the last 25% (1 second) */
            75%, 80% { transform: rotate(8deg); }
            77.5% { transform: rotate(5deg); }
            82.5% { transform: rotate(12deg); }
            85% { transform: rotate(5deg); }
            87.5% { transform: rotate(12deg); }
            90% { transform: rotate(5deg); }
            92.5% { transform: rotate(12deg); }
            95% { transform: rotate(5deg); }
            97.5% { transform: rotate(12deg); }
            100% { transform: rotate(8deg); }
        }
      }

  @media (max-aspect-ratio: 7/5) {
     @-webkit-keyframes wiggleWithBreaks {
            /* Wiggle for the first 25% (1 second) */
            0%, 5% { transform: rotate(-8deg); }
            2.5% { transform: rotate(-5deg); }
            7.5% { transform: rotate(-12deg); }
            10% { transform: rotate(-5deg); }
            12.5% { transform: rotate(-12deg); }
            15% { transform: rotate(-5deg); }
            17.5% { transform: rotate(-12deg); }
            20% { transform: rotate(-5deg); }
            22.5% { transform: rotate(-12deg); }
            25% { transform: rotate(-8deg); }
            
            /* Break/pause for 50% (2 seconds) */
            25%, 75% { transform: rotate(-8deg); }
            
            /* Wiggle again for the last 25% (1 second) */
            75%, 80% { transform: rotate(-8deg); }
            77.5% { transform: rotate(-5deg); }
            82.5% { transform: rotate(-12deg); }
            85% { transform: rotate(-5deg); }
            87.5% { transform: rotate(-12deg); }
            90% { transform: rotate(-5deg); }
            92.5% { transform: rotate(-12deg); }
            95% { transform: rotate(-5deg); }
            97.5% { transform: rotate(-12deg); }
            100% { transform: rotate(-8deg); }
        }
     @keyframes wiggleWithBreaks {
            /* Wiggle for the first 25% (1 second) */
            0%, 5% { transform: rotate(-8deg); }
            2.5% { transform: rotate(-5deg); }
            7.5% { transform: rotate(-12deg); }
            10% { transform: rotate(-5deg); }
            12.5% { transform: rotate(-12deg); }
            15% { transform: rotate(-5deg); }
            17.5% { transform: rotate(-12deg); }
            20% { transform: rotate(-5deg); }
            22.5% { transform: rotate(-12deg); }
            25% { transform: rotate(-8deg); }
            
            /* Break/pause for 50% (2 seconds) */
            25%, 75% { transform: rotate(-8deg); }
            
            /* Wiggle again for the last 25% (1 second) */
            75%, 80% { transform: rotate(-8deg); }
            77.5% { transform: rotate(-5deg); }
            82.5% { transform: rotate(-12deg); }
            85% { transform: rotate(-5deg); }
            87.5% { transform: rotate(-12deg); }
            90% { transform: rotate(-5deg); }
            92.5% { transform: rotate(-12deg); }
            95% { transform: rotate(-5deg); }
            97.5% { transform: rotate(-12deg); }
            100% { transform: rotate(-8deg); }
        }
      }
/*************************** HEADER ANIMATIONS **************************/
#home-button:hover {
    transform: translateY(5%) scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

#home-button:active {
    transform: translateY(5%) scale(0.95);
}

#hamburger-wrapper:hover {
    transform: translateY(5%) scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

@media only screen and (max-width: 610px) {
    #menu-bar a:not(#homelink) {
        transform: translateY(-20px);
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

        /* Show navigation when checkbox is checked */
    .nav-toggle:checked~#menu-bar a:not(#homelink) {
        visibility: visible;
        display: block;
        padding-left: 4rem;
        padding-right: 4rem;
        transform: translateY(0);
    }

    /* Animate hamburger to X when checked */
    .nav-toggle:checked~#hamburger-wrapper .hamburger span:nth-child(1) {
        transform: rotate(45deg) translate(6.5px, 6.5px);
    }

    .nav-toggle:checked~#hamburger-wrapper .hamburger span:nth-child(2) {
        color: transparent;
        transform: scale(0);
    }

    .nav-toggle:checked~#hamburger-wrapper .hamburger span:nth-child(3) {
        transform: rotate(-45deg) translate(6.5px, -6.5px);
    }
  }


    #wieken {
          transform-box: fill-box;
           transform-origin: center;
    animation: spin 6s linear infinite;

  }

  @keyframes spin {
            from {
                transform: translate(2.022px, 11.367px) rotate(0deg);
            }
            to {
                 transform: translate(2.022px, 11.367px) rotate(-360deg);
            }
        }