@charset "UTF-8";

/*-------------------------------------------
共通
-------------------------------------------*/
.main h1 {
    text-shadow: 40px -20px 5px rgba(246, 165, 34, 0.4);
}

.fluid {
    width: 40vh;
    /*横幅*/
    height: 40vh;
    /*縦幅*/
    background: #9ed4e9b9;
    /*背景色*/
    animation: fluidrotate 30s ease 0s infinite;
    /*アニメーションの設定*/
}

@keyframes fluidrotate {

    0%, 100% {
        border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
    }

    14% {
        border-radius: 16% 84% 55% 45% / 48% 22% 78% 52%;
    }

    28% {
        border-radius: 77% 23% 55% 45% / 25% 49% 51% 75%;
    }

    42% {
        border-radius: 45% 55% 85% 15% / 51% 29% 71% 49%;
    }

    56% {
        border-radius: 22% 78% 17% 83% / 40% 56% 44% 60%;
    }

    70% {
        border-radius: 22% 78% 46% 54% / 37% 31% 69% 63%;
    }

    84% {
        border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
    }

}