@-webkit-keyframes large-wave {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(-15deg); }
    }
    
    @-webkit-keyframes medium-wave {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(-12deg); }
    }
    
    @-webkit-keyframes small-wave {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(-10deg); }
    }
    
    @keyframes large-wave {
    from { transform: rotate(0deg); }
    to { transform: rotate(-15deg); }
    }
    
    @keyframes medium-wave {
    from { transform: rotate(0deg); }
    to { transform: rotate(-12deg); }
    }
    
    @keyframes small-wave {
    from { transform: rotate(0deg); }
    to { transform: rotate(-10deg); }
    }
    
    .top {
    -webkit-animation: large-wave 5s infinite alternate;
    animation: large-wave 5s infinite alternate;
    }
    
    .middle {
    -webkit-animation: medium-wave 5.5s infinite alternate;
    animation: medium-wave 5.5s infinite alternate;
    }
    
    .bottom {
    -webkit-animation: small-wave 6s infinite alternate;
    animation: small-wave 6s infinite alternate;
    }
    
    @-webkit-keyframes dash {
    from { stroke-dashoffset: 1000; }
    to { stroke-dashoffset: 0; }
    }
    
    @keyframes dash {
    from { stroke-dashoffset: 1000; }
    to { stroke-dashoffset: 0; }
    }
    
    .wind {
    stroke-dasharray: 100;
    opacity: 0.25;
    -webkit-animation: dash 35s linear infinite;
    animation: dash 35s linear infinite;
    }
    
    #breathing-button {
        -webkit-animation: breathing 5s ease-out infinite normal;
        animation: breathing 5s ease-out infinite normal;
        -webkit-font-smoothing: antialiased;
      }
    
    
    @-webkit-keyframes breathing {
      0% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
      }
    
      25% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    
      60% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
      }
    
      100% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
      }
    }
    
    @keyframes breathing {
      0% {
        -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
      }
    
      25% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
      }
    
      60% {
        -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
      }
    
      100% {
        -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
      }
    }
    
    .field {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 300px;
    }
    
    .mouse {
        width: 25px;
        height: 45px;
        border: 3px solid #fff;
        border-radius: 60px;
        position: relative;
        
    }

    .mouse::before {
        content: '';
        width: 6px;
        height: 6px;
        position: absolute;
        top: 5px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #fff;
        border-radius: 50%;
        opacity: 1;
        animation: wheel 2s infinite;
        -webkit-animation: wheel 2s infinite;
    }
    
    @keyframes wheel {
        to {
            opacity: 0;
            top: 30px;
        }
    }
    
    @-webkit-keyframes wheel {
        to {
            opacity: 0;
            top: 30px;
        }
    }