body {
    font-family: "Comic Sans Ms";
    background-color: azure;
}

header {
    /* background-color: aqua; */

    text-align: center;
}

main {
    /* background-color: aquamarine; */
    width: 100%;
    height: 300px;

    text-align: center;
}

#container {
    /* background-color: azure; */

    display: flex;
    justify-content: center;
}

.app {
    float: left;

    display: flex;
    justify-content: center;

    width: 40px;
    height: 40px;

    margin: 5px;
    padding: 2.5px;

    /* background-color: cornflowerblue; */

    text-align: center;

    img {
        

        width: 40px;
        height: 40px;

        transition: width 1.5s, height 1.5s, filter 0.5s;

        
    }

}

.app:hover > a > img {
    width: 45px;
    height: 45px;
    filter: drop-shadow(10px 10px 5px #222);
    transition: width 0.5s, height 0.5s, filter 0.5s;
}


#logo {
    clear: both;

    padding: 25px ;

    img {
        height: 150px;
        width: 150px;

        animation: wave 10s linear infinite;
        animation-delay: 2s;

        filter: drop-shadow(15px 15px 20px rgb(46, 25, 15));
    }

}


footer {
    /* background-color: chartreuse; */
}

/* animations */

@keyframes wave {
    0% {
        transform: rotateX(0deg);
        transform: rotateY(0deg);
        transform: rotateZ(0deg);

        transform: skewX(0deg);
        transform: skewY(0deg);
    }
    25% {
        transform: rotateX(20deg);
        transform: rotateY(20deg);
        transform: rotateZ(20deg);

        transform: skewX(2.5deg);
        transform: skewY(-2.5deg);
    }
    50% {
        transform: rotateX(40deg);
        transform: rotateY(40deg);
        transform: rotateZ(40deg);

        transform: skewX(5deg);
        transform: skewY(-5deg);
    }
    75% {
        transform: rotateX(20deg);
        transform: rotateY(20deg);
        transform: rotateZ(20deg);

        transform: skewX(2.5deg);
        transform: skewY(-2.5deg);
    }
    100% {
        transform: rotateX(0deg);
        transform: rotateY(0deg);
        transform: rotateZ(0deg);

        transform: skewX(0deg);
        transform: skewY(0deg);
    }

}