body {
    margin: 0;
    overflow: hidden; /* スクロールを無効にする */
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #FF00FF; /* 蛍光マゼンタ */
    color: #00FF00; /* 蛍光グリーン */
    text-align: center;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23FF0000" d="M12 2L1 21h22L12 2z"/></svg>') 12 12, auto; /* 不気味なカーソル */
    animation: glitchBackground 0.1s infinite alternate; /* 背景のグリッチ */
    -webkit-user-select: none; /* テキスト選択無効 */
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: none; /* スマホでのタップによる画面移動・拡大縮小を無効 */
}

@keyframes glitchBackground {
    0% { background-color: #FF00FF; }
    50% { background-color: #00FFFF; } /* シアン */
    100% { background-color: #FFFF00; } /* 黄色 */
}

#container {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: flicker 0.1s infinite alternate; /* 全体のちらつき */
}

@keyframes flicker {
    0% { opacity: 1; }
    50% { opacity: 0.8; }
    100% { opacity: 1; }
}

h1, p, button {
    animation: pulse 1s infinite alternate, colorShift 2s infinite alternate; /* 脈動と色変化 */
    text-shadow: 0 0 10px #00FF00, 0 0 20px #00FF00, 0 0 30px #00FF00; /* ネオングリーン */
    z-index: 10;
}

@keyframes pulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
}

@keyframes colorShift {
    0% { color: #00FF00; }
    33% { color: #FF00FF; }
    66% { color: #FFFF00; }
    100% { color: #00FF00; }
}

h1 {
    font-size: 3em;
    margin-bottom: 20px;
}

p {
    font-size: 1.5em;
    margin-bottom: 30px;
}

button {
    padding: 15px 30px;
    font-size: 1.2em;
    background-color: #FF0000; /* 赤 */
    color: #FFFFFF;
    border: 5px solid #00FF00;
    cursor: pointer;
    box-shadow: 0 0 15px #FF0000, 0 0 25px #FF0000;
    animation: buttonGlitch 0.2s infinite alternate; /* ボタンのグリッチ */
}

@keyframes buttonGlitch {
    0% { transform: skewX(0deg); }
    25% { transform: skewX(5deg); }
    50% { transform: skewX(0deg); }
    75% { transform: skewX(-5deg); }
    100% { transform: skewX(0deg); }
}

/* ランダムな記号や画像のためのスタイル */
.random-element {
    position: absolute;
    font-size: 2em;
    animation: moveAndRotate 5s infinite alternate, colorShift 2s infinite alternate;
    z-index: 5;
    pointer-events: none; /* クリックイベントを透過 */
}

@keyframes moveAndRotate {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
    25% { transform: translate(10vw, 10vh) rotate(90deg) scale(1.1); }
    50% { transform: translate(-10vw, 20vh) rotate(180deg) scale(0.9); }
    75% { transform: translate(5vw, -15vh) rotate(270deg) scale(1.2); }
    100% { transform: translate(0, 0) rotate(360deg) scale(1); }
}

/* スマホでのタップによる拡大縮小を無効にするための追加スタイル */
html, body {
    touch-action: manipulation;
}
