/* 全画面のスタイル設定 */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* 背景のアニメーション設定 */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(45deg, #8ee86f, #ff9764, #d986d4, #8ee86f);
    background-size: 800% 800% ;
    animation: gradientBackground 10s ease infinite;
}

@keyframes gradientBackground {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ロゴを縦横中央に配置 */
.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.logo {
    max-width: 100%;
    max-height: 100%;
}