:root {
    /* Color Palette - Harvest Festa Theme */
    --primary-color: #9B2226; /* Rich wine red */
    --secondary-color: #A98743; /* Ochre gold */
    --accent-color: #EE9B00; /* Vibrant gold */
    --nature-blue: #0088A3; /* Saiko Blue */
    --text-color: #333;
    --light-bg: #f8f8f8;
    
    /* Background overlay colors */
    --bg-color-1: rgba(253, 236, 236, 0.85); /* Light pink */
    --bg-color-2: rgba(254, 248, 231, 0.85);
    --bg-color-3: rgba(230, 245, 250, 0.85); /* Light blue */
    
    /* Animation durations */
    --animation-duration-slow: 25s;
    --animation-duration-medium: 20s;
    
    /* Background dot properties */
    --dot-size-small: 80px;
    --dot-size-medium: 100px;
    --dot-size-large: 120px;
    --dot-opacity-low: 0.2;
    --dot-opacity-medium: 0.25;
}

/* Floating Animation Keyframes */
@keyframes float-gentle {
    0%, 100% { 
        transform: translate(0, 0) scale(1); 
    }
    25% { 
        transform: translate(20px, -20px) scale(1.1); 
    }
    50% { 
        transform: translate(-20px, 20px) scale(0.95); 
    }
    75% { 
        transform: translate(20px, 15px) scale(1.05); 
    }
}

@keyframes float-dynamic {
    0%, 100% { 
        transform: translate(0, 0) scale(1); 
    }
    33% { 
        transform: translate(-25px, 20px) scale(1.15); 
    }
    66% { 
        transform: translate(25px, -25px) scale(0.9); 
    }
}

/* Base Typography */
body {
    font-family: 
        YuMincho, 
        'Yu Mincho', 
        '游明朝', 
        'ヒラギノ明朝 ProN W6', 
        HiraMinProN-W6, 
        'HG明朝E', 
        'ＭＳ Ｐ明朝', 
        MS PMincho, 
        'MS 明朝', 
        serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    position: relative;
}

/* Animated Background Layer 1 - Red and Yellow Dots */
body::before {
    content: '';
    position: fixed;
    top: -80px;
    left: -80px;
    right: -80px;
    bottom: -80px;
    z-index: -1;
    background: 
        radial-gradient(
            circle at 50% 50%, 
            #FF6B6B 0, 
            #FF6B6B var(--dot-size-small), 
            transparent var(--dot-size-small)
        ),
        radial-gradient(
            circle at 50% 50%, 
            #FFD93D 0, 
            #FFD93D var(--dot-size-medium), 
            transparent var(--dot-size-medium)
        );
    background-size: 600px 600px;
    background-position: 120px 120px, 420px 420px;
    opacity: var(--dot-opacity-medium);
    animation: float-gentle var(--animation-duration-medium) ease-in-out infinite;
}

/* Animated Background Layer 2 - Blue Dots */
body::after {
    content: '';
    position: fixed;
    top: -90px;
    left: -90px;
    right: -90px;
    bottom: -90px;
    z-index: -1;
    background: 
        radial-gradient(
            circle at 50% 50%, 
            #4ECDC4 0, 
            #4ECDC4 var(--dot-size-large), 
            transparent var(--dot-size-large)
        );
    background-size: 700px 700px;
    background-position: 350px 250px;
    opacity: var(--dot-opacity-low);
    animation: float-dynamic var(--animation-duration-slow) ease-in-out infinite;
}

.container {
    padding: 20px;
    max-width: 95%;
    margin: 0 auto;
}